WPF与缓动(二) 正弦与余弦缓动

简介: 原文:WPF与缓动(二) 正弦与余弦缓动                                                                           WPF与缓动(二) 正弦与余弦缓动                                     ...
原文: WPF与缓动(二) 正弦与余弦缓动

                                                                           WPF与缓动(二) 正弦与余弦缓动
                                                                                                          周银辉

如果要比二次缓动(请参见WPF与缓动(一) N次缓动)更平缓, 可以使用正弦或余弦缓动.
sin.jpg
如果我们用曲线上点的斜率表示速度,可以发现,由0到PI/2,速度逐渐减小,从PI/2到PI速度逐渐增加.
我们可以总结出如下公式
formula4.PNG
其中位置的改变量相当于Animation中的To与From的差值, t/t(总)相当于animationClock.CurrentProgress.Value, b实际就是From值

参考如下代码:

img_a6339ee3e57d1d52bc7d02b338e15a60.gif using  System;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Collections.Generic;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Text;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Windows.Media.Animation;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Windows;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
namespace  EaseMoveDemo
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif {
img_33d02437d135341f0800e3d415312ae8.gif    
public class EaseMoveAnimation : DoubleAnimationBase
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
public static readonly DependencyProperty FromProperty = DependencyProperty.Register(
img_33d02437d135341f0800e3d415312ae8.gif            
"From"typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
public static readonly DependencyProperty ToProperty = DependencyProperty.Register(
img_33d02437d135341f0800e3d415312ae8.gif            
"To"typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
public double? From
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            
get
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                
return (double?)this.GetValue(EaseMoveAnimation.FromProperty);
img_105a1e124122b2abcee4ea8e9f5108f3.gif            }

img_33d02437d135341f0800e3d415312ae8.gif            
set
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                
this.SetValue(EaseMoveAnimation.FromProperty, value);
img_105a1e124122b2abcee4ea8e9f5108f3.gif            }

img_105a1e124122b2abcee4ea8e9f5108f3.gif        }

img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
public double? To
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            
get
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                
return (double?)this.GetValue(EaseMoveAnimation.ToProperty);
img_105a1e124122b2abcee4ea8e9f5108f3.gif            }

img_33d02437d135341f0800e3d415312ae8.gif            
set
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif                
this.SetValue(EaseMoveAnimation.ToProperty, value);
img_105a1e124122b2abcee4ea8e9f5108f3.gif            }

img_105a1e124122b2abcee4ea8e9f5108f3.gif        }

img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
//正余弦缓动
img_33d02437d135341f0800e3d415312ae8.gif
        protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock animationClock)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            
double from = (this.From==null?defaultDestinationValue:(double)this.From);
img_33d02437d135341f0800e3d415312ae8.gif            
double to = (this.To==null?defaultOriginValue:(double)this.To);
img_33d02437d135341f0800e3d415312ae8.gif            
double delta = to - from;
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif            
//加速
img_33d02437d135341f0800e3d415312ae8.gif            
//return delta * (1 - Math.Cos(Math.PI / 2 * animationClock.CurrentProgress.Value)) + from;
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif            
//减速
img_33d02437d135341f0800e3d415312ae8.gif            
//return delta * Math.Sin(Math.PI / 2 * animationClock.CurrentProgress.Value) + from;
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif            
//先加速,后减速
img_33d02437d135341f0800e3d415312ae8.gif
            return delta/2 * (1 - Math.Cos(Math.PI * animationClock.CurrentProgress.Value)) + from;
img_33d02437d135341f0800e3d415312ae8.gif            
img_105a1e124122b2abcee4ea8e9f5108f3.gif        }

img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif
img_33d02437d135341f0800e3d415312ae8.gif        
protected override System.Windows.Freezable CreateInstanceCore()
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            
return new EaseMoveAnimation();
img_105a1e124122b2abcee4ea8e9f5108f3.gif        }

img_105a1e124122b2abcee4ea8e9f5108f3.gif    }

img_05dd8d549cff04457a6366b0a7c9352a.gif}

img_a6339ee3e57d1d52bc7d02b338e15a60.gif

源代码下载


目录
相关文章
|
前端开发 Windows
C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码
原文:C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码 C#WPF 如何绘制几何图形? 怎么绘制坐标系?绘制sin曲线(正弦曲线)? 这离不开Path(System.Windows.Shapes)和StreamGeometry(System.Windows.Media)类。
2220 0
|
C#
WPF与缓动(一) N次缓动
原文:WPF与缓动(一) N次缓动                                                             WPF与缓动(一)  N次缓动                                                         ...
911 0
|
C#
WPF与缓动(四) 弧形缓动
原文:WPF与缓动(四) 弧形缓动                                                   WPF与缓动(四)  弧形缓动                                                                   ...
665 0
|
C#
WPF与缓动(三) 指数缓动
原文:WPF与缓动(三) 指数缓动                                                         WPF与缓动(三) 指数缓动                                                                             周银辉指数缓动给人的感觉是加速度很大.
614 0
|
C# 内存技术
WPF中ListBox滚动时的缓动效果
原文:WPF中ListBox滚动时的缓动效果 上周工作中遇到的问题: 常规的ListBox在滚动时总是一格格的移动,感觉上很生硬。
1179 0
|
C#
WPF中的动画——(四)缓动函数
原文:WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上,可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
985 0
|
C# 内存技术
WPF界面设计技巧(7)—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)—模拟电梯升降的缓动动画     如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置、目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程。
1034 0
|
7月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
401 0
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件