はじめに JavaScriptでなんらかのUIを作ることが多いという人の場合、イージングがどのように動作しているかを知らずとも、それを普段から利用している人は多いでしょう。イージングの仕組みはなかなか複雑です。 そして、例えこの仕組みを理解したとしても、自らイージングを書くような機会はほぼないでしょう。しかし、普段利用しているアニメーションというものがどのようにできているのか知ることで、よりUIプログラミングへの理解を深めることができるかと思います。 このシリーズで使うサンプルのコードは、以下に置いてあります。 サンプル集 pxgrid/codegrid-easing · GitHub イージングってこんなやつ まずはイージングがどんなものか見てみましょう。以下のデモを開き、Runと書かれたボタンを押してみてください。アニメーションを確認することができます。 サンプル:01-easingd
![イージングの仕組み | 前編 イージングとはなにか](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7493a02a94d5300d389687a507ee01a7ebf5c69/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253D%2525E3%252582%2525A4%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252581%2525A8%2525E3%252581%2525AF%2525E3%252581%2525AA%2525E3%252581%2525AB%2525E3%252581%25258B%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%25232178F0%26blend-mode%3Doverlay%26txt%3D%25E3%2582%25A4%25E3%2583%25BC%25E3%2582%25B8%25E3%2583%25B3%25E3%2582%25B0%25E3%2581%25AE%25E4%25BB%2595%25E7%25B5%2584%25E3%2581%25BF%2520%257C%2520%25E5%2589%258D%25E7%25B7%25A8%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)