先把做好的png图片倒入到工程.插入到工作区,然后把image放到canvas中, 在新建立的Canvas的外层制作一个矩形.刚好挡住其中的一个人物.
选中矩形和Canvas设置遮照.
然后制作动画.对Image进行操作.
<
Storyboard x:Name
=
"
Storyboard1
"
>
< DoubleAnimationUsingKeyFrames BeginTime = " 00:00:00 " Storyboard.TargetName = " image " Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " >
< SplineDoubleKeyFrame KeyTime = " 00:00:00 " Value = " 0 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.3000000 " Value = " -61.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.5000000 " Value = " -121.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.7000000 " Value = " -182.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.9000000 " Value = " -243.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.1000000 " Value = " -303.966 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.3000000 " Value = " -366.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.5000000 " Value = " -429.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.7000000 " Value = " -491.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.9000000 " Value = " -551.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.1000000 " Value = " -611.913 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.3000000 " Value = " -669.896 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.5000000 " Value = " -724.896 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.7000000 " Value = " -780.896 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
< DoubleAnimationUsingKeyFrames BeginTime = " 00:00:00 " Storyboard.TargetName = " image " Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " >
< SplineDoubleKeyFrame KeyTime = " 00:00:00 " Value = " 0 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.3000000 " Value = " -61.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.5000000 " Value = " -121.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.7000000 " Value = " -182.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:00.9000000 " Value = " -243.984 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.1000000 " Value = " -303.966 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.3000000 " Value = " -366.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.5000000 " Value = " -429.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.7000000 " Value = " -491.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:01.9000000 " Value = " -551.945 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.1000000 " Value = " -611.913 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.3000000 " Value = " -669.896 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.5000000 " Value = " -724.896 " />
< SplineDoubleKeyFrame KeyTime = " 00:00:02.7000000 " Value = " -780.896 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
采用 DiscreteDoubleKeyFrame 设置其 X 坐标.RepeatBehavior="forever" 动画永久反复播放
<
Storyboard x:Name
=
"
Storyboard1
"
RepeatBehavior
=
"
forever
"
>
< DoubleAnimationUsingKeyFrames BeginTime = " 00:00:00 " Storyboard.TargetName = " image " Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " >
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00 " Value = " 0 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.3000000 " Value = " -61.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.5000000 " Value = " -121.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.7000000 " Value = " -182.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.9000000 " Value = " -243.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.1000000 " Value = " -303.966 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.3000000 " Value = " -366.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.5000000 " Value = " -429.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.7000000 " Value = " -491.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.9000000 " Value = " -551.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.1000000 " Value = " -611.913 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.3000000 " Value = " -669.896 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.5000000 " Value = " -724.896 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.7000000 " Value = " -780.896 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
< DoubleAnimationUsingKeyFrames BeginTime = " 00:00:00 " Storyboard.TargetName = " image " Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " >
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00 " Value = " 0 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.3000000 " Value = " -61.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.5000000 " Value = " -121.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.7000000 " Value = " -182.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:00.9000000 " Value = " -243.984 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.1000000 " Value = " -303.966 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.3000000 " Value = " -366.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.5000000 " Value = " -429.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.7000000 " Value = " -491.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:01.9000000 " Value = " -551.945 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.1000000 " Value = " -611.913 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.3000000 " Value = " -669.896 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.5000000 " Value = " -724.896 " />
< DiscreteDoubleKeyFrame KeyTime = " 00:00:02.7000000 " Value = " -780.896 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
效果
demo DOWNLOAD