原文:WPF与缓动(一) N次缓动

  WPF与缓动(一)  N次缓动
                                                                                       周银辉

如果我们希望制作的动画效果像现实生活中的运动一样平滑, 比如汽车的启动与停止总有一个加速或减速的过程, 那么我们有必要研究一下"缓动"

缓入: 速度逐渐增加的过程,比如汽车的启动
如果我们用曲线上的点的斜率表示速度,那么在数学上它对应了下面这样的曲线:

缓出:速度逐渐减小的过程,比如汽车的停止
在数学上它对应了下面的曲线

就加速运动而言,  根据以下位置与加速度等公式

我们可以得到,任意时刻的速度等于总的路程乘以当前时间与总时间的比值的平方, 而总的路程实际将相当与WPF中Animation的To与From的差值, 当前时间与总时间的比值实际上相当与WPF中animationClock.CurrentProgress.Value值.
除此之外,我们发现,曲线的指数越大,点的斜率变化越快,那么加速度也就越大.
有了这些知识,我们可以很好的模拟加速运动了
参考以下代码

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media.Animation;
using System.Windows;

namespace EaseMoveDemo
{
    public class EaseMoveAnimation : DoubleAnimationBase
    {

        public static readonly DependencyProperty FromProperty = DependencyProperty.Register(
            "From", typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));

        public static readonly DependencyProperty ToProperty = DependencyProperty.Register(
            "To", typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));

        public static readonly DependencyProperty PowerProperty = DependencyProperty.Register(
            "Power", typeof(double?), typeof(EaseMoveAnimation), new PropertyMetadata(null));

        public double? From
        {
            get
            {
                return (double?)this.GetValue(EaseMoveAnimation.FromProperty);
            }
            set
            {
                this.SetValue(EaseMoveAnimation.FromProperty, value);
            }
        }

        public double? To
        {
            get
            {
                return (double?)this.GetValue(EaseMoveAnimation.ToProperty);
            }
            set
            {
                this.SetValue(EaseMoveAnimation.ToProperty, value);
            }
        }

        /**//// <summary>
        /// 幂指数,值越大,曲线上点的斜率越大,加速度越大,设置为5时效果较好
        /// </summary>
        public double? Power
        {
            get
            {
                return (double?)this.GetValue(EaseMoveAnimation.PowerProperty);
            }
            set
            {
                this.SetValue(EaseMoveAnimation.PowerProperty, value);
            }
        }

        protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock animationClock)
        {
            double from = (this.From==null?defaultDestinationValue:(double)this.From);
            double to = (this.To==null?defaultOriginValue:(double)this.To);
            double delta = to - from;
            double power = this.Power == null ? 2 : (double)this.Power;

            //加速
            return delta * Math.Pow(animationClock.CurrentProgress.Value, power) + from;
            //return delta * Math.Pow(animationClock.CurrentProgress.Value, 1/power) + from;

            //先加速后减速
            //if (animationClock.CurrentProgress.Value < 0.5)
            //{
            //    return delta / 2 * Math.Pow(animationClock.CurrentProgress.Value * 2, power) + from;
            //}
            //return delta / 2 * Math.Pow((animationClock.CurrentProgress.Value - 0.5) * 2, 1/power) + delta / 2 + from;
        }


        protected override System.Windows.Freezable CreateInstanceCore()
        {
            return new EaseMoveAnimation();
        }
    }
}

下载源代码

WPF与缓动(一) N次缓动的更多相关文章

  1. WPF中的动画——(四)缓动函数

    缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...

  2. 有趣 GIF 动图集 - 仿佛每张小动图都诉说了一个小笑话或者小故事

    点这里 来自法国南特(Nantes)的 Guillaume Kurkdjian 目前还是个学生.Kurkdjian 擅长创作一些平面动态图像,这些有趣的小动图仿佛每张都诉说了一个小笑话或者小故事,像个 ...

  3. 动漫绘画软件优动漫PAINT最近所用文件

    在使用优动漫PAINT的时候有时候会遇到这样的问题,近期编辑的文件找不见了,或者想要接着之前的文件进行编辑,如何快速找到这些文件呢?其实在最近所用文件中一目了,本文我们一起来看看. 如果您想接着上次未 ...

  4. 认识优动漫PAINT,优动漫PAINT基本功能有哪些?

    优动漫PAINT是一款搭载了绘制漫画.插画所需所有功能的软件.拥有笔感自然真实.表现形式多样的画笔工具,及高效.完美.便捷的上色工具等. 本文将通过由优动漫PAINT描绘的作品为例,简单介绍该软件的功 ...

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

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

  6. 【WPF学习】第五十一章 动画缓动

    线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地 ...

  7. Windows Phone开发(42):缓动动画

    原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...

  8. thwen 缓动框架

    描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...

  9. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

随机推荐

  1. 【TP SRM 703 div2 500】 GCDGraph

    Problem Statement You are given four ints: n, k, x, and y. The ints n and k describe a simple undire ...

  2. Android 异步更新UI-线程池-Future-Handler实例分析

    前言: 我们在开发Android过程中,在处理耗时任务和UI交互的过程中,都会将耗时任务放到子线程处理并刷新. 下面我提出的两个问题,相信大多数开发者都会碰到: 1. 数据经常需要读取更新,并且比较耗 ...

  3. DisplayPageBoundaries 打开word后自动将页面间空白隐藏 (auto+定时器)

    每次打开文档都要鼠标点击页面间空白处,将其隐藏 尝试过在 AutoOpen, AutoExec等宏中添加 ActiveWindow.View.DisplayPageBoundaries = False ...

  4. .NET-架构优化实战-梳理篇

    原文:.NET-架构优化实战-梳理篇 前言 程序员输出是他敲写的代码,那么输入就是他思考好的设计.因此不做设计是不存在,设计只分优秀的设计和糟糕的设计.为了避免过度设计浪费成本,需要针对现有业务与问题 ...

  5. Freemarker中的null判断,小坑一枚

    上次写到,在Freemarker中日期转换,可以提取成工具方法.主要是Freemarker对null的处理方式,非常坑爹.只要一个对象或对象的属性为null,就报错,虽然不影响界面显示,但控制台和日志 ...

  6. Android 面试之横竖屏切换的Activity生命周期

    public class EngineerJspActivity extends Activity { private static String Tag = "EngineerJspAct ...

  7. UE4的JSON读写方式<二>

    声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/43794409 Json的Writer博客地址: http:// ...

  8. WPF入门(三)->几何图形之不规则图形(PathGeometry) (2)

    原文:WPF入门(三)->几何图形之不规则图形(PathGeometry) (2) 上一节我们介绍了PathGeometry中LineSegment是点与点之间绘制的一条直线,那么我们这一节来看 ...

  9. python io操作

    一次性读取 # 读取文件 # 默认打开文件的方式是只读 file = None try: file = open("f:/test.sql") print(file.name) # ...

  10. jeesuite分布式框架环境搭建

    一.简述 这是菜鸟走向开源的第一步.开源项目jeesuite:http://git.oschina.net/vakinge/jeesuite-libs jeesuite是托管在码云上的开源项目,是一个 ...