Silverlight开发历程—动画（线性动画一些效果）

对特效的GlobalOffsetX进行动画

<Grid x:Name="LayoutRoot" Background="Gray" Loaded="LayoutRoot_Loaded">        <Grid.Resources>            <Storyboard x:Name="myStoryboard">                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="RotationY" To="65" RepeatBehavior="Forever" AutoReverse="True" />                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="GlobalOffsetX" To="400" RepeatBehavior="Forever" AutoReverse="True" />            </Storyboard>        </Grid.Resources>        <Canvas Grid.Row="1" Margin="20"  Width="200" Height="200" Background="White">            <Canvas.Effect>                <DropShadowEffect />            </Canvas.Effect>        </Canvas>        <Image Grid.Row="1" Margin="20" Width="200" Height="200" Source="../images/flower2.jpg">            <Image.Effect>                <DropShadowEffect />            </Image.Effect>            <Image.Projection>                <PlaneProjection x:Name="PlaneProjectionRotationX_1"  />            </Image.Projection>        </Image>    </Grid>

C#:

 private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)        {            myStoryboard.Begin();        }

对特效的GlobalOffsetX进行动画

对特效的GlobalOffsetY进行动画

<Grid x:Name="LayoutRoot" Background="Gray" Loaded="LayoutRoot_Loaded">        <Grid.Resources>            <Storyboard x:Name="myStoryboard">                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="RotationX" To="65" RepeatBehavior="Forever" AutoReverse="True" />                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="GlobalOffsetY" To="400" RepeatBehavior="Forever" AutoReverse="True" />            </Storyboard>        </Grid.Resources>        <Canvas Grid.Row="1" Margin="20"  Width="200" Height="200" Background="White">            <Canvas.Effect>                <DropShadowEffect />            </Canvas.Effect>        </Canvas>        <Image Grid.Row="1" Margin="20" Width="200" Height="200" Source="../images/flower2.jpg">            <Image.Effect>                <DropShadowEffect />            </Image.Effect>            <Image.Projection>                <PlaneProjection x:Name="PlaneProjectionRotationX_1"  />            </Image.Projection>        </Image>    </Grid>

C#:

 private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)        {            myStoryboard.Begin();        }

结果：

对特效的GlobalOffsetZ进行动画

Grid x:Name="LayoutRoot" Background="Gray" Loaded="LayoutRoot_Loaded">        <Grid.Resources>            <Storyboard x:Name="myStoryboard">                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="RotationY" To="65" RepeatBehavior="Forever" AutoReverse="True" />                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="RotationZ" To="65" RepeatBehavior="Forever" AutoReverse="True" />                <DoubleAnimation Duration="0:0:3" Storyboard.TargetName="PlaneProjectionRotationX_1"                                 Storyboard.TargetProperty="GlobalOffsetZ" To="400" RepeatBehavior="Forever" AutoReverse="True" />            </Storyboard>        </Grid.Resources>        <Canvas Grid.Row="1" Margin="20"  Width="200" Height="200" Background="White">            <Canvas.Effect>                <DropShadowEffect />            </Canvas.Effect>        </Canvas>        <Image Grid.Row="1" Margin="20" Width="200" Height="200" Source="../images/flower2.jpg">            <Image.Effect>                <DropShadowEffect />            </Image.Effect>            <Image.Projection>                <PlaneProjection x:Name="PlaneProjectionRotationX_1"  />            </Image.Projection>        </Image>    </Grid>

C# :

 private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)        {            myStoryboard.Begin();        }

结果：

下面的例子是矩形的高度作DoubleAnimation动画，在动画的过程中，高度连续跳动三次，如下代码：

<Canvas x:Name="LayoutRoot" Background="White">        <!--声明一个矩形，然后让矩形的宽度从0到300来时行动画递增-->        <Rectangle x:Name="rect" Width="200" Height="10">            <Rectangle.Fill>                <LinearGradientBrush>                    <GradientStop Offset="0" Color="White" />                    <GradientStop Offset="1" Color="Green" />                </LinearGradientBrush>            </Rectangle.Fill>        </Rectangle>        <Canvas.Triggers>            <!--创建动画触发器，Canvas.Loaded 在Canvas加载完成以后触发-->            <EventTrigger RoutedEvent="Canvas.Loaded">                <BeginStoryboard>                    <Storyboard >                        <!--声明一个Double动画 并指定他的动画是矩形的高度-->                        <DoubleAnimation From="10"  RepeatBehavior="Forever" To="300" Duration="0:0:3" Storyboard.TargetName="rect" Storyboard.TargetProperty="Height">                            <DoubleAnimation.EasingFunction>                                <BounceEase EasingMode="EaseOut" Bounces="3" Bounciness="3" />                            </DoubleAnimation.EasingFunction>                        </DoubleAnimation>                    </Storyboard>                </BeginStoryboard>            </EventTrigger>        </Canvas.Triggers>    </Canvas>