WPF使用Xaml代码制作心跳动画

效果展示:

1.准备一张爱心的Png图片

 2.将PNG文件其拷贝到项目中,在窗体里新建Image控件,代码如下:

        <Image
            x:Name="image"
            Height="50"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Source="/心.png">
            <Image.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard
                            RepeatBehavior="Forever"
                            Storyboard.TargetName="image"
                            Storyboard.TargetProperty="Height">
                            <DoubleAnimation
                                BeginTime="0:0:0.0"
                                EasingFunction="{StaticResource powerEaseOut}"
                                To="50"
                                Duration="0:0:0.6" />
                            <DoubleAnimation
                                BeginTime="0:0:0.6"
                                EasingFunction="{StaticResource powerEaseOut}"
                                To="30"
                                Duration="0:0:0.4" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>

其中用到了动画的缓动,需要在Window的标签下面添加资源

    <Window.Resources>
        <PowerEase
            x:Key="powerEaseOut"
            EasingMode="EaseOut"
            Power="2" />
    </Window.Resources>

由于心脏在收缩时更有力,所以图片缩小动画的时间设置的要比放大的时间短,这样才会更模拟心跳的感觉

猜你喜欢

转载自blog.csdn.net/XX_YZDY/article/details/130102679
今日推荐