Represents a cubic bezier easing curve.

A cubic bezier curve is defined by four control points. In an Easing curve, the first control point is fixed at (0,0), while the last control point is fixed at (1,1) the two remaining control points are configurable.

Example

<Rectangle Width="100" Height="100" Color="#18f" CornerRadius="10">
    <WhilePressed>
        <Move X="100" Duration="0.3">
            <CubicBezierEasing ControlPoints="0.4, 0.0, 1.0, 1.0" />
        </Move>
    </WhilePressed>
</Rectangle>

The above CubicBezierEasing is equivalent to:

// In iOS
[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]

// In Android
FastOutLinearInInterpolator

// In CSS
cubic-bezier(0.4, 0.0, 1, 1);

// In After Effects
Outgoing Velocity: 40%
Incoming Velocity: 0%

Different Easing and EasingBack

You can use ux:Binding to specify two different easing curves for Easing and EasingBack:

<Move X="100" Duration="0.3">
    <CubicBezierEasing ux:Binding="Easing" ControlPoints="0.4, 0.0, 1.0, 1.0" />
    <CubicBezierEasing ux:Binding="EasingBack" ControlPoints="0.3, 0.0, 0.3, 1.0" />
</Move>

Creating new global easing functions

You can use `ux:Global to define a new global easing curve:

<CubicBezierEasing ux:Global="MyStandardEasing" ControlPoints="0.4, 0.0, 1.0, 1.0" />

And then:

<Move X="100" Duration="0.3" Easing="MyStandardEasing" />

Location

Namespace
Fuse.Animations
Package
Fuse.Common 1.9.0

Interface of CubicBezierEasing

Inherited from Easing

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.