Moving objects with Animation

48 views
Skip to first unread message

25. Sai Surya

unread,
Oct 14, 2022, 4:51:04 AM10/14/22
to Developing Interactive Simulations in HTML5
Hi Sam,

I am referring Animation.js from twixt.

var someNumberProperty = new NumberProperty( 100 );
var someObject = { someAttribute: new Vector2( 100, 5 ) };
 new Animation( {
  // Options for the Animation as a whole
      duration: 2,
      targets: [ {
        // First target
        property: someNumberProperty,
        to: 5
      }, {
        // Second target
        object: someObject,
        attribute: 'someAttribute',
        to: new Vector2( 50, 10 )
      } ]
    } );

My question is, property "object" taking an argument of Vector2 for positioning.
However, I want to target a specific object on the screen to move it to different location
with easing. How can I set a target object explicitly?

Perhaps, this is bad usage of Animation. My requirement is to move an object on the screen from current location to different location with easing over delay.

Could you provide any suggestions please?

Thanks & Regards,
Sai Surya

25. Sai Surya

unread,
Oct 15, 2022, 2:49:35 AM10/15/22
to Developing Interactive Simulations in HTML5
Hi Sam,

I did further bit of study and changed code as below, I am expecting football to fall to target vector location after mouse release. 
Drag is working but initiating animation in the 'end' event of drag not neither changing football location nor creating animation effect.

// Move the football by dragging it.
    this.addInputListener( new DragListener( {
      allowTouchSnag: true, // When dragging across it on a touch device, pick it up
      positionProperty: football.positionProperty,
      transform: modelViewTransform,
      end: event => {
     
        console.log('Football supposed to fall now! Starting animation ... ');

        // foot ball's position when mouse is released, supposed to start fall from this position.
        console.log(event.pointer.point);

        let footballPositionProperty = new Property( event.pointer.point ) ;
        footballPositionProperty.linkAttribute( football, 'translation' );

        let easingProperty = new Property( Easing.LINEAR );

        let durationProperty = new Property( 2 );
       
            let animation = new Animation( {
               targets: [ {
            property: footballPositionProperty,
            easing: easingProperty.value,
            to: new Vector2(568, 602)
          }],
          duration: durationProperty.value
          }).start();
       
      }
     
    } ) );

Any pointers please?

Thanks & Regards,
Sai Surya.

samrreid

unread,
Oct 15, 2022, 10:24:41 AM10/15/22
to Developing Interactive Simulations in HTML5
From your example, it appears you are familiar with https://github.com/phetsims/twixt/blob/master/js/demo/AnimationScreenView.js which is good.  We are wondering if there may be a problem with the stepTimer?  Are you using the joist framework for starting the sim, like the example sim? https://github.com/phetsims/example-sim. If not, the step timer may not be sending step events to the Animation?

If that does not help solve the problem, we may be better able to assist if you share the full context of your codebase, so we can replicate the problem (if it is not proprietary or encumbered by licensing).

Best Regards,
Sam

Reply all
Reply to author
Forward
0 new messages