WPF动画2---关键帧动画和缓动动画

关键帧动画

　　与 From/To/By 动画类似，关键帧动画以也可以以动画形式显示目标属性值。

　　和From/To/By 动画不同的是， From/To/By 动画只能控制在两个状态之间变化，而关键帧动画则可以在多个状态之间变化。

　　例：这个是缩放动画，0-1秒，放大1.5倍. 1-1.1秒，放大2倍。1.1-1.2秒，缩小到原来

 1         private void button11_Click(object sender, RoutedEventArgs e)
 2         {
 3             TransformGroup tg = new TransformGroup();
 4 
 5             ScaleTransform sc = new ScaleTransform();
 6             
 7             tg.Children.Add(sc);
 8             image1.RenderTransform = tg;
 9             image1.RenderTransformOrigin = new Point(0.5, 0.5); 
10 
11 
12             DoubleAnimationUsingKeyFrames AniLeft = new DoubleAnimationUsingKeyFrames();
13             AniLeft.KeyFrames.Add(new LinearDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
14             AniLeft.KeyFrames.Add(new LinearDoubleKeyFrame(1.5, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
15             AniLeft.KeyFrames.Add(new LinearDoubleKeyFrame(2, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.1))));
16             AniLeft.KeyFrames.Add(new LinearDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.2))));
17 
18 
19             DoubleAnimationUsingKeyFrames AniTop = new DoubleAnimationUsingKeyFrames();
20             AniTop.KeyFrames.Add(new LinearDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
21             AniTop.KeyFrames.Add(new LinearDoubleKeyFrame(1.5, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
22             AniTop.KeyFrames.Add(new LinearDoubleKeyFrame(2, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.1))));
23             AniTop.KeyFrames.Add(new LinearDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.2))));
24 
25 
26             Storyboard s = new Storyboard();
27 
28 
29             Storyboard.SetTarget(AniLeft, image1);
30             Storyboard.SetTargetProperty(AniLeft, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
31             Storyboard.SetTarget(AniTop, image1);
32             Storyboard.SetTargetProperty(AniTop, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
33 
34 
35             s.Children.Add(AniLeft);
36             s.Children.Add(AniTop);
37 
38 
39 
40             s.Begin();
41         }

 

 

第二种是利用前台的方法

 1         <Button Content="关键帧动画14-缩放" Height="23" HorizontalAlignment="Left" Margin="311,339,0,0" Name="button16" VerticalAlignment="Top" Width="139" >
 2             <Button.Triggers>
 3                 <EventTrigger RoutedEvent="ButtonBase.Click">
 4                     <BeginStoryboard>
 5                         <BeginStoryboard.Storyboard>
 6                             <Storyboard >
 7                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
 8                                     <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.1"/>
 9                                     <LinearDoubleKeyFrame Value="1.5" KeyTime="0:0:0.5"/>
10                                     <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1"/>
11                                 </DoubleAnimationUsingKeyFrames>
12                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
13                                     <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.1"/>
14                                     <LinearDoubleKeyFrame Value="1.5" KeyTime="0:0:0.5"/>
15                                     <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1"/>
16                                 </DoubleAnimationUsingKeyFrames>
17                             </Storyboard>
18                         </BeginStoryboard.Storyboard>
19                     </BeginStoryboard>
20                 </EventTrigger>
21             </Button.Triggers>
22         </Button>

 

缓动动画

　　

 1         private void button12_Click(object sender, RoutedEventArgs e)
 2         {
 3             ScaleTransform scale = new ScaleTransform();
 4             image1.RenderTransform = scale;
 5             image1.RenderTransformOrigin = new Point(0.5, 0.5); //定义圆心位置        
 6             EasingFunctionBase easing = new ElasticEase()
 7             {
 8                 EasingMode = EasingMode.EaseOut,
 9                 //公式             
10                 Oscillations = 5,
11                 //滑过动画目标的次数           
12                 Springiness = 10 //弹簧刚度           
13             };
14             DoubleAnimation scaleAnimation = new DoubleAnimation()
15             {
16                 From = 0,
17                 //起始值            
18                 To = 1,
19                 //结束值           
20                 EasingFunction = easing,
21                 //缓动函数           
22                 Duration = new TimeSpan(0, 0, 0, 1, 200) //动画播放时间     
23             };
24             AnimationClock clock = scaleAnimation.CreateClock();
25             scale.ApplyAnimationClock(ScaleTransform.ScaleXProperty, clock);
26             scale.ApplyAnimationClock(ScaleTransform.ScaleYProperty, clock);
27         }

 

这个是我写了20个动画，和第一个一起了

源码下载

转载于:https://www.cnblogs.com/wzy315/p/7649787.html