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

1.6K Views

December 18, 14

#JavaScript #Tween Animation #Easing #Web Animation #UI Animation

スライド概要

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

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

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 159.9K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 85.4K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 72.6K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 57.4K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 34.8K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 28.9K

各ページのテキスト

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

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

動きのデザイン 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

https://dribbble.com/shots/1696129-Menu-Transition?list=searches&offset=29

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

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.

24.

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.

28.

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.

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

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.
無断引用・転載禁止

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

32.

http://greensock.com/gsap

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

http://greensock.com/gsap

34.

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.
無断引用・転載禁止

http://jsperf.com/style-vs-csstext-vs-setattribute/11

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.
無断引用・転載禁止

http://jsperf.com/style-vs-csstext-vs-setattribute/11

38.

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.

41.

42.

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