Animate an object from one position to another

Help & Support
#1

Hi,

I have a script that moves an objects from one position to another. I’m struggling to get it to work though.

I’d like the x y z of the start and end position to be public… i think that’s where its not working properly:

var TweenPosition = pc.createScript('tweenPosition');

TweenPosition.attributes.add('duration', {type: 'number', default: 1.0});
TweenPosition.attributes.add('easing', {type: 'string', default: 'Linear'});
TweenPosition.attributes.add('delay', {type: 'number', default: 0});
TweenPosition.attributes.add('loop', {type: 'boolean', default: true});
TweenPosition.attributes.add('yoyo', {type: 'boolean', default: false});
TweenPosition.attributes.add('repeat', {type: 'number', default: 2});


// I don't think this is right:

TweenPosition.attributes.add('startposition', {type: 'vec3',[ 'x', 'y', 'z' ] });**
TweenPosition.attributes.add('endposition', {type: 'vec3',  [ 'x', 'y', 'z' ] });**

//

TweenPosition.prototype.initialize = function() {
    // create our tween
    this.reset();
    
    // handle attribute changes
    this.on('attr:duration', function (value) {
        this.tween.duration = value;
    }, this);
    
    this.on('attr:easing', this.reset, this);
    this.on('attr:delay', this.reset, this);    
    this.on('attr:loop', this.reset, this);    
    this.on('attr:yoyo', this.reset, this);    
    this.on('attr:repeat', this.reset, this);

    this.on('attr:startposition', this.reset, this);    
    this.on('attr:endposition', this.reset, this);
};

TweenPosition.prototype.reset = function () {                   
    // if we are already tweening then stop first
    if (this.tween) {
        this.tween.stop();
    }
    
    // reset our position

// I don't think this is right:
 this.entity.setLocalPosition(this.startposition);
    
    // create a new tween using our script attributes
    this.tween = this.entity.tween(this.entity.getLocalPosition())
 
// I don't think this is right:
   .to(new pc.Vec3(this.endposition), this.duration, pc[this.easing])
        .delay(this.delay)
        .loop(this.loop)
        .yoyo(this.yoyo);
    
    // only set repeats if loop is false
    if (! this.loop)
        this.tween.repeat(this.repeat);
    
    // start the tween
    this.tween.start();
};
#2

Hi @jono3d,

Yes, those vec3 attributes aren’t correct. Try like this:

TweenPosition.attributes.add('startposition', {type: 'vec3' });
TweenPosition.attributes.add('endposition', {type: 'vec3'});

Save and parse your script, and check if they now appear in editor.

1 Like
#3

thank you! there are no errors in the script so that is good now…

I think it must be this part that’s not correct now:

` this.entity.setLocalPosition(this.startposition);
    
    // create a new tween using our script attributes
    this.tween = this.entity.tween(this.entity.getLocalPosition())
 

   .to(new pc.Vec3(this.endposition), this.duration, pc[this.easing])`
#4

Hmm, seems correct. Are you getting any errors in the console?

If you can’t find it, try posting a sample project here so we can take a look.

#5

i am now getting an error actually:

[tween-position.js?id=65320429&branchId=e547a4c5-7087-4a0e-91ba-6ccd9a026b3d:48]: this.entity.tween is not a function

https://playcanvas.com/editor/scene/1311216

many thanks!

#6

This doesn’t seem correct to me if this.endposition is already a pc.Vec3.

2 Likes
#7

ace! that fixed it :slight_smile: