JavaScriptで“動く”Tween Animation -入門-

1.5K Views

December 18, 14

スライド概要

2014/12/15の勉強会にて発表された資料です。

SCRIPTY#2 ~フロントエンド紳士・淑女のための勉強会~
http://scripty.connpass.com/event/10345/

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

JavaScript で“動く” Tween Animation -入門マーケティングソリューションカンパニー 開発本部 エクスペリエンスデザイン部 テクノロジーデザイン 上村 裕樹

2.

上村 裕樹 Hiroki Uemura Web Designer / Frontend Engineer at Yahoo! Japan since 2011 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

3.

今日のお題目 JavaScript で“動く” Tween Animation -入門Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

4.

今日のお題目 基本編 • • トゥイーンアニメーションってなに? イージングって何? 実践編 • • Webでの実践 • CSS Transition / Css Animationで実践してみる • jQueryで実践してみる • jQuery以外のライブラリを試してみる Web Animations APIを試してみる Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

5.

UI Animation 主にDOMアニメーションについて Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

6.

動きのデザインの 重要性が増している Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

7.

動きのデザイン Material Design Polymer https://www.polymer-project.org/platform/webanimations.html Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 http://www.google.com/design/spec/ animation/meaningful-transitions.html

8.

動きのデザイン 例: Hamburger Menu Animation https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

9.

Tween Animation トゥイーン・アニメーション Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10.

Tween Animation トゥイーン・アニメーション A 移動 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 B

11.

Tween Animation トゥイーン・アニメーション とは A B 間の動きを補間する技術 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

12.

Tween Animation トゥイーン・アニメーション とは 移動 / 拡大 / 変形 / 色 間の動きを補間する技術 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

13.

トゥイーン・アニメーション によって実現したい世界 わかりやすい 気持ちいい Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

14.

EASING イージング 気持ちいいアニメーションのための 重要キーワード Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

15.

EASING イージング フレーム間の変化の加速/減速 アニメーションのリズムが調整できる Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

16.

イージング関数の代表例 linear 加速減速なし ease-out 徐々に減速 ease-in 徐々に加速 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

17.

イージング関数の代表例 http://www.robertpenner.com/easing/ http://easings.net/ja Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

18.

Web開発で Tween Animation 実践してみる Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

19.

CSS Animation/Transition + JavaScript Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20.
[beta]
CSS Transition
left:0;

left:500px;

CSS
div {
left : 0;
transition: .3s left ease-out;
}

!

div:hover {
left : 500px;
}

!
!

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

21.
[beta]
CSS Animation
left:0;

CSS

left:500px;

JavaScript ( jQuery )

div {
left : 0;
}

!

div.start {
animation: tween .3s ease-out;
}

!

@keyframes tween {
from {left : 0;} to {left: 500px;}
}

!
!

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

$("div").on("click", function(){
$(this).addClass("start");
});

22.

CSS Transition CSS Animation transition-property transition-duration transition-timing-function transition-delay animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state ある状態からある状態への変化 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 キーフレームを指定してタイムラインを 書くように細かなアニメーション制御が可能

23.

CSS Transition / Animation 課題 IE9 以下が対応していない IE8、IE9はブラウザシェアがかなり高い 複雑なアニメーションに弱い ・チェインの概念がない ・同期処理、制御がずれる Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

24.

jQuery.animate() Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

25.
[beta]
jQuery.animate()
left:0;

left:500px;

jQuery
$("div").on("click", function(){
$("div").animate( {
left : 500
}, 300, "ease-out");
});

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

26.

jQuery.animate() 課題 パフォーマンスに難あり ・レイアウトスラッシングを引き起こす ・リクエストアニメーションフレームを 使用していない ※ ※ http://wilsonpage.co.uk/preventing-layout-thrashing/ ※ http://0-9.sakura.ne.jp/pub/lt/modest/start.html Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

27.

見えてきた課題 クロスブラウザ 複雑なアニメーション パフォーマンス Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

28.

Tween Animation おすすめJSライブラリ クロスブラウザ 複雑なアニメーション パフォーマンス Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29.

Tween Animation おすすめJSライブラリ velocity.js 多機能 MIT 多機能・変形有り 一部有償 シンプル MIT http://julian.com/research/velocity/ TweenMax (GSAP) http://greensock.com/tweenmax tween.js https://github.com/sole/tween.js/ Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

30.

Velocity.js http://julian.com/research/velocity/ Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

31.
[beta]
Velocity.js
•
•
•

•
•

http://julian.com/research/velocity/

jQuery.animate()と互換性がある
単独でも使える
jQueryのパフォーマンスの難題点が
クリアされている
簡単に実装できる上、機能も豊富
おすすめ

$elem.velocity({
left: 500
}, {
duration: 300,
easing: "ease-out"
});

JavaScript

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

32.

TweenMax http://greensock.com/gsap Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

33.
[beta]
TweenMax
•

•
•

•

http://greensock.com/gsap

ActionScriptで有名だった
トゥイーンライブラリが
JavaScriptに対応したもの
一部有償
CSS transformの値を、個別に設定す
る事が可能で、(例えばscaleと
rotate)アニメーションが組み合わせ
て表示される
demo

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

TweenMax.to(elem, 0.3, {
left:500,
ease:"easeOut"});

JavaScript

34.

tween.js https://github.com/sole/tween.js Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

35.
[beta]
tween.js
•
•

•

•

https://github.com/sole/tween.js

CreateJSのTweenJSではない
チェイン機能やイージング関数などの
基本的な内容は揃っている
実際のスタイル描画のところは、
自身で更新処理を記載する
条件分岐や組み合わせなどがしやすい

var tween = new TWEEN.Tween( { left: 0 } )
.to( { left: 500 }, 300 )
.easing( TWEEN.Easing.Elastic.InOut )
.onUpdate( function () {
elem.style.left = left + "px";
} )
.start();

JavaScript

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

36.
[beta]
スタイルのアップデートのパフォーマンス
スタイル設定時の描画コストについて、複数スタイ
ルの設定時、必ずしもcssTextがパフォーマンスが
優れているわけではない

for (var i=0; i<100; i++) {
el = elems[i][0];
el.style.width = (i%10)+"px";
el.style.height = (i%10)+"px";
}

styleでひとつずつ設定する場合

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で一括設定する場合

http://jsperf.com/style-vs-csstext-vs-setattribute/11
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

37.
[beta]
スタイルのアップデートのパフォーマンス
おすすめの書き方、styleでまとめて設定する

for (var i=0; i<100; i++) {
el = elems[i][0];
text = 'width:'
+(i%10)+'px;';
+ 'height:'
+(i%10)+'px;';
el.style = text;
}

http://jsperf.com/style-vs-csstext-vs-setattribute/11
Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

38.

Web Animations API Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

39.
[beta]
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以上

Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved.
無断引用・転載禁止

http://w3c.github.io/web-animations/

elem.animate([
{left: 0},
{left: 500}
], {
fill: 'forwards',
duration: 300,
easing : "ease-out"
});

JavaScript

40.

トゥイーン・アニメーション極意 Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

41.

トゥイーン・アニメーション極意 1. 要件に合わせてライブラリ/手法を選ぶ 2. 程よく、入れ込み過ぎ無い 3. リズムや流れ、タイミングを意識する Copyright(c) 2014 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

42.

ご清聴ありがとう ございました