【ANIME.JS】アニメーションに利用するパラメータ一覧

2019年6月12日JavaScriptANIME.JS, JavaScriptライブラリ

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」

「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です

アニメーション関係のJavaScriptライブラリは他にも沢山ありますが、簡単に使えて機能も十分なのでオススメです、jQuery不要な点も良いと思います

この記事ではANIME.JSでアニメーション実装に利用する各種パラメータをリストアップしています

ANIME.JSで使えるアニメーション動作一覧

利用できるパラメータを組み合わせてアニメーションを実装可能です

rotate回転数値(度)、1turnなど

パラメータ説明
opacity透明度0~1 
top、bottom、left、right移動数値(px)や%など
translateX、translateY移動数値(px)や%など
scale拡大・縮小数値
backgroundColor背景色カラー名、カラーコード
borderRadius枠の丸み数値(pxやemなど)[’10px’,’10px’]
width横幅 
height縦幅 
fontSize文字サイズ 
color文字色 

ANIME.JSのアニメーションで利用するパラメータ一覧

パラメータ説明デフォルトの値
targets対象の要素セレクタ名など 
durationアニメーション時間数値(ms)または関数1000
delayディレイ数値(ms)または関数0
easingイージング リスト参照easeOutElastic
elasticity弾性数値または関数500
round  false
autoplay true、falsetrue
loop 繰り返し数値またはfalsefalse
direction アニメーション動作normal、reverse、alternatenormal

ANIME.JSの「easing」で利用できる値一覧

easeIneaseOuteaseInOut
easeInQuadeaseOutQuadeaseInOutQuad
easeInCubiceaseOutCubiceaseInOutCubic
easeInQuarteaseOutQuarteaseInOutQuart
easeInQuinteaseOutQuinteaseInOutQuint
easeInSineeaseOutSineeaseInOutSine
easeInExpoeaseOutExpoeaseInOutExpo
easeInCirceaseOutCirceaseInOutCirc
easeInBackeaseOutBackeaseInOutBack
easeInElasticeaseOutElasticeaseInOutElastic

2019年6月12日JavaScriptANIME.JS, JavaScriptライブラリ

Posted by Yousuke.U