Speaker Deck
Sign in
Sign up
for free
TweenJS for Everything
yomotsu
March 15, 2013
Programming
0
160
TweenJS for Everything
yomotsu
March 15, 2013
Tweet
Share
Want more?
yomotsu
0
240
yomotsu
0
310
yomotsu
2
860
reverentgeek
7
340
rmw
1
200
skipperchong
0
130
carmenhchung
6
250
keathley
5
190
productmarketing
3
280
clairelew
3
510
thoeni
1
140
jcasabona
4
230
Transcript
1
.
5XFFO+4GPS&WFSZUIJOH 2013/03/15 yomotsu@PixelGrid, Inc.
2
.
খࢁాߊߒ 'SPOU&OE&OHJOFFSBU1JYFM(SJE 5XJUUFS!ZPNPUTV 8IP
3
.
5XFFO+4
4
.
None
5
.
None
6
.
w Ξχϝʔγϣϯ BOJNBUJPO w τΡΠʔϯ UXFFO w Πʔδϯά FBTJOH
7
.
5XFFO+4XJUI&BTFM+4 EFNP
8
.
6TBHF 5XFFOΠϯελϯεΛऔಘ HFUB5XFFOJOTUBODF τΡΠʔϯɺσΟϨΠɺίʔϧόοΫΛՃ UIFO BEEUXFFO EFMBZPSDBMMCBDLBTOFFEFE
9
.
HFUB5XFFOJOTUBODF createjs.Tween.get( nyan ) .to( { x: 300 }, 1000,
createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); this behaves as "new createjs.Tween()"
10
.
HFUB5XFFOJOTUBODF createjs.Tween.get( nyan ) .to( { x: 300 }, 1000,
createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); EaselJS DisplayObject
11
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); adding tween
12
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); target value for this tween
13
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); duration
14
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); easing
15
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); 2000ms delay
16
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); multiple values
17
.
DIBJO DIBJO BOEDIBJO createjs.Tween.get( nyan ) .to( { x: 300
}, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } ); callback
18
.
DPODMVTJPO createjs.Tween.get( nyan ) .to( { x: 300 }, 1000,
createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } );
19
.
DPODMVTJPO createjs.Tween.get( nyan, { loop : true } ) .to(
{ x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut ) .wait( 2000 ) .call( function() { console.log( 'done!' ); } );
20
.
)PXEPTFJUXPSL
21
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
22
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
23
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
24
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
25
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
26
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
27
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
28
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
29
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
30
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
31
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
32
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
33
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
34
.
)PXEPTFJUXPSL 5XFFOͷΠϯελϯεΛ࡞Δͱ 8IFOZPVDSFBUFEBOJOTUBODFPG5XFFO 5XFFO+4͕ొ͞ΕͨΦϒδΣΫτͷΛมߋ 5XFFO+4XJMMDIBOHFWBMVFPGBQQMJFEPCKFDU &BTFM+4͕ΦϒδΣΫτΛදࣔ UIFO
&BTFM+4XJMMSFOEFSUIFPCKFDUVTJOHDIBOHFEWBMVF
35
.
5XFFO+4 ΦϒδΣΫτͷΛมߋ͍ͯ͠Δ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGUIFPCKFDU
36
.
5XFFO+4DBOCFVTFE XJUIPUIFSMJCT
37
.
5XFFO+4XJUI1BQFSKT EFNP
38
.
5XFFO+4XJUIUISFFKT EFNP
39
.
5XFFO+4XJUI47(%0. EFNP
40
.
5XFFO+4DBOHFUBMPOH XJUIPUIFST
41
.
MFBSO"1*T IUUQXXXDSFBUFKTDPN%PDT 5XFFO+4NPEVMFT5XFFO+4IUNM
42
.
DPODMVTJPO
43
.
DPODMVTJPO w 5XFFO+4ΦϒδΣΫτͷΛม͍͑ͯΔ͚ͩ 5XFFO+4JTKVTUDIBOHJOHWBMVFPGBOPCKFDU w ͍Ζ͍ΖͳදࣔܥϥΠϒϥϦʔͱΈ߹ΘͤՄೳ 5XFFO+4DBOCFVTFEJODPNCJOBUJPOXJUITFWFSBMMJCT w ͨͩ͠ɺ5XFFO+4&BTFM+4ʹґଘ͍ͯ͠Δ 5XFFO+4JTEFQFOEFOUPO&BTFM+4
5XFFO+4ͷػೳ͚ͩΛར༻ͨͯ͘͠&BTFM+4ΛಡΈ͜·ͳ͍͚ͯ͘ͳ͍
44
.
JOBEEJUJPO
45
.
UXFFOKT IUUQTHJUIVCDPNTPMFUXFFOKT
46
.
UXFFOKT var obj = { x : 100, y :
100 } var t1 = new TWEEN.Tween( obj ) .to( { x: 300 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ); var t2 = new TWEEN.Tween( obj ) .to( { x: 100, y : 300 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 ); var t3 = new TWEEN.Tween( obj ) .to( { x: 100, y : 100 }, 1000 ) .easing( TWEEN.Easing.Quadratic.Out ).delay( 2000 ) .onComplete( function () { console.log( 'done!' );} ); t1.chain( t2 ); t2.chain( t3 ); t1.start();
47
.
UXFFOKT EFNP
48
.
K2VFSZDBOBMTPEPUIBUTJNJMBS var obj = { x : 100, y :
100 }; $.when( $( obj ).animate( { x : 300 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( $( obj ).animate( { x : 100, y : 300 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( $( obj ).animate( { x : 100, y : 100 }, 1000 ) ) .then( $( obj ).delay( 2000 ) ) .then( function () { console.log( 'done' ); } );
49
.
K2VFSZDBOBMTPEPUIBUTJNJMBS EFNP
50
.
DPODMVTJPO
51
.
FBTJMZ ػೳ GFBUVSFT ґଘ EFQFOEJOHPO 5XFFO+4 UXFFOKT K2VFSZ ؆୯
ॆ࣮ &BTFM+4ʹґଘ ͢͜͠ෳࡶ ॆ࣮ ಛʹFWFOU ͳ͠ ؆୯ ͦΕͳΓ ඞཁʹԠͯ͡K2VFSZ &BTJOH1MVHJO
52
.
None
53
.
ߪಡ։͔࢝Βؒແྉ ֹ݄ԁ
54
.
$PEF(SJE XXXDPEFHSJEOFU
55
.
2VFTUJPO !ZPNPUTV
yomotsu
yomotsu
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
