PICOLで使ったアニメーションたち。iOSで使えるアニメーションあれこれ

PICOLではアニメーションもゲームっぽく、いろいろ使っています。

ほぼ全部！アニメーション書き出してみます。

公式ページ

スプラッシュ

UIImageView#animationImages

pic.twitter.com/o4TDlD863d

— なおち (@naochi___) 2018年7月13日

前の記事でかいたようにUIImageViewのanimationImagesを使用してパタパタ漫画をアニメーションしています。

naochi-interrupt.hatenadiary.com

コードはこんな感じ。

var imageList:[UIImage] = []
for i in (1 ... 35) {
//   let image = UIImage(named: "splash-\(i)")
    let imagepath = Bundle.main.path(forResource: "splash\(i)", ofType: "png")
    let image = UIImage(contentsOfFile: imagepath!)
    imageList.append(image!)
}
imageView.animationImages = imageList

Home画面

CAKeyframeAnimation

pic.twitter.com/0iF3BCHZW6

— なおち (@naochi___) 2018年7月13日

上下の雲が、右から左に流れています。 あと、カメラを起動する、バーコード型の丸いボタンがじわーっとアニメーションしています。 丸いボタンは、スプラッシュと同様にImageViewのanimationImagesを使っています。

雲はCAKeyframeAnimationです。

let animation = CAKeyframeAnimation.init(keyPath: "position.x")
animation.isRemovedOnCompletion = true
animation.repeatCount = .infinity
animation.values = [621,-207]
animation.duration = 19.0
animation.fillMode = kCAFillModeBoth
self.headerImageView1.layer.add(animation, forKey: "position.x")

これが、いただいた画像を使ってアニメーションしてみて、どう調節しても継ぎ目のところでアニメーションがかくっとしてしまう。

もともと業務系アプリ作ってた私は、「いいじゃん。ちょびっとだし」とか思ったのですが、WEB屋さんとかゲーム屋さんはアーティストに近いのでどうしても許せないらしく、 なんとかならないの？と言われ続けてがんばったのですが、なかなかできないでいました。

そしたらある日の会議でイケメンの社長が以前WEB系の技術者だったそうで、アドバイスをいただき、そのとおりに実装したらできました。

Twitterの動画ではわかりにくいのでダウンロードして直接みてみてください。

まず、あがってきたデザインのヘッダを３枚並べて、

真ん中のヘッダを左右反転させてくっつけます。 コードで書いてもいいけど、１回のことなので実際に素材をつくりました。

（わかりやすいように真ん中は背景を黒くしました）

それを画面に使うとXibはこんな感じになります。 素材は(2484 x 150)ですが、Retinaなので画面サイズとしては1242 x 75)

CAAnimationはUIViewと座標系が違うので、この初期値の状態でX座標は真ん中の650という値になります。

そして、端っこまできっかりアニメーションしてしまうとアニメーションの最初の画面と最後の画面に違いが出てしまうためにかくついてしまうので、同じになるように、３つめのヘッダの位置の最初でアニメーションが切り替わるようにしたら！綺麗に動くようになりました。

バーコードカメラのバーコード検出アニメーション

UIView.animation

pic.twitter.com/ho1gKgczP2

— なおち (@naochi___) July 13, 2018

動画斜めにしなきゃよかった

UIView.animate(withDuration: 0.2,
    delay: 0.0,
    options: .repeat,
    animations: { () -> Void in
    borderView.alpha = 0
},  completion: { _ in
     borderView.alpha = 1
})

トースト出したり、ダイアログを出したりするところでも使っていますが割愛。UIViewのアニメーションです。 iOSでアプリ作った人なら１回は使ったことがあるはず。

囲みを斜めにしてないのはほんとすみません。

査定演出アニメーション

HTML

pic.twitter.com/zZW2tztprb

— なおち (@naochi___) July 16, 2018

査定のカッコイイアニメーションはデザイン会社の ビジネスが進化するモバイル・コンテンツを : : caeruX [カエルエックス] さんが作ってくれました。私はWKWebviewを貼り付けただけです

func loadHtml(){
  webView = WKWebView.init(frame: self.animationView.frame)
  animationView.addSubview(webView)
  webView.addSubview(self.skipButton)
  let fileURL = URL(fileURLWithPath: Bundle.main.path(forResource:"assessment_ver2", ofType: "html")!)
  webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL)
}

強いて言えば、私の古い端末（といってもiPhone6Plus)と、iPhoneXとかでは再生速度が違い、アニメーションの終了時間を端末ごとに切り替えて終わりを検出していることぐらいでしょうか。

チケット演出アニメーション

CAKeyframeAnimation + UIViewAnimation + SpliteKit

pic.twitter.com/x5v0ZYOFFB

— なおち (@naochi___) July 16, 2018

スロットがくるくるまわるのはCAKeyframeAnimationです。つなげてアニメーションしているのは上で書いた雲と同じ原理。 サーバーから受け取ったチケットのパーセンテージでアニメーションの終了座標を切り替えています。

コインがバラバラ落ちてくるのはSpliteKitを使いました。

qiita.com

雪をコインの画像に置き換えて、パーセンテージごとに数を増やしただけです。 こんなのが簡単に作れるなんて、すごいいい時代ですね。

残り時間アニメーションのあとのパルスのようなアニメーションはCAKeyframeAnimation 長い画像にマスクをかけてマスクをアニメーションしています。

あ、でも、要所要所でぽよんとか、ぴょんとか入れたのは割愛。