Animating UI Elements with Keyframes : SplineDoubleKeyFrame « Animations « Silverlight

1. Silverlight
2. Animations
3. SplineDoubleKeyFrame

Animating UI Elements with Keyframes

 

<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="BouncingBallStoryboard">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="272">
          <SplineDoubleKeyFrame.KeySpline>
            <KeySpline ControlPoint1="0,0" ControlPoint2="1,0"/>
          </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
        <SplineDoubleKeyFrame KeyTime="00:00:01.2" Value="200">
          <SplineDoubleKeyFrame.KeySpline>
            <KeySpline ControlPoint1="0,0" ControlPoint2="0,0"/>
          </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="MultipleAnimations">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="258"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="8"/>
      </DoubleAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF0000"/>
        <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#3F00FDFD"/>
        <SplineColorKeyFrame KeyTime="00:00:02.6000000" Value="#FFFF0000"/>
      </ColorAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFF00"/>
        <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FFFFA500"/>
        <SplineColorKeyFrame KeyTime="00:00:02.6000000" Value="#FFFFA500"/>
        <SplineColorKeyFrame KeyTime="00:00:04" Value="#FF000080"/>
      </ColorAnimationUsingKeyFrames>
    </Storyboard>
  </UserControl.Resources>
  <StackPanel>
    <Ellipse Height="70" HorizontalAlignment="Stretch" Margin="49,43,66,0" VerticalAlignment="Top" Fill="#FF0000FF" Stroke="#FF000000" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Ellipse.RenderTransform>
    </Ellipse>

    <Rectangle Height="15.23" HorizontalAlignment="Stretch" Margin="0,0,0,0" 
      VerticalAlignment="Bottom" Fill="#FF3A3A3F" 
      d:LayoutOverrides="Height"/>
    <Rectangle Height="14.508" HorizontalAlignment="Left" 
      Margin="0,113,0,0" VerticalAlignment="Top" Width="49.56" 
      Fill="#FF352424" d:LayoutOverrides="Width, Height"/>
    <Button Height="28" HorizontalAlignment="Stretch" 
      Margin="4,4,4,0" VerticalAlignment="Top" Content="Click to Drop the Ball"
      Click="Button_Click"/>
    <Rectangle Height="70" HorizontalAlignment="Left" 
      Margin="37,43,0,0" VerticalAlignment="Top" Width="70"
      Grid.Column="1" Fill="#FF00FFFF" Stroke="#FF000000" x:Name="rectangle" 
      RenderTransformOrigin="0.5,0.5">
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Rectangle.RenderTransform>
    </Rectangle>
    <Ellipse Height="70" HorizontalAlignment="Stretch" 
      Margin="145,43,199,0" VerticalAlignment="Top" 
      Fill="#FFFFFF00" Stroke="#FF000000" Width="70" 
      x:Name="ellipse1" RenderTransformOrigin="0.5,0.5">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Ellipse.RenderTransform>
    </Ellipse>
    <Ellipse HorizontalAlignment="Right" Margin="0,43,85,0" 
       VerticalAlignment="Top" Fill="#FFFF0000" Stroke="#FF000000"
       Width="70" Height="70" x:Name="ellipse2" RenderTransformOrigin="0.5,0.5">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
        </TransformGroup>
      </Ellipse.RenderTransform>
    </Ellipse>
    <Button Height="28" HorizontalAlignment="Left" Margin="4,4,0,0" 
       VerticalAlignment="Top" Width="151"
       Content="Start Multi-Animation" Click="Button_Click_1"/>
  </StackPanel>
</UserControl>

//File: Page.xaml.cs
using System.Windows;
using System.Windows.Controls;

namespace SilverlightApplication3
{
  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      BouncingBallStoryboard.Begin();
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
      MultipleAnimations.Begin();
    }
  }
}

   
  

Related examples in the same category