CircleEase CircleEase CircleEase CircleEase Class

Definition

Represents an easing function that creates an animation that accelerates and/or decelerates using a circular function.

public : sealed class CircleEase : EasingFunctionBase, ICircleEasepublic sealed class CircleEase : EasingFunctionBase, ICircleEasePublic NotInheritable Class CircleEase Inherits EasingFunctionBase Implements ICircleEase// This API is not available in Javascript.
<CircleEase .../>
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited methods

Inherited properties

Examples

This XAML example applies a CircleEase easing function to a DoubleAnimation to create a decelerating animation.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:3" 
                Storyboard.TargetName="rectScaleTransform" 
                Storyboard.TargetProperty="ScaleY" EnableDependentAnimation="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

        <Rectangle x:Name="myRectangle" PointerPressed="Pointer_Clicked" 
     Fill="Blue" Width="200" Height="30">
            <Rectangle.RenderTransform>
                <ScaleTransform x:Name="rectScaleTransform" />
            </Rectangle.RenderTransform>
        </Rectangle>

    </StackPanel>
// When the user clicks the rectangle, the animation
// begins. 
private void Pointer_Clicked(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}
' When the user clicks the rectangle, the animation
' begins. 
Private Sub Pointer_Clicked(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

Remarks

CircleEase is an easing function that has a function-over-time formula that resembles a cosine curve when represented as a function-time graph. When EasingMode is EaseIn (the default), this easing function starts slow and accelerates gradually as it reaches the end. It reaches about 15% value halfway through the duration.

An easing function can be applied to the EasingFunction properties of From/To/By animations, or to the EasingFunction properties of key-frame types used for the Easing variants of key-frame animations. For more info, see Key-frame animations and easing function animations.

The formula used for this function is:

Formula of f(t) equals 1 minus square root of1 minus t squared

An easing function can be applied to the EasingFunction properties of From/To/By animations, or to the EasingFunction properties of key-frame types used for the Easing variants of key-frame animations. For more info, see Key-frame animations and easing function animations.

Constructors

CircleEase() CircleEase() CircleEase() CircleEase()

Initializes a new instance of the CircleEase class.

public : CircleEase()public CircleEase()Public Sub New()// This API is not available in Javascript.

See Also