クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2015-10-02心地よいアニメーションを求めてこんにちは、買物情報事業部の三浦です。日々アプリを使っていて、ふとしたところでさりげないアニメーションや気の利いた効果音があると心地よく感じますね。UIKitには手軽にアニメーションを実装できるようにAPIが用意されています。工夫するだけで効果的な動きを作ることができます。サンプルを見ながらみていきましょう。BasicまずはUIViewのクラスメソッドのシンプルなアニメーションです。オブジェクトを下にアニメーションさせます。nil)動きの加減をコントロールするイージングもUIViewAnimationOptionCurveとして指定することができます。デフォルトでイージングのオプションがCurveEaseInOutが指定されています。Referenceこれは始めと終わりを緩める動きになります。時間と位置の関係をグラフにすると以下のようなイメージになります。デフォルトで動きのニュアンスがつくように指定されていますね。Linearイージングにあえて緩急をつけずに等速運動をさせてみましょう。optionsにCurveLinearを指定します。nil)グラフはまっすぐな直線になります。上と比べてどうでしょうか?少し動きが硬い印象になりますね。アニメーションさせる値によっては緩急の必要のない場面もあるので、アニメーションさせる用途にあわせて使い分けましょう。Spring次にiOS7からUIViewのメソッドとして追加されたanimateWithDuration(_:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)を使ってみましょう。このメソッドは名前にもある通りばねのような動きを簡単に実現できます。先ほどのアニメーションのメソッドと基本は変わりません。ポイントになるのはdumpingRatioです。nil)dampingRatioが1の場合には、振幅がなく最終値に向かいます。1以下の場合、値が小さいほど振幅が大きくなります。アニメーションの初速を変更したい場合はvelocityの値で変更することが可能です。Reference動きに対する勢いが反映されるので、より抑揚のついた動きをこのメソッドひとつで実現することができますね。ポップアップでviewが表示される時やボタンのフィードバックなど、ちょっとした振幅があるとユーザーとしては触れた(操作した)感覚を感じることができます。やり過ぎると過剰な演出になってしまうので注意して値を調整しましょう。LoopアニメーションのオプションにはRepeatやAutoreverseも用意されているので、動きをループさせることもできます。nil)アニメーションカーブはデフォルトのCurveEaseInOutになっているので、初速と終速が緩やかになるアニメーションが連続しています。ゴムが伸び縮みしているような動きになりますね。アニメーションカーブを変化させるとまた違った動きが表現されます。Animationを使っていきます。CALayerのサブクラスにCAReplicatorLayerがあります。Sublayerを指定した個数分複製して表示するLayerです。SublayerにはCAAnimationを組み合わせることができるので、短いコードでいろんなバリエーションの動きをつくることができます。ReferenceまずCAReplicatorLayerを使ってオブジェクトを複数置いてみましょう。0.0)CAReplicatorLayerを生成します。次にsourceとなるcircleのlayerを生成し、CAReplicatorLayerに追加します。instanceCountでコピーしてできあがる数を指定し、instanceTransformでインスタンスの移動や回転などを渡します。これだけで以下のようなサークルを並べることができます。次にアニメーションを追加します。0.1サークルのレイヤーに上下するアニメーションを追加してあげます。アニメーションはCAAnimationを使用していますが、値はUIViewのメソッドで指定していたものと基本は同じです。あとはinstanceDelayでインスタンス間の遅延時間を指定します。アニメーションさせている場合は、その指定した時間分ずれてアニメーションされるので個々の動きをバラすことができます。Reference先ほどのシンプルな上下のアニメーションも複数で動かすことでウェーブしながら浮遊しているように見えますね。静かで心地よい動きなので、ロードのちょっとした合間に表示してもよさそうですね。先ほどのものを少し変更するだけで、カスタムのインジケーターにすることもできます。1.0);サークルの上下のアニメーションの代わりにスケールアニメーションに変更します。これだけでも十分ですが、ローディングのニュアンスを強調するためにreplicatorLayer自体も回転させています。あとはサークルの数を増やしtransformで円上に配置されるように変更すれば完成です。これだけの変更だけで見た目が大きく変わります。サークルの数を増やしたり、配置やアニメーションを変更することで様々なバリエーションを作りだしていくこと可能です。CAReplicatorLayerにも今回紹介していないパラメータがあるので、ぜひいろいろと試してみてください。まとめ動きは値を調整することで、気持ちいいポイントや思いがけない動きに出会うことが多くあります。アプリは日々使うものだからこそ、ロード時やインタラクションのフィードバックなど、ちょっとしたユーザー体験の向上がアプリ全体の印象に大きく影響します。みなさんもぜひ心地よいアニメーションを探求してみてください。18:02心地よいアニメーションを求めてTweet関連記事2019-08-16UICollectionViewでページングスクロールを実装するこんにちは。新規サービス開発部の中村です。vol.2...こんにちは。Typeモバイル基盤部のヴァンサン(@vincentisambart)です。使ってい...2016-03-29安心してRailsアップグレードを行うための工夫こんにちは。3/28にクラウドワ...2015-11-09Swift2で作るコマンドラインツール会員事業部の三木(@giginet)です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。