Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

TweenJS for Everything

Avatar for yomotsu yomotsu
March 15, 2013
Programming
210
0

TweenJS for Everything

Avatar for yomotsu

yomotsu

March 15, 2013

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
1k
PBR in three.js
Avatar for yomotsu yomotsu
1
1.5k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1.1k
IE to Edge
Avatar for yomotsu yomotsu
1
410
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.6k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
610
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
2k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
13k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.9k

Other Decks in Programming

See All in Programming
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
250
Event is what happens
Avatar for MOROHASHI Kyosuke moro
1
280
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
140
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
530
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
160
IBM Bob でAI駆動開発『QC-Playbook』
Avatar for 1kano ichirokano2
0
110
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
650
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
140
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
110
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
170
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
250
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
1k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
320
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
800
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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