#iosdc 2016 前夜祭 A-2 あのアニメのOP, EDっぽいアニメーションを実装する話

twitter.com

アニメのOP, EDなどでよくみる水玉が点々と広がる動き、動きの速さを表す線が流れる動き、などなどをSwift, iOSで表現!ライブラリを用いてライブコーディングします!(現在はC4などを考えています)

iosdc.jp

www.slideshare.net

あのアニメのOP, EDっぽいアニメーションを実装する話

f:id:niwatako:20160819182045j:plain

f:id:niwatako:20160819182058j:plain

OSS始めました。良かったらIssue、プルリク、スターなどいただけると...!!

f:id:niwatako:20160819182137j:plain

try! Swift で発表したいなと思って、こんな機会を得られて嬉しいです。

今度勉強会も開催するので是非参加して下さい

f:id:niwatako:20160819182200j:plain

最初にお詫びですが内容に変更があります。Core Animationを使います

f:id:niwatako:20160819182220j:plain

f:id:niwatako:20160819182240j:plain

f:id:niwatako:20160819182253j:plain

Twitterのファボみたいなアニメーション狙って行きたいと思います。

f:id:niwatako:20160819182312j:plain

f:id:niwatako:20160819182316j:plain

多い!

f:id:niwatako:20160819182322j:plain

やった!こんなにいればお話できますね

f:id:niwatako:20160819182339j:plain

今日も1日頑張るぞいで有名な素晴らしいお話です。

f:id:niwatako:20160819182401j:plain

f:id:niwatako:20160819182407j:plain

f:id:niwatako:20160819182412j:plain

f:id:niwatako:20160819182419j:plain

www.youtube.com

というオープニングでした

f:id:niwatako:20160819182616j:plain

見ていただきまいしたが、今日実装する箇所は、最初のここです。

f:id:niwatako:20160819182645j:plain

最初なのに全部見せんなよっていうのは置いておいて、

f:id:niwatako:20160819182702j:plain

ZOILayerをつくるぞい

f:id:niwatako:20160819182717j:plain

こいつがZOILayerを管理します。

f:id:niwatako:20160819182738j:plain

真ん中を切り抜きたい時

f:id:niwatako:20160819182752j:plain

投下されるひつようがあるのでマスク処理=描画する箇所としない箇所を指定する必要があります。

詳しくは

f:id:niwatako:20160819182822j:plain

手順です

f:id:niwatako:20160819182830j:plain

f:id:niwatako:20160819182843j:plain

ある程度作ってあります。

f:id:niwatako:20160819182851j:plain

ライブコーディングと言いつつミスがあると困るのでスニペットをご用意しました

f:id:niwatako:20160819182918j:plain

初期化

f:id:niwatako:20160819182944j:plain

試しにボタンタップで描画します

f:id:niwatako:20160819183006j:plain

上手く出来たので作りこみます

f:id:niwatako:20160819183329j:plain

f:id:niwatako:20160819183331j:plain

真ん中が繰り抜かれました!

アニメーションを作っていきます。

f:id:niwatako:20160819183344j:plain

φ(..)メモ completionHandlerあたりの順番が大事なので注意が必要らしい。

f:id:niwatako:20160819183453j:plain

必ずメインスレッドで呼び出す必要があります。

f:id:niwatako:20160819183527j:plain

時間がない...

すこし上手く動きませんが、、(小さくなるアニメーションは上手く行ったが大きくならない様子)

後ほどGithubにあげておきます!

f:id:niwatako:20160819183642j:plain

できてねーよ!!(会場笑い)

f:id:niwatako:20160819183711j:plain

f:id:niwatako:20160819183716j:plain

f:id:niwatako:20160819183734j:plain

ご清聴ありがとうございました!

※アニメーションは後夜祭でリベンジのデモがありました

niwatako.hatenablog.jp

感想

twitter.com twitter.com twitter.com twitter.com twitter.com

まとめ

togetter.com