Proposal: Custom easing functions for Composition animations

[rozele]

Proposal: Custom easing functions for Composition animations

Similar to the custom easing functions supported in WPF Storyboards, it would be great for Composition animations to also support custom easing functions.

Summary

• The custom easing function would need to take the normalized time delta as a parameter and return a tuple of the computed value and whether the animation is complete (so we aren't tied to fixed duration animations).

Rationale

• React Native has an animations API that are implemented as "dependent" animations on iOS and Android using frame rendering callbacks.
• react-native-windows currently implements the animation API using the UI.Composition types.
• There are multiple limitations with this approach and it's ability to support the full capabilities of the Animated API. One of these is that animations on a specific property may be stopped and a new animation synchronously started.
• There are 3 types of animations - timing (key frame), decay, and spring. Unfortunately, the SpringScalarNaturalMotionAnimation cannot fully emulate the cross-platform spring behavior implemented in React Native, primarily because React Native's animation has custom termination conditions (i.e., overshoot clamping, rest displacement thresholds and rest velocity thresholds).
• As such, react-native-windows pre-computes the key frames of the animation at 60fps and does a linear interpolation between these frames.
• However, because the key frame values are dependent on the animations "current" value, stopping one animation and synchronously starting a new one requires a short pause (1-2 frames) to wait for completion of the previous animation and start a new one, causing jitter.
• Rather than attempting to bring all required features to SpringScalarNaturalMotionAnimation (and potentially still not exactly emulating the cross-platform behavior), it would be better to have the ability to just define a custom easing function that emulates the cross-platform behavior.

Scope

Capability	Priority
This proposal will allow developers to create a custom easing function for animating values	Must
This proposal will allow developers to define arbitrary termination conditions and not rely on fixed durations	Must
This proposal will allow developers to synchronously access the current value, e.g., This.CurrentValue, of the property being animated	Must

[StephenLPeters]

@rozele the CubicBezier easing function should cover almost all the bases no? https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.composition.cubicbeziereasingfunction?view=winui-3.0

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[rozele]

If we want the animation behavior to match the React Native behavior precisely, then no. For example, CubicBezier would not allow us to implement a decay function or a custom spring behavior.

[StephenLPeters]

@aborziak-ms @jeffStall FYI