anime.js(1):イントロ

●周辺状況

公式サイトは以下。documentationページが素敵!。装飾過多なサンプルではなく要点だけのサンプルなので分かりやすい!

anime.js:公式サイト
http://animejs.com//

1101
 
日本語で説明しているサイトは以下。このライブラリもkute.js同様に最近登場したライブラリなので少し不安…。
→参考:軽量・簡単なのにいきいきしたアニメーションが付けられる!anime.jsを触ってみた
→参考:CSSライクでデザイナーに優しい!anime.jsはDOMアニメーションの新定番だ!
 
上記サイト内にあるリンクで特に以下のサイトが素敵。操作が分かりにくいですが、各項目毎に設置された「previous/next」のボタンを押す毎にテキストがアニメーションします(このサンプルが学ぶ切欠になった)。
 
→参考:Letter Effects with anime.js
1101_1
 
 

●対応ブラウザ

レガシーブラウザには対応していない。IEはver10以上。公式サイト(github)のBrowser supportを参照してください。
→参考:公式サイト(github)
 

●導入

kute.jsとことなりhead内でリンクしても機能しました。

anime({
	targets:'.box',
	left:	'500px'
});

—————————————-
・デフォルトのイージングがlinearでないのは珍しい
・デフォルトでアニメは勝手に再生される
—————————————-
なんとなく良い雰囲気を感じる。
 
アニメだけではなく数値のみを変化させることができるのが「なんとなく」素敵。公式サイトの以下に説明有り。
→参考:JavaScript Object properties
 
今日はここまで。