WPF 做的动画

来源:转载

<Window x:Class="AnimationDemo.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">
    <DockPanel>
        <DockPanel.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonBeginMoveEyes">
                <BeginStoryboard x:Name="beginMoveEyes">
                    <Storyboard>
                        <DoubleAnimation RepeatBehavior="Forever" DecelerationRatio=".8"
                                         AutoReverse="True" By="6" Duration="0:0:1"
                                         Storyboard.TargetName="eyeLeft"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                        <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True"
                                         By="6" Duration="0:0:5" Storyboard.TargetName="eyeLeft"
                                         Storyboard.TargetProperty="(Canvas.Top)"/>
                        <DoubleAnimation RepeatBehavior="Forever" DecelerationRatio=".8"
                                         AutoReverse="True" By="-6" Duration="0:0:3"
                                         Storyboard.TargetName="eyeRight"
                                         Storyboard.TargetProperty="(Canvas.Left)"/>
                        <DoubleAnimation RepeatBehavior="Forever" AutoReverse="True"
                                         By="6" Duration="0:0:6" Storyboard.TargetName="eyeRight"
                                         Storyboard.TargetProperty="(Canvas.Top)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonStopMoveEyes">
                <StopStoryboard BeginStoryboardName="beginMoveEyes"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonResize">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation RepeatBehavior="2" AutoReverse="True" Storyboard.TargetName="scale1"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                         From="0.1" To="3" Duration="0:0:5">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>    
                        </DoubleAnimation>
                        <DoubleAnimation RepeatBehavior="2" AutoReverse="True" Storyboard.TargetName="scale1"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                         From="0.1" To="3" Duration="0:0:5">
                            <DoubleAnimation.EasingFunction>
                                <ElasticEase/>
                            </DoubleAnimation.EasingFunction>
                            
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </DockPanel.Triggers>
        <StackPanel Orientation="Vertical" DockPanel.Dock="Top">
            <Button x:Name="buttonBeginMoveEyes" Content="Start Move Eyes" Margin="5"/>
            <Button x:Name="buttonStopMoveEyes" Content="Stop Move Eyes" Margin="5"/>
            <Button x:Name="buttonResize" Content="Resize" Margin="5"/>
        </StackPanel>
        <Canvas>
            <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="scale1"/>
            </Canvas.LayoutTransform>
            <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Stroke="Blue" StrokeThickness="4" Fill="Yellow"/>
            <Ellipse Canvas.Left="30" Canvas.Top="12" Width="60" Height="30">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0.1" Color="DarkGreen"/>
                        <GradientStop Offset="0.7" Color="Transparent"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Canvas.Left="30" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/>
            <Ellipse x:Name="eyeLeft" Canvas.Left="40" Canvas.Top="43" Width="6" Height="5" Fill="Black"/>
            <Ellipse Canvas.Left="65" Canvas.Top="35" Width="25" Height="20" Stroke="Blue" StrokeThickness="3" Fill="White"/>
            <Ellipse x:Name="eyeRight" Canvas.Left="75" Canvas.Top="43" Width="6" Height="5" Fill="Black"/>
            <Path Name="mouth" Stroke="Blue" StrokeThickness="4" Data="M 40,74 Q 57,95 80,74"/>
        </Canvas>
    </DockPanel>
</Window>

分享给朋友:
您可能感兴趣的文章:
随机阅读: