kute.js :イントロ

●jQueryアニメの代わりに

モダンブラウザはjavaScriptやcssの差異が少なく、jQueryなどに頼らなくてもすむようになってきました。しかしアニメ処理、特にシーケンシャルなアニメを実現しようとすると記述量が多くなり面倒です。
 
ということでjQueryに代わってシーケンシャルなアニメを簡単に作成できるようなライブラリを探したところkute.jsが良さそうなので学ぶことにしました。
 
サイトが素敵なのもkuteを選択した大きな理由です。

kute.js :公式サイト
http://thednp.github.io/kute.js/

  
基本的にレガシーブラウザには対応しない。Modernizrも使用しないでとあります(以下ページの最下段)。※IEはver10以前がサポートを打ち切りレガシーとなっている。
→参考:公式サイトget start
→参考:各Windows OSでのInternet Explorerのサポート終了時期
 
サポートしているプロパティは以下。レガシーブラウザに対応しないと言いつつも結構IE9に対応している(3D系はIE10以降)。
→参考:公式サイトSupported Properties

日本語で説明しているサイトは少ないのですが、以下のサイトが詳しいです。
→参考:DOMアニメーションの決定版「KUTE.js」が登場
 
前回まで学んでいたsvgにも対応しています。ただsvgはシンプルな用途に留めた方が良さそうと思っているので積極的な使用はしない。ただvivusよりも複雑なストロークアニメが実現できるので、そのことだけ留意しておこうと思う。
→参考:公式サイト svg plug-in
 

●導入の注意

kute.jsのダウンロードボタンはトップページのイントロアニメが終わった後に表示されます。ダウンロードされるデータはjsファイルの他にサンプルファイルもあるので自習用にダウンロードしておきました。
1031
 
公式サイトのget startedで「kute.jsの読込はbodyタグの最後で読み込むのがベスト」と書いてあったのですが、なんとなくheadタグ内に設定したらエラーになりました。やはりbodyタグの最後に記述のが良さそうです。
→参考:Uncaught TypeError: Cannot read property ‘style’ of null

<script src="../js/kute.min.js"></script>
</body>

 

●スクロール

私の中でスクロールアニメは別カテゴリなので、先にまとめておきます。スムーススクロールの機能で、examplesのVertical Scrollingに説明があります。おまけ的な扱いなのか横スクロール(scrollLeft)には対応していません…。すこしショック。

kute : スムーススクロール
http://jquerystudy.info/kute/0_core/1_scroll.html

 
ソースは以下。jQueryを使わないと記述量が多くなりますね、safariはwindowでなくbody使わないと機能しないし…。あと、なんで横スクロールに対応しないのだろう。
→参考:Scroll Example for KUTE.js

function scrollTo(_id){
	var navHeight = 70;
	var elmRect = document.getElementById(_id).getBoundingClientRect();
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	var pos = elmRect.top + scrollTop - navHeight;
	KUTE.to(scrollElm,{scroll:pos},{easing:'easingCubicOut',duration:1500}).start();
}

 

補足:他のアニメライブラリも試すよ

kute.js以外にもアニメ系のライブラリはたくさんある。kuteの基礎的な学習が済んだら以下のライブラリも試す予定。
 
anime.js
軽量でシンプルなライブラリ。パスに沿ったアニメができる。あと、以下サイトのエフェクトが素敵
→参考:Letter Effects with anime.js
※対応はIE10以降でIE9には対応していない。
 
velocity.js
興味深いのはスプリング系の処理があること。公式サイトのtopで「spring physics」と検索すると説明している部分が見つかります。
jQueryと利用するときはIE8にも対応するが、単体で利用する場合はIE8は対象から外れる。その場合は読込順に注意が必要っぽい。
→参考:Velocity.js not working in IE8

 
おしまい