javascriptで“動く”tween animation -入門-
Post on 13-Jul-2015
1.014 Views
Preview:
TRANSCRIPT
JavaScript
-入門-Tween Animation
で
マーケティングソリューションカンパニー 開発本部 エクスペリエンスデザイン部 テクノロジーデザイン
上村 裕樹
“動く”
Hiroki Uemura
at Yahoo! Japan since 2011 -
Web Designer / Frontend Engineer
上村 裕樹
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
JavaScript
-入門-Tween Animation
で“動く”
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
今日のお題目
• トゥイーンアニメーションってなに? • イージングって何?
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
今日のお題目
• Webでの実践 • CSS Transition / Css Animationで実践してみる • jQueryで実践してみる • jQuery以外のライブラリを試してみる
• Web Animations APIを試してみる
基本編
実践編
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
UI Animation主にDOMアニメーションについて
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザインの 重要性が増している
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザインMaterial Design
http://www.google.com/design/spec/animation/meaningful-transitions.html
Polymer
https://www.polymer-project.org/platform/web-animations.html
Hamburger Menu Animation
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
動きのデザイン 例:
https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
A B移動
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
とは
A B間の動きを補間する技術
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animationトゥイーン・アニメーション
移動 / 拡大 / 変形 / 色
とは
間の動きを補間する技術
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
トゥイーン・アニメーション によって実現したい世界
わかりやすい気持ちいい
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
EASINGイージング
気持ちいいアニメーションのための重要キーワード
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
EASINGイージング
フレーム間の変化の加速/減速
アニメーションのリズムが調整できる
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
イージング関数の代表例
linear 加速減速なし
ease-out 徐々に減速
ease-in 徐々に加速
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
イージング関数の代表例
http://www.robertpenner.com/easing/ http://easings.net/ja
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animation実践してみる
Web開発で
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Animation/Transition
JavaScript+
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Transition
CSS
div { left : 0; transition: .3s left ease-out;}!div:hover { left : 500px;}!!
left:0; left:500px;
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Animation
JavaScript ( jQuery )CSSdiv { left : 0;}!div.start { animation: tween .3s ease-out;}!@keyframes tween { from {left : 0;} to {left: 500px;}}!!
$("div").on("click", function(){ $(this).addClass("start");});
left:0; left:500px;
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Transition CSS Animation
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
transition-property transition-duration transition-timing-function transition-delay
キーフレームを指定してタイムラインを 書くように細かなアニメーション制御が可能
ある状態からある状態への変化
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
CSS Transition / Animation 課題
IE9 以下が対応していない
複雑なアニメーションに弱い・チェインの概念がない ・同期処理、制御がずれる
IE8、IE9はブラウザシェアがかなり高い
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate()
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate()
jQuery
left:0; left:500px;
$("div").on("click", function(){ $("div").animate( { left : 500 }, 300, "ease-out");});
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
jQuery.animate() 課題
パフォーマンスに難あり・レイアウトスラッシングを引き起こす ・リクエストアニメーションフレームを 使用していない
※ http://0-9.sakura.ne.jp/pub/lt/modest/start.html
※
※ http://wilsonpage.co.uk/preventing-layout-thrashing/
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
見えてきた課題
クロスブラウザ 複雑なアニメーション パフォーマンス
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tween Animation おすすめJSライブラリ
クロスブラウザ 複雑なアニメーション パフォーマンス
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
velocity.js http://julian.com/research/velocity/
多機能 MIT
TweenMax (GSAP) http://greensock.com/tweenmax
多機能・変形有り 一部有償
tween.js https://github.com/sole/tween.js/
シンプル MIT
Tween Animation おすすめJSライブラリ
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Velocity.jshttp://julian.com/research/velocity/
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Velocity.js
• jQuery.animate()と互換性がある • 単独でも使える • jQueryのパフォーマンスの難題点が
クリアされている • 簡単に実装できる上、機能も豊富 • おすすめ
http://julian.com/research/velocity/
JavaScript
$elem.velocity({ left: 500}, { duration: 300, easing: "ease-out"});
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
TweenMaxhttp://greensock.com/gsap
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
TweenMax
• ActionScriptで有名だったトゥイーンライブラリがJavaScriptに対応したもの
• 一部有償 • CSS transformの値を、個別に設定す
る事が可能で、(例えばscaleとrotate)アニメーションが組み合わせて表示される
• demo JavaScript
http://greensock.com/gsap
TweenMax.to(elem, 0.3, { left:500, ease:"easeOut"});
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
tween.jshttps://github.com/sole/tween.js
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
tween.js
• CreateJSのTweenJSではない • チェイン機能やイージング関数などの
基本的な内容は揃っている • 実際のスタイル描画のところは、
自身で更新処理を記載する • 条件分岐や組み合わせなどがしやすい
https://github.com/sole/tween.js
JavaScript
var tween = new TWEEN.Tween( { left: 0 } ) .to( { left: 500 }, 300 ) .easing( TWEEN.Easing.Elastic.InOut ) .onUpdate( function () { elem.style.left = left + "px"; } ) .start();
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルのアップデートのパフォーマンス
スタイル設定時の描画コストについて、複数スタイルの設定時、必ずしもcssTextがパフォーマンスが 優れているわけではない
for (var i=0; i<100; i++) { el = elems[i][0]; el.style.width = (i%10)+"px"; el.style.height = (i%10)+"px";}
for (var i=0; i<100; i++) { el = elems[i][0]; text = ‘width:’ +(i%10)+'px;'; + ‘height:' +(i%10)+'px;'; el.style.cssText = text;}
cssTextで一括設定する場合styleでひとつずつ設定する場合
http://jsperf.com/style-vs-csstext-vs-setattribute/11
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルのアップデートのパフォーマンス
おすすめの書き方、styleでまとめて設定する
http://jsperf.com/style-vs-csstext-vs-setattribute/11
for (var i=0; i<100; i++) { el = elems[i][0]; text = 'width:' +(i%10)+'px;'; + 'height:' +(i%10)+'px;'; el.style = text;}
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Web Animations API
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Web Animations API
• 元々Polymer用に作られていた • W3C Editors Draft • 最新のChrome/Operaなどで使用可能
(polyfill用にweb-animations-jsを使用すればモダンなFirefoxなどでも使用可能)
• https://github.com/web-animations/web-animations-js
• 書き方はCSS Animationに似ている • SVGアニメーションも可能 • その他機能豊富 • PolyfillのサポートはIE10以上
JavaScript
http://w3c.github.io/web-animations/
elem.animate([ {left: 0}, {left: 500}], { fill: 'forwards', duration: 300, easing : "ease-out"});
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
トゥイーン・アニメーション極意
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
1. 要件に合わせてライブラリ/手法を選ぶ
2. 程よく、入れ込み過ぎ無い
3. リズムや流れ、タイミングを意識する
トゥイーン・アニメーション極意
ご清聴ありがとうございました
top related