Use SplineKeyframe : SplineKeyframe « Animations « Silverlight

1. Silverlight
2. Animations
3. SplineKeyframe

Use SplineKeyframe

    
<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' d:DesignHeight='480'>
    <UserControl.Resources>
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="200"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="526"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="253"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="13"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="-121"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="55"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5" Value="305"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="84"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Canvas x:Name="LayoutRoot" Background="White" >
        <Rectangle Height="100" Width="163" Fill="Red" RadiusY="13" RadiusX="13" Canvas.Top="154" Canvas.Left="46" RenderTransformOrigin="0.5,0.5" x:Name="Rectangle">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>


//File: Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication3
{
    public partial class MainPage : UserControl
    {

        public MainPage()
        {
            InitializeComponent();
            Storyboard1.Begin();
        }
    }
}

   
    
    
    
  

Related examples in the same category