UIKit Dynamics を使用してViewを滑らかに移動する方法

このエントリーをはてなブックマークに追加
はてなブックマーク - UIKit Dynamics を使用してViewを滑らかに移動する方法

TweetOverview 2.0.0 がリリースされました。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ

これまでのバージョンがiOS7でちょっと不具合があり、修正しようと思ったところ、ここもなおそう、あそこもなおそうとやっていたら、ほぼ書き直しになってしまいました。前バージョンではUITableViewを使用してスクロールしていたのですが、これがデータが多くなるとパフォーマンスも落ちますし、また検索ストリームにあまりにたくさんのツイートが入ってきた時に安定性が悪いという問題がなかなか解決しませんでした。

これを解決するためにUICollectionViewを使ってみたのですが、やはり完全に綺麗にスクロールさせつつパフォーマンスを維持するのが難しかったので断念しました。そこで出てきたのが、UIKit Dynamicsの使用です。TweetOverviewの基本的な使い方は、流れてくるツイートを俯瞰して見る事なので、過去までスクロールする事より、現在の最新のツイートを綺麗に見る事が出来る事を重視して、1画面内でのツイートの動きを確実に滑らかに表示して、かつ大量のツイート検索にも絶えられるものにする方針に変更しました。そのため、スクロールして過去ツイートを表示する機能だけ削除されています。

UIKit Dynamicsは、UIViewの動きに、物理エンジン(風)を連携出来るようにしたものです。バネの動きや、衝突の動きなどが簡単に実現出来るようになっています。物理エンジンと言うと、難しいと感じるかもしれませんが、このApple製のサンプルプログラムを動かしてみると、使ってみたいと思うようになるのではないかと思います。
UIKit Dynamics Catalog

この中にSnapというものがあって、指定した位置にViewが動くというものがありこれを使用してみたいと思いました。ただ、このSnapは回転しながら動くため、ちょっとTweetOverviewで動かすと変な感じになります。それで、回転せず、四隅を引っ張る4つのバネによって中心位置を設定出来る、カスタムビベイバーを作成して、githubに公開しました。

tomohisa/TOV4PointBehavior

非常に簡単なサンプルですが、Youtubeに動作の様子もアップしました。

パラメーターを変える事によって、跳ね返りや動きのスピードを変えられるので、好みの動きを設定出来るのではないかと思います。良かったらお試しください。TweetOverviewで使った機能はバネによる引っぱりだけですが、UIKit Dynamicsには、もっとたくさん機能があるので、是非使ってみると良いと思います。

これを使って作ったTweetOverview 2.0.0のサンプルムービーがこちら

こんな感じで動作するようになっています。”iPad”というかなり大量のツイートが検索されるキーワードを追加しています。

Comments

comments

Powered by Facebook Comments

1件のコメント
  1. […] ると思います。大量のツイートが押し寄せた時の安定性は劇的に向上しています。技術的背景はこちら。 UIKit Dynamics を使用してViewを滑らかに移動する方法 | Zero4Racer PRO Developer’s Blog […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.