Silverlightでのアニメーションについて

I,S C# Silverlight

おはようございます、I.Sです。
今回はSilverlightでのアニメーションについてタグの説明を行いたいと思います。

DoubleAnimationUsingKeyFramesタグ

  1. BeginTime Storyboardが開始してからアニメーションを開始する時間を設定
  2. Storyboard.TargetName アニメーションさせたいターゲットを設定
  3. Storyboard.TargetProperty アニメーションで変更するターゲットのプロパティ

記入例：

　　textBox1のWidthプロパティを変化させる

SplineDoubleKeyFrameタグ

　DoubleAnimationUsingKeyFramesタグの子ノードとして設定

  1. KeyTime [親のDoubleAnimationUsingKeyFramesタグが実行されてからの時間を設定]
  2. Value [KeyTimeで設定された時間でのStoryboard.TargetPropertyへ与える値を設定]

記入例：

DoubleAnimationUsingKeyFramesが開始時はtextBox1のWidthプロパティに0を設定
DoubleAnimationUsingKeyFramesが開始してから0.5秒後にtextBox1のWidthプロパティに120を設定

回転を行うには

回転を行いたいオブジェクトタグの子ノードに
****.RenderTransformタグを設置（****はオブジェクトの種類により変化）
****.RenderTransformタグの子ノードに変更を行いたいプロパティのグループを設定するため
TransformGroupタグを設置
回転を行うにはRotateTransformタグを設置
あとはDoubleAnimationUsingKeyFramesタグのStoryboard.TargetPropertyに
(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)を設定

今回の記事を書く上で作成したXAMLについて

下記のとおりです

<navigation:Page x:Class="SilverlightApplication3.Page2" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Page2 Page">
    <Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="490" Height="350" Background="White"
        x:Name="Holl">
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard x:Name="Timeline1">
                        <DoubleAnimationUsingKeyFrames
                            BeginTime="00:00:04"
                            Storyboard.TargetName="textBox1"
                            Storyboard.TargetProperty="(Width)"  >
                            
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                            <SplineDoubleKeyFrame KeyTime="00:00:00.500000" Value="120" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames
                            BeginTime="00:00:04"
                            Storyboard.TargetName="textBox1"
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"  >
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="640" />
                            <SplineDoubleKeyFrame KeyTime="00:00:00.500000" Value="1" />
                        </DoubleAnimationUsingKeyFrames>
                       
                        <DoubleAnimationUsingKeyFrames 
          BeginTime="00:00:00" Storyboard.TargetName="textBlock" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"  >
                            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="186"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames 
          BeginTime="00:00:00" Storyboard.TargetName="textBlock"
          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"  >
                            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="149"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="299"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames 
          BeginTime="00:00:00" Storyboard.TargetName="textBlock" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"  >
                            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="720"/>
                            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <TextBlock 
  x:Name="textBlock" Width="342" Height="43" TextWrapping="Wrap" 
  FontFamily="Arial" FontSize="48" FontWeight="Bold" 
  Text="ブログ投稿画面" RenderTransformOrigin="0.5,0.5"
            >
  <TextBlock.Foreground>
    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="#FFFF1900" Offset="0"/>
      <GradientStop Color="#FF001EFF" Offset="1"/>
    </LinearGradientBrush>
  </TextBlock.Foreground>
  <TextBlock.RenderTransform>
    <TransformGroup>
      <ScaleTransform ScaleX="1" ScaleY="1"/>
      <SkewTransform AngleX="0" AngleY="0"/>
      <RotateTransform Angle="0"/>
      <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
  </TextBlock.RenderTransform>
        </TextBlock>
        <TextBox Canvas.Left="12" Canvas.Top="57" Height="24" x:Name="textBox1" Width="0" >
         
            <TextBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0" />
                </TransformGroup>
            </TextBox.RenderTransform>
                
        </TextBox>
    </Canvas>
</navigation:Page>