Wood-Roots:blogHOMEHTML5/CSS3202001/30Elastic/Bounce系イージングをSassのfunctionで実装するHTML5/CSS3CSSアニメーションのイージングはcubic-bezierを指定すれば簡単にできますが、ElasticやBounceのような行ったり来たりするイージングはcubic-bezierだけでは指定することはできません。Sheetが分かりやすいです。Sheetほとんどはcubic-bezierで事足りるのですが、より凝ったアニメーションのためにElasticやBounceを使いたいと思い、Sassで簡単に作れるfunctionを書いてみました。Easingの計算式を参考にイージングを計算式で指定することができればなんとかなりそうです。Pluginは計算でイージングを定義していたことを思い出し、プラグイン内で使っている関数をパク...参考にしました。Plugin三角関数の計算ができるMathSassの導入jQuery.easingの関数は一部三角関数を使っているので、Sassで三角関数や各種計算ができるMathSassという関数ライブラリをダウンロードします。MathSassGithubmathsassフォルダ内の「_math.scss」をインポートすれば、JavascriptのMath関数のようにsinやcosが使えるようになります。Sassならネイティブにサポートされています。私はLibSassなので...。sass:mathfunctionを書くjQuery.easingのElastic,BounceイージングをSassで使えるように書き直します。timing-functionが使えるので使うことはないと思いますが、easeOutQuitやeaseInExpoなども関数化することができます。.5+$c*.5+$b;}使い方これで各イージングを定義するfunctionができました。次にこれらのイージングをanimationに適用します。animationプロパティの指定は通常のCSSと同じです。forwards;}次に「easing1」に適用するためのkeyframesを書きます。*/}長くなりましたが、変更箇所は$wtart,$end,$startp,$endp,$stepの各変数アニメーションさせるプロパティ(ここではtransform)の2点です。$stepを細かくするとなめらかになりますが、その分keyframesを細かく出力するためCSSが長くなります。プロパティ部分はeaseInElasticeaseOutElasticeaseInOutElasticeaseInBounceeaseOutBounceeaseInOutBounceから選びます。コピペで済むもののもうちょっとシンプルにしたい......。Sassにヒアドキュメントかechoするだけの機能があればなんとかなったのですが。まとめこれらのイージングは近似値をkeyframesに当てはめていますので、$stepと移動距離の兼ね合いによってはなめらかにならない場合があります。́∀`)...ここまでやるならanime.jsでいいかな、とも思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。