Table of Contents

BindableAnimator

BindableAnimator lets you smoothly animate a bindable float along a curve. You can then use this animated float in place of any IBindable<float> to create smooth animations and transitions.

var animator = new BindableAnimator(Curve.EaseOutCubic(2f), autoPlay: true);

Curve defines the curve function for the animator. You can pass in a Unity AnimationCurve, or create a simple easing curve using one of the Ease static methods. Easing curves always start at 0 and end at 1, so the animator above will animate from 0 to 1 over 2 seconds.

Now you can bind to the animator. This will move the current gameObject from (0, 0, 0) to (0, 1, 0) over 2 seconds:

transform.BindPosition(animator, v => new Vector3(0, v, 0));

BindableAnimator has several control functions:

  • Play - play the animation, optionally from the beginning.
  • PlayReverse - play the animation backwards.
  • Pause - stop the animation at its current tme.
  • CurrentTime - get or set the current animation time.
  • Curve - get or set the animation curve
  • Value - read the current value.
  • Loop - control if the animation should wrap or ping-pong.
  • IsPlaying - true if the animation is currently playing.
  • IsReverse - true if the animation is currently playing in reverse.
  • WaitForCompleteAsync - an async function to wait for the animation to complete.

Curves

The Curve class offers different built-in easing functions using a cubic bezier curves.

The built-in easings were copied from easings.net.

You can define your own curves in a number of ways:

Specify Cubic Bezier Parameters

Create a custom cubic bezier using this method:

Curve.Bezier(duration, x1, y1, x2, y2);
  • duration: The time it takes to play the curve.
  • x1: Represents the x-axis coordinate of the first control point. It must be in the [0, 1] range.
  • y1: Represents the y-axis coordinate of the first control point.
  • x2: Represents the x-axis coordinate of the second control point. It must be in the [0, 1] range.
  • y2: Represents the y-axis coordinate of the second control point.

Use a Unity AnimationCurve

Curve has a constructor that takes a standard Unity AnimationCurve, which can be defined in the editor.

[SerializeField]
private AnimationCurve _animationCurve; // Configure this in the editor

void Start()
{
    var curve = new Curve(_animationCurve);
}

Use a Custom Function

At the end of the day, a curve is just a function that takes one float and returns another. You can specify that function yourself. In this example, we define a curve that follows one cycle of a Sine wave, offset so that the values are positive.

var sineCurve = new Curve(
    t => 0.5f + 0.5f * Mathf.Sin(t), // Function
    Mathf.PI * 2                     // Duration
);