2021年10月4日のブックマーク (1件)

  • JavaScript製アニメーションライブラリの原理! イージングとCSSフィルターを組み込む方法 - ICS MEDIA

    この記事は、記事「JavaScript製アニメーションライブラリの原理を理解しよう」の続編となります。前回の記事ではアニメーションの基的な仕組みと、基礎部分の実装について解説しました。 今回はより実践的に活用できる機能として、動きに深みを出す「イージング」と、演出にエフェクトを加える「CSSフィルター」のアニメーションを実装します。CSSコーダーの方であれば、イージングはCSS Transitionで、CSSフィルターもボタンなどの演出で馴染みがあると思います。 イージングとは 前回アニメーションとは、時間経過とともに「ある値を0(0%)〜1(100%)の間で連続して変化をさせる」と解説しましたが、たとえば「最初はゆっくりで、徐々に早く変化させる」といった具合に時間経過に応じて変化の速度を調整するのが「イージング」です。 イージングには色々な種類がありますが、一般的には「easeIn~」

    JavaScript製アニメーションライブラリの原理! イージングとCSSフィルターを組み込む方法 - ICS MEDIA
    uirikuto
    uirikuto 2021/10/04