2020
01/30

Elastic/Bounce系イージングをSassのfunctionで実装する

CSSアニメーションのイージングはcubic-bezierを指定すれば簡単にできますが、ElasticやBounceのような行ったり来たりするイージングはcubic-bezierだけでは指定することはできません。

イージングについてはEasing Functions Cheat Sheetが分かりやすいです。
Easing Functions Cheat Sheet

ほとんどはcubic-bezierで事足りるのですが、より凝ったアニメーションのためにElasticやBounceを使いたいと思い、Sassで簡単に作れるfunctionを書いてみました。

デモ
Github

ADs

jQuery Easingの計算式を参考に

イージングを計算式で指定することができればなんとかなりそうです。
そこでjQuery Easing Pluginは計算でイージングを定義していたことを思い出し、プラグイン内で使っている関数をパク…参考にしました。

jQuery Easing Plugin

三角関数の計算ができるMathSassの導入

jQuery.easingの関数は一部三角関数を使っているので、Sassで三角関数や各種計算ができるMathSassという関数ライブラリをダウンロードします。

MathSass
Github

mathsassフォルダ内の「_math.scss」をインポートすれば、JavascriptのMath関数のようにsinやcosが使えるようになります。

JavascriptのMathに相当する関数はDart Sassならネイティブにサポートされています。私はLibSassなので…。
sass:math

functionを書く

jQuery.easingのElastic,BounceイージングをSassで使えるように書き直します。
timing-functionが使えるので使うことはないと思いますが、easeOutQuitやeaseInExpoなども関数化することができます。

easeInElastic

easeOutElastic

easeInOutElastic

easeOutBounce

easeInBounce

easeInOutBounce

使い方

これで各イージングを定義するfunctionができました。
次にこれらのイージングをanimationに適用します。

animationプロパティの指定は通常のCSSと同じです。

次に「easing1」に適用するためのkeyframesを書きます。

長くなりましたが、変更箇所は

$wtart,$end,$startp,$endp,$stepの各変数
アニメーションさせるプロパティ
(ここではtransform)

の2点です。
$stepを細かくするとなめらかになりますが、その分keyframesを細かく出力するためCSSが長くなります。
プロパティ部分は

easeInElastic
easeOutElastic
easeInOutElastic
easeInBounce
easeOutBounce
easeInOutBounce

から選びます。

コピペで済むもののもうちょっとシンプルにしたい……。
Sassにヒアドキュメントかechoするだけの機能があればなんとかなったのですが。

まとめ

これらのイージングは近似値をkeyframesに当てはめていますので、$stepと移動距離の兼ね合いによってはなめらかにならない場合があります。
しかし手作業でkeyframesを書くより少しは楽に…なっているでしょうか(;´∀`)

…ここまでやるならanime.jsでいいかな、とも思います。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。