CubicBezierEasing Class
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 2.9.1
Interface of CubicBezierEasing
C1Y : double ux
C2X : double ux
C2Y : double ux
ControlPoints : float4 ux
CubicBezierEasing Constructor uno
Creates a new CubicBezierEasing
Inherited from Easing
Map(double) : double uno
Computes the mapped easing value.