この記事はGoodpatch Advent Calendar 2018 1日目の記事です。 フロントエンド開発をしているとアニメーションを実装する機会が度々あります。たとえば、私が担当しているモチベーションクラウドでは、以下のように円グラフにアニメーションを加えています。 アニメーションを用いる上で意識したいポイントとして「パフォーマンス」があります。アニメーションのパフォーマンスについて、この記事では主に“滑らかさ”を指すことにします。 昨今ではハードウェアの進歩もあり、あまり意識しなくてもアニメーションのパフォーマンスが問題になることは少ないかもしれませんが、少し複雑なアニメーションやアニメーション以外の要因によってアニメーションの品質劣化が起きる場合には多少のテクニックが必要になってきます。 今回はUIにおいてアニメーションのパフォーマンスが重要とされる背景とWebアニメーションにお
![より良いUIのためのWebアニメーション・パフォーマンス | Goodpatch Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/121535dc8d8be07a65d697239e60762d5162409b/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fcms.goodpatch.com%2Fwp-content%2Fuploads%2F2018%2F11%2Ficatch_web_animation_performance.png%3Ffit%3D1600%252C900%26ssl%3D1)