読者です 読者をやめる 読者になる 読者になる

try! Swift Core Animationで作る高度なグラフィックス #tryswiftconf Day1-9

try! Swift 2016

twitter.com

iOSならアニメーションがUXに対してとても大事なことです。それでUIKitのAPIのおかげで実装するのが既にとても簡単です。しかし、UIKitの下のレベル、Core Animationも利用したら、自分のアプリにもっとかっこよくて、もっときれいなアニメーションも可能性になります。このプレゼンテーションはiOSでCore Animationの実装方法やエフェクトのデモンストレーションを説明します。

かっこいいものを見せたいと思います。

f:id:niwatako:20160302163045j:plain

  • UIKitのちがい、CALayerで出来ること
  • CoreAnimationの実装
  • サブクラスを利用したエフェクト

f:id:niwatako:20160302163125j:plain

f:id:niwatako:20160302163157j:plain オヤジギャグが大好きです f:id:niwatako:20160302163217j:plain

20年前父の仕事で千葉県に引っ越し、僕と妹は幕張の小学校に入学しました。半年で友だちができて、帰国してから日本語を学んでいました。 それだけではなくて2007年にワーホリで新潟スキー場でバイト、3年前に東京のPixivでiOS開発しました。

暇な時間にはコミックビュアーを作っています。ユーザーが作ったデータを使うのでとんでもない画像データがあったりする。それでCoreAnimationを結構利用している。

CoreAnimationは何でしょう。 f:id:niwatako:20160302163435j:plain

最初OS X ででて、UIKitの下にあるフレームワークです。グラフィックもアニメーションも多の津していてUIViewと深くつながっています。 f:id:niwatako:20160302163527j:plain

f:id:niwatako:20160302163626j:plain

CoreAnimationだけでゲームが出来る。ディズニーはCoreAnimationだけで作られているのが有る。デバッグするとレイヤーが見れる。

f:id:niwatako:20160302163704j:plain

最適化したアニメーションを作れるようになる、もっとかっこよく出来る f:id:niwatako:20160302163802j:plain

CoreGraphicsとどう違いますか

f:id:niwatako:20160302163829j:plain こういうコードを書いたら f:id:niwatako:20160302163834j:plain これが出来ました f:id:niwatako:20160302163843j:plain

f:id:niwatako:20160302163917j:plain

CoreGraphics書くならこのアプリオススメ

f:id:niwatako:20160302163940j:plain

f:id:niwatako:20160302163956j:plain

UIViewっぽく使える f:id:niwatako:20160302164008j:plain

角丸

f:id:niwatako:20160302164022j:plain

こんな構造

f:id:niwatako:20160302164037j:plain

f:id:niwatako:20160302164108j:plain

どうしてUIViewはCoreAnimationのサブクラスじゃないの? UIViewのlayerクラスが変わることがある

CALayerで出来ること

f:id:niwatako:20160302164208j:plain

f:id:niwatako:20160302164231j:plain

f:id:niwatako:20160302164330j:plain

DEMO: スクロールに合わせて拡大したりする画像の様子、Twitterのプロフィール欄みたいな

GPUで実行されているため以上に早い。 ほかにMaskやクリップもできるがCPUつかうので遅くなる

f:id:niwatako:20160302164725j:plain

マスクも出来る f:id:niwatako:20160302164831j:plain

アニメーションしながらスクロールできるCell f:id:niwatako:20160302164906j:plain

影も普通にやると遅いがとても早く出来る

f:id:niwatako:20160302164944j:plain

3Dもできる f:id:niwatako:20160302165010j:plain f:id:niwatako:20160302165023j:plain これが有名ですね f:id:niwatako:20160302165041j:plain

PrivateAPIを使っていてオススメできませんがこういうことも出来る f:id:niwatako:20160302165111j:plain

ロック解除のアニメーションがどうやってできてるのか調べてて見つけたんだ f:id:niwatako:20160302165140j:plain

このコードはGithubにも上げてますから気になったらどうぞ。

UIデバッグはReveal.appがオススメ

revealapp.com

CALayerのアニメーション f:id:niwatako:20160302165313j:plain f:id:niwatako:20160302165333j:plain このレベルで出来るいいことはスピードを調整できること f:id:niwatako:20160302165342j:plain

コンテンツアニメーションをどうするか

f:id:niwatako:20160302165508j:plain f:id:niwatako:20160302165510j:plain

f:id:niwatako:20160302165522j:plain f:id:niwatako:20160302165610j:plain アニメーショングループを作ってCompletionつけたりできる

CoreAnimation作れるソフト f:id:niwatako:20160302165616j:plain

CPUで処理が走ることもあるからテストを。 f:id:niwatako:20160302165701j:plain

f:id:niwatako:20160302165724j:plain f:id:niwatako:20160302165749j:plain

1つのレイヤーでこういうことが出来る f:id:niwatako:20160302165755j:plain

CAShapreLayerはダイナミックなエフェクトが出来る超おすすめ f:id:niwatako:20160302165833j:plain f:id:niwatako:20160302165849j:plain

アプリの中で魔法使いになれます f:id:niwatako:20160302165932j:plain

CATextLayerがあるけどラベル使ったほうがいい

f:id:niwatako:20160302170026j:plain

オススメはUIView出始めて不満ならCALayerにしてみる。 どんなエフェクトも60fpsでかっこ良く出来る コード書くの大変だからUIKitから始めるのがいい。

f:id:niwatako:20160302170133j:plain

気に入った記事は はてなブックマーク

はてなブックマークアプリiOS開発チームから来ました! はてなブックマークにはSwift特集があります! 良い記事を見逃さないように、ご利用ください! http://b.hatena.ne.jp/hotentry/it/Swift

そして良いまとめ記事があったらはてなブックマークでブックマークしましょう! try! Swift の記事で盛り上がると嬉しいです!