【WPF】两则动画效果

[b]引言[/b]

利用WPF的动画可以轻而易举的实现各种各样的特效,如擦除,滑动进入等,先看两个效果图





[b]第一个效果[/b]

这个动画其实利用了OpacityMask和LinearGradientBrush,将画刷的两个渐变点设置在右边,再由动画控制两个渐变点在一定时差间往左边移动,形成擦除效果,如下

<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Image Stretch="Fill" Source="1345512835abyjpp.jpg"  RenderTransformOrigin="0,0" >
</Image>
<Image Stretch="Fill" Name="img" Source="1345512821B4h2Gt.jpg">
<Image.OpacityMask>
<LinearGradientBrush   StartPoint="0,0" EndPoint="1,0" >
<GradientStop Offset="1" Color="Black"></GradientStop>
<GradientStop Offset="1" Color="Transparent"></GradientStop>
</LinearGradientBrush>
</Image.OpacityMask>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="OpacityMask.GradientStops[0].Offset" To="0" FillBehavior="Stop" Duration="0:0:5" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="OpacityMask.GradientStops[1].Offset" To="0" FillBehavior="Stop"  BeginTime="0:0:0.2" Duration="0:0:5" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
</Window>

[b]第二个效果[/b]

其实第二个动画是用Blend做出来的,Blend在动画和行为这方面比VS做起来容易些.Blend生成的动画代码都采用EasingDoubleKeyFrame,另外你自己可以加上一些缓动函数,代码如下

<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="Storyboard1" >
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase></BackEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1">

</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1">

</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase></BackEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase></BackEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Image x:Name="image"  Source="pack://siteoforigin:,,,/13436987293iebAa.jpg" Stretch="Fill"  >
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard  Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform  ScaleY="0.5" ScaleX="0.5"/>
<SkewTransform   AngleY="20" AngleX="50"/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Window>

[b]小结[/b]

上面只是动画中的两个小示例,都是基于时间的动画.另外,还有基于路径和基于帧的动画,能够实现的花样更多.