【WPF】两则动画效果

引言

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

 

第一个效果

     这个动画其实利用了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>

第二个效果

    其实第二个动画是用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>

小结

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