对特效的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>