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>