效果展示:
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>
由于心脏在收缩时更有力,所以图片缩小动画的时间设置的要比放大的时间短,这样才会更模拟心跳的感觉