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
920
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.5k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
600
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.9k
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
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
140
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
990
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
56
38k
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
140
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
190
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
0
250
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
770
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.1k
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
310
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
340
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
150
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
6.7k

Featured

See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
430
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
330
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
900

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