CreateJS / TweenJS

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
http://createjs.com/
MIT License
3.56k stars 966 forks source link

How do I tween this data format? #109

Closed renjianfeng closed 5 years ago

renjianfeng commented 5 years ago

Please excuse my English is not my native language

I want to tween use this data here: {position:{x:300,y:200},rotation:30}

Here's what I expected to do:

var tween = createjs.Tween.get(myTarget)
            .to({position:{x:300,y:200},rotation:30},400)
            .set({label:"hello!"})
            .wait(500).to({alpha:0,visible:false},1000)
            .call(onComplete);

But now I have to:

var tween1 = createjs.Tween.get(myTarget).position
            .to({x:300},400)
            .set({label:"hello!"})
            .wait(500).to({alpha:0,visible:false},1000)
            .call(onComplete);

            var tween2 = createjs.Tween.get(myTarget)
            .to({rotation:30},400)
            .set({label:"hello!"})
            .wait(500).to({alpha:0,visible:false},1000)
            .call(onComplete);

How do you use only one tween to process data in this format?

lannymcnie commented 5 years ago

Since you want to tween the values of the position object, you can you the DotPlugin, which is available in GItHub. https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/plugins/DotPlugin.js

createjs.Tween.get(myTarget)
    .to({"position.x":300, "position.y":400, rotation: 30}, 1000);

Prior to this you could either use two tweens, or tween properties on the main object, and apply them back to the position object on a change event:

createjs.Tween.get(myTarget)
    .to({x:300, y:400, rotation:30}, 1000)
    .on("change", function(event) {
        var tween = event.target,
            position = tween.target.position;
        position.x = myTarget.x;
        position.y = myTarget.y;
    }); 

DotPlugin will be available in the next version TweenJS, but you can include the class now.. Here is some more details on the new plugins, with demos here: http://blog.createjs.com/new-plugins-in-tweenjs/

Cheers,

renjianfeng commented 5 years ago

Thank you. This will help me just fine.