AnimationExperimental.startAnimation reset some property values to defaults after animation ends.

[istarkov]

AnimationExperimental.startAnimation with properties “position” and “opacity" does not reset position and opacity to defaults after animation ends.
And this works as expected

    AnimationExperimental.startAnimation({
      node: this.refs['internal'],
      duration: 1000,
      easing: 'easeInQuad',
      property: 'position',
      toValue: {x: 200, y:200},
    });

element position after animation is {x:200,y:200}

---

But scaleXY and rotation get default values (rotation=0, scale=[1,1]) after animation end
this work as not expected

    AnimationExperimental.startAnimation({
      node: this.refs['internal'],
      duration: 1000,
      easing: 'easeInQuad',
      property: 'scaleXY',
      toValue: [2, 2],
    });

scale instantly after animation end gets scale = [1,1]

[istarkov]

To avoid this resets, i use dirty workaround using customized easing function and setting duration to "infinity" value
example:

var easeInQuad = function(t: number): number {
  return t * t;
};
var ease_duration = 300; //duration for animation
var infinite_duration = 100000;
AnimationExperimental.startAnimation({
  node: this.refs['internal'],      
  duration: infinite_duration,
  easing: (t) => easeInQuad(Math.min(1, t*infinite_duration/ease_duration)),
  property: 'scaleXY',
  toValue: [2,2],
});

[ptmt]

@istarkov thanks! This is helpful on the prototype stage.

[ptmt]

@istarkov,
After reading this http://www.objc.io/issue-12/animations-explained.html I've realize that this is a feature of UIKit, not a bug, I've come up to call setState after the animation ends to keep the model and presentation layers in sync. In your example it could be like:

animate() {
 AnimationExperimental.startAnimation({
      node: this.refs['internal'],
      duration: 1000,
      easing: 'easeInQuad',
      property: 'scaleXY',
      toValue: [2, 2],
    }, () => this.setState({scale: [2,2]}));
}
getInitialState() {
  return {
    scale: [1, 1]
  }
}
render() {
  return <View ref="internal" 
     style={{transform:[
       {scaleX: this.state.scale[0]},
       {scaleY: this.state.scale[1]}]}>
  </View>
}

It works, but it's a bit tricky with Flexbox and positions property for me

[brentvatne]

AnimationExperimental is very.. Experimental.. 😉 A new api will be coming soon, there aren't any plans to fix any issues with this at the moment as it is more or less deprecated.