Jump to content

How to change tween from and to dynamically?


wijesijp
 Share

Recommended Posts

I have following tween I used to move an image in my game

coords = { x: 0, y: 0 };
  tween = new TWEEN.Tween(coords)
    .to({ x: 700, y: 200 }, 2000)
    .onUpdate(function() {
      cardImg.position.set(coords.x, coords.y);
    })
    .onComplete(function(){
    	redoTween();
    })
    .start();



function redoTween()
{
cardImg.position.set(0, 0);
tween._valuesStart = { x: 0, y: 0 };
tween._valuesEnd= { x: 700, y: 0 };
tween.start();
}

This works as expected.

I wanted to re-use the same tween to move the image to a different location. 

I would like to update "coords" to new location and; call say; tween.start();

Is there a way to do this?

What I noticed was I can only use the it once.

 

https://jsfiddle.net/wijesijp/85xavjrs/30/

Link to comment
Share on other sites

well i dont know for the popularity of this one.
But try search in docs if it have timeLine feature.

In tweenLite to acheave this kind of stuff you can just do .
 

const tl = new TimelineLite({ repeat: -1 }); // repeat the timeline infinity
tl.to(cardImg.position, 2000, { x: 700, y: 200, ease: Expo.easeOut }) // to: mean 0,0=>700,200 in 2000sec
tl.to(cardImg.position, 1, { x: 0, y: 0 }) // start when 2000 sec finish

or 
tl.from(cardImg.position, 2000, { x: 700, y: 200, ease: Expo.easeOut }) // from: mean 700,200=> 0,0

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...