Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード Twitter

2015-10-08

【iOS9】Core Imageを用いたリッチな画面遷移アニメーション #cm_ios9

昨日、クラスメソッドさん主催の勉強会『iOS 9 週連続 Bootcamp!2週目』にて登壇させていただきました。



タイトルにある "Tips&Tricks" はWWDCのセッション名でもたびたび使われている用語で、Tricksというのは「コツ」とか「うまいやり方」みたいな意味らしいです。


こういうタイトルにしたのは、(資料冒頭にもある通り、)新しく追加されたフィルタを紹介したところで *1カメラアプリとかつくってる人でもないとあまり使う機会がないわけで、定員150名という大きい勉強会で話す内容じゃないよなぁ。。と悩み、なるべく多くのアプリ開発において普遍的に役立つような内容を、とアレコレ考えた結果、次のような切り口で話すことにした次第です。

  • Apple も UI で多用する「ブラー」の話
  • Core Image を画面遷移のカスタムアニメーションに使う話
  • ヌルッとしたアニメーションを実現するための Metal の話

今回は画像処理を使ったアニメーションの話が中心なので、スライド内ではふんだんに動画を使ったのですが、残念ながらslideshareでは動画が再生できません。デモのアニメーションGIFだけこちらに載せておきます。


Box Blur

Core Image の CIBoxBlur (iOS 9 で追加)を用いたカスタム画面遷移アニメーション


f:id:shu223:20151008085228g:image


Motion Blur

Core Image の CIMotionBlur (iOS 8.3 で追加)を用いたカスタム画面遷移アニメーション


f:id:shu223:20151008085257g:image

(※モーションブラーは、WWDC2014 で CIKernel を用いた実装が紹介され、OSSも出ましたが、その後ビルトインフィルタとして利用できるようになりました)


CIFilter Transitions

Core Image の CITransitionCategory にあるトランジションエフェクトを用いたカスタム画面遷移アニメーション


f:id:shu223:20151008081300g:image



サンプルはすべてGitHubにアップしてあるので、URL等スライドにてご確認ください。


補足

(Twitterで質問を見かけた)Metal 対応デバイスについては今回の発表にあたって整理したものがあるので、近々ブログかQiitaにアップします。


スライド内で触れている Core Image のトランジションエフェクトについては、下記記事に解説があります。


また画面遷移時のカスタムアニメーションについては、下記記事をご参照ください。


f:id:shu223:20140416100040g:image


今回は割愛した iOS 9 で追加された Core Image の新フィルタや、文字領域抽出(CITextDetector)については下記記事で書いています。


ボツネタ集

20名ぐらいの規模だと、とくに悩むこともなく自分の興味のあるネタを調べて発表するのですが、100名を超える規模の大きい勉強会だと、ニッチすぎる話だったり、調べたてホヤホヤで自分の中でまだあまり自信のないことについて話すのは気が引けるので、いつも何について話すかあーでもないこーでもないと悩んでしまいます。以下その過程で出てきたボツネタ集。


ボツネタ1.「iOS GPU入門」

iPhone 6s のトピックとして 3D Touch や Live Photos 以外にも、GPUが6コアになったという話も聞きかじったので、画像処理とも絡められるし、機械学習とかとも絡められるかもしれないし、個人的にも勉強したい、ということでiOSのGPUまわりについて色々調べて発表したい、というのが当初ありました。


ボツ理由:ちょっと調査はしてみたのですが、この分野に関してまだまだ素人すぎるので、こういう規模の大きい勉強会で話す段階ではないなと。BLEを勉強し始めたときのように、まずはポツポツとブログに書いていきます。


ボツネタ2.「Core Image × OpenCV」

iOS 9 もいいですが、OpenCV は今年実に6年ぶりのメジャーアップデートである 3.0 がリリースされたところで、個人的にはかなり熱いと思っています。


Core Image もだいぶ機能が豊富になり、ビルトインフィルタは内部では OpenGL や Metal による GPU Acceleration が効いていて、実装の手軽さもあるのですが、やはりまだまだ OpenCV にあって Core Image や vImage、GPUImage にもない機能というのは数多くあります。動画内の物体追跡とか、画像の自動修復(補完)とか、「誰々の顔である」という本来の意味での顔認識とか。詳しくは下記記事にも書きました。

iOS 9 で追加された CIDetector の文字領域抽出から OpenCV の文字認識につなげたり、といった連携アイデアも色々と考えられます。


ボツ理由:やれること/やりたいことが多すぎて、収集つかなくなりそうなのでやめました。こちらも地道にブログでやっていきます。


ボツネタ3.「iOS 9.1 の新機能」

iOS 9.1 では 3D Touch(ForceTouch)関連の機能がいろいろと強化されてたり、Live Photo を表示する PHLivePhotoView とかもあったりするので、そのへんの話もおもしろいかなと。


ボツ理由:話題のホットさ、という点でいいと思うのですが、時期が来れば色んな人がわかりやすい記事を書いてくれそうな分野なので、やめました。


おわりに

お声がけいただいたクラスメソッドさん、会場のdots.さん、参加者のみなさま、貴重な機会をいただきどうもありがとうございました!本勉強会は9週連続ということであと7回もありますが、次回以降も watchOS 2 や tvOS、Accelerateフレームワークの新機能の話など、個人的に興味深い回がたくさんあるので、今後もちょくちょく参加させていただきます!


f:id:shu223:20151008084805j:image

(会場の様子)


*1:今回久しぶりに大量のフィルタが追加されました。詳しくは こちらをご参照ください

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 |