Nativeで個人開発アプリを開発中なのですが、ちょうどアニメーション周りを結構調べていたので試しに簡単なチュートリアルを作ってみました。ComponentほとんどAnimatedを使いました。一部LayoutAnimationを使っていますが、最初にLayoutAnimationを使っていた名残で変更していないだけです。LayoutAnimationは導入も使い方も非常に楽なので気に入っていたのですが、複雑なアニメーションをしようとするとかなり面倒くさく、あまり自由度が無いところから使わなくなりました。ARTを使ってSVGでやることも考えたのですが、Animatedでも十分パフォーマンスが出る結果だったので今回は採用していません。saburesan.hatenablog.comEasingEasingもデフォルトのtimingとspringしか使っていません。parallelを使いました。今回検索文字の入力の部分や、3回タップのアニメーションの所などで使っています。Interpolate今回、すべてのアニメーションはAnimated.Valueを使っています。基本的にValueは0->1の変化のみとして、Animated.Valueの値をinterpolateメソッドで適宜補間する形にしました。理由はValueの値をスタイルで直接使う値にしてしまうと同じタイミングで始まるアニメーションがあったときにAnimated.Valueを使いまわせないからです。同じにタイミングでもEasingやDurationが違う場合などはParallelを使用していますが、EasingもDurationも同じでいい場合が結構多くinterpolateで補間するほうがわかりやすくなりました。Valueを0->1にしてinterpolateで補間することでアニメーション自体の定義とスタイルの定義を完全に別にして考える事ができるのでお薦めです。ハマったことAnimated.XXXにして無い時にエラーで上手く教えてくれないこれは私が初期にLayoutAnimationで組んで居た所をAnimatedに変更したときにコンポーネントの定義でAnimated.XXXにし忘れていたのですが、エラーが非常にわかりにくく手間取りました。Devモードだとアニメーションが重すぎるめっちゃ重たいです。Modeをオフにしてデバッグしましょう。iOSでAndroidと同じ事が出来ないのでReleaseビルドでデバッグしましょう。‘absolute'で指定しているAnimated.Viewを消すとそれ以降のアニメーションが重くなるこれはホントの所の原因がわかっていないのですが、フルスクリーン表示したViewをアニメーションが終わった後に描画しない処理(renderXXXがnullを返す)をすると、それ以降のアニメーションがやたら重くなる現象が起きました。leftの値をいじって画面外に出しても重くなってしまい、完全な原因が謎です。今回は一番最後にボタンをタップできるようにする必要があっただけのでフルスクリーンのViewにpointerEvents=“none”を設定することで解決できましたが、ちょっと謎ですね...まとめ今回やった範囲だとハマりどころが多いという感じはしませんでした。JS側UIスレッド側のFPSも57~60位で特にパフォーマンスが悪くなるような事も特に無く、アニメーションは実際ネイティブで書くと面倒ですがAndroid/iOSどっちも同じように書けるのはかなりのメリットだなぁと思いました。AnimatedのAPIはまだ使ってないものもありますし、ARTとAnimatedを組み合わせると更に自由度が上がると思いますので色々遊んでみたいと思います。何も言わずに入れて欲しい。Nativeでグラフを描くにはどうしたらいいのかと調べまし...2017-07-28「新しい技術の導入に関する勉強会」で発表してきました。重要な所だけ読み返したい用です。ExpoについてLTしてきました月別アーカイブはてなブログをはじめよう!saburesanさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。