索引

• 概述
• 方法
• 内置Easing

概述

Easing用于创建缓动曲线，一般用于配合动画来使用，譬如配合Timer来实现更复杂的动画效果。

Easing本质上是一个函数，它接受一个参数t，t的范围是[0, 1]，返回一个期望的easing后的值 Easing实际上运行的时候区分成三个模式： In： 默认模式，按照 [0, 1] 分别做 f(t) 的处理 Out： In的倒过来的方式，按照 [0, 1] 分别做 1 - f(1-t) 的处理 * InOut： In和Out的混合方式，前一半是In，后一半是Out

相关方法

• ht.Default.setEasing(name, easing) 用户注册一组easing。其中： # name是easing的名称，譬如Linear，Power(power=200)，Bounce(bounces=3, bounciness=2)等。如果没有参数则可以直接行如Linear，如果有参数则后面带括号，括号内是参数名和参数缺省值，用逗号分隔 # easing是easing的实现，它是一个函数，接受一个参数t，t的范围是[0, 1]，返回一个期望的easing后的值
• ht.Default.createEasing(name) 实例化一个easing，它是一个函数，接受一个参数t，t的范围是[0, 1]，返回一个期望的easing后的值 其中name的最前面可以使用+、-、*来指定easing的模式，譬如+Linear表示Linear的In模式，-Linear表示Linear的Out模式，*Linear表示Linear的InOut模式。 再譬如*Power(3)表示参数为 3 的Power的InOut模式。
• ht.Default.setEasingAlias(aliasName, baseName) 设置easing的别名，譬如ht.Default.setEasingAlias('Pow', 'Power');则为Power起一个新的Pow的别名，这样Pow(6)相当于Power(6)的easing；另外也可以使用ht.Default.setEasingAlias('mySpring', 'Spring(200, 5, 2)')来为已经调整好的动画起个新名字，后续可以简单的使用mySpring来使用这个easing。

// 后续可以使用 "Wobble" 作为 easing 使用，参数不传入则默认 (0.1, 1)
// "Wobble(0.5, 2)" In 模式，且参数为 (0.5, 2)，同 "+Wobble(0.5, 2)"
// "-Wobble(0.5, 2)" Out 模式，且参数为 (0.5, 2)
// "*Wobble(0.5, 2)" InOut 模式，且参数为 (0.5, 2)
ht.Default.setEasing('Wobble(amplitude=0.1, cycles=1)', {
    easeImpl: function (t) {
        var amplitude = this.amplitude === undefined ? 0.1 : parseFloat(this.amplitude);
        var cycles = this.cycles === undefined ? 1 : parseFloat(this.cycles);
        return t + amplitude * Math.sin(cycles * 2 * Math.PI * t);
    }
});

内置Easing

• Linear：线性的，return t，它也是默认的Easing
• Discrete：离散的，[0-1)区间是0，只有 1 的时候是 1，return t < 1 ? 0 : 1
• Circle：圆的，return 1 - Math.sqrt(1 - t * t)
• Quadratic：二次的，return t * t
• Cubic：三次的，return t * t * t
• Quartic：四次的，return t * t * t * t
• Power(power=2)：幂次的，参数power表示幂次，return Math.pow(t, power)，其中Power(4)实际上跟Quartic等价
• Back(amplitude=1)：回弹的，参数amplitude表示回弹的幅度，return Math.pow(t, 3) - t * amplitude * Math.sin(mathPI * t)
• Bounce(bounces=3, bounciness=2)：弹跳的，参数bounces表示弹跳的次数，bounciness表示弹跳的弹性
• Elastic(oscillations=3, springiness=3)：弹性，参数oscillations表示振荡的次数，springiness表示弹簧的弹性
• Exponential(exponent=2)：指数的，参数exponent表示指数，return (Math.exp(this.exponent * t) - 1.0) / (Math.exp(this.exponent) - 1.0)
• Sine：正弦的，return 1.0 - Math.sin(Math.PI * 2 * (1.0 - t))
• Bezier(x1=0, y1=0, x2=1, y2=1)：贝塞尔的，参数x1、y1、x2、y2分别表示贝塞尔的起点和终点的坐标
• Spring(stiffness=100, damping=15, mass=1)：弹簧的，参数stiffness表示弹簧的硬度，damping表示阻尼，mass表示质量

其中内置了几个别名： Quad => Quadratic Quart => Quartic Pow => Power Expo => Exponential * Sin => Sine