Introducing Keyframe-like animation definition schema

[jmysliv]

Description

To simplify the way how complex animations are defined, this PR introduces a keyframe like animation definition schema. It is inspired by the animation definition schema used in CSS and react-native-animatable. In the result user will be able to define animation using Keyframe:

const enteringAnimation = new Keyframe({
    0: {
      transform: [{ scale: 0.4 }, { rotate: '45deg' }],
    },
    30: {
      transform: [{ scale: 1.5 }, { rotate: '-90deg' }],
    },
    100: {
      transform: [{ scale: 1 }, { rotate: '0deg' }],
      easing: Easing.quad,
    },
  })

After creating Keyframe object the user can pass it as a prop to Animated.View component (i.ex. as entering animation).

Changes

• Added Keyframe animation builder

Screenshots / GIFs

keyframeAnimation.mov

Test code and steps to reproduce

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Added TS types tests
• Added unit / integration tests
• Updated documentation
• Ensured that CI passes

[piaskowyk]

Solid PR 🚀

[jakub-gonet]

It isn't part of the 2.3.0-alpha.1 release so adding docs to that may be unnecessary.

[jmysliv]

After consultation with @piaskowyk we've changed the approach a little bit. When a property is missing from the keyframe, instead of copying its value from the previous keyframe, we decided to increase the duration of the animation to the value in the next keyframe. So in such case:

const animation = new Keyframe({
  from: {
    originX: 50,
    transform: [{ rotate: '45deg' }],
  },
  30: {
    transform: [{ rotate: '-90deg' }],
  },
  100: {
    originX: 0,
    transform: [{ rotate: '0deg' }],
    easing: Easing.quad,
  },
});

Animation to originX: 0 will start from the beginning and not after 30% of the animation duration like in the previous approach.

\cc @jakub-gonet

[jakub-gonet]

This looks like a better approach. If I understand it correctly, do you try to "fill the gaps" between two occurrences of the given property and interpolate it between two points?

What happens if we have code like this?

const animation = new Keyframe({
  0: {
    originX: 50,   // <- this property is being interpolated
    transform: [{ rotate: '45deg' }],
    easing: Easing.linear,
  },
  30: {
    transform: [{ rotate: '-90deg' }],
    easing: Easing.bezier,
  },
  100: {
    originX: 0,
    transform: [{ rotate: '0deg' }],
    easing: Easing.quad,
  },
});

that is if we have different easings between those points? Do every property follows the same easing and originX will be approaching 0 from 50 first linearly and from 30% of animation by bezier curve?

On a side note, I'm not sure about mixing from/to with numbers. We may treat it as an alias or a simplified syntax. I'm leaning towards the latter but alias gives more freedom in defining animations. What do you think?

[jmysliv]

@jakub-gonet

This looks like a better approach. If I understand it correctly, do you try to "fill the gaps" between two occurrences of the given property and interpolate it between two points?

Yes, exactly.

What happens if we have code like this?

const animation = new Keyframe({
  0: {
    originX: 50,   // <- this property is being interpolated
    transform: [{ rotate: '45deg' }],
    easing: Easing.linear,
  },
  30: {
    transform: [{ rotate: '-90deg' }],
    easing: Easing.bezier,
  },
  100: {
    originX: 0,
    transform: [{ rotate: '0deg' }],
    easing: Easing.quad,
  },
});

that is if we have different easings between those points? Do every property follows the same easing and originX will be approaching 0 from 50 first linearly and from 30% of animation by bezier curve?

No, currently property follows only this easing which is defined in the same point. So, because originX: 0 is defined with Easing.quad it will be approaching 0 from 50 with such easing.

On a side note, I'm not sure about mixing from/to with numbers. We may treat it as an alias or a simplified syntax. I'm leaning towards the latter but alias gives more freedom in defining animations. What do you think?

@piaskowyk what do you think?

[piaskowyk]

New edge case:

const animation = new Keyframe({
  from: {
    transform: [{rotate: '45deg'}, {scaleX: 1}, {rotate: '0deg'}],
  },
  to: {
    transform: [{rotate: '-90deg'}, {scaleX: 0.2}, {rotate: '80deg'}],
  }
});