d3-ease
easing是一种通过扭曲时间来控制动画的明显运动的方法。通常用于slow-in(慢进),slow-out(慢出)。通过easing时间,动画过渡更平滑,动画表现更合理。
此模块中的easing类型实现了ease方法,以正常的时间t返回对应“eased”的时间tʹ。通常正常的时间和eased的时间范围都在[0,1]之间,0表示动画开始,1表示动画结束;有些easing类型,如elastic,返回的eased时间可能会略微超过这个范围。好的easing应该在t=0时返回0,在t=1时返回1。另请参阅easing explorer观看演示。
这些easing类型很大程度上基于Robert Penner的研究。
Installing
如果你使用npm,请键入npm install d3-ease
。否则,请下载最新版本。你也可以直接从d3js.org加载,作为standalone library(独立库)或D3 4.0的一部分来使用。支持AMD,CommonJS和vanilla环境。在vanilla环境下,会输出一个全局的d3
:
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script>
var ease = d3.easeCubic;
</script>
API Reference
ease(t)
给定正常的时间t,范围通常在[0,1]之间,返回“eased”时间tʹ,通常范围也在[0,1]之间。0表示动画开始,1表示动画结束。较好的实现应该在t=0时返回0,在t=1时返回1。另请参阅easing explorer观看演示。例如,应用一个cubic easing:
var te = d3.easeCubic(t);
类似的,应用一个自定义的elastic easing:
// Before the animation starts, create your easing function.
var customElastic = d3.easeElastic.period(0.4);
// During the animation, apply the easing function.
var te = customElastic(t);
d3.easeLinear(t)
线性easing;恒等函数,linear(t)返回t。
d3.easePolyIn(t)
多项式easing;将t提升到指定的exponent。如果不指定exponent,默认为3,相当于cubicIn。
d3.easePolyOut(t)
反向多项式easing;相当于1-poly(1-t)。如果不指定exponent,默认为3,相当于cubicOut。
d3.easePoly(t)
d3.easePolyInOut(t)
对称多项式easing;polyIn的t在[0,0.5]之间,polyOut的t在[0.5,1]之间。如果不指定exponent,默认为3,相当于cubic。
poly.exponent(e)
用给定指数e返回一个新的多项式easing。例如,创建linear,quad和cubic的等价物:
var linear = d3.easePoly.exponent(1),
quad = d3.easePoly.exponent(2),
cubic = d3.easePoly.exponent(3);
d3.easeQuadIn(t)
二次easing;相当于polyIn.exponent(2)。
d3.easeQuadOut(t)
反向二次easing;相当于1-quadIn(1-t)。也相当于polyOut.exponent(2)。
d3.easeQuad(t)
d3.easeQuadInOut(t)
对称二次easing;quadIn的t在[0,0.5]之间,quadOut的t在[0.5,1]之间。相当于poly.exponent(2)。
d3.easeCubicIn(t)
三次easing;相当于polyIn.exponent(3)。
d3.easeCubicOut(t)
反向三次easing;相当于1-cubicIn(1-t)。也相当于polyOut.exponent(3)。
d3.easeCubic(t)
d3.easeCubicInOut(t)
对称三次easing;cubicIn的t在[0,0.5]之间,cubicOut的t在[0.5,1]之间。相当于poly.exponent(3)。
d3.easeSinIn(t)
正弦曲线easing;返回sin(t)。
d3.easeSinOut(t)
反正弦曲线easing;相当于1-sinIn(1-t)。
d3.easeSin(t)
d3.easeSinInOut(t)
对称正弦曲线easing;sinIn的t在[0,0.5]之间,sinOut的t在[0.5,1]之间。
d3.easeExpIn(t)
指数easing;将2增加到指数10 * (t - 1)。
d3.easeExpOut(t)
反向指数easing;相当于1-expIn(1-t)。
d3.easeExp(t)
d3.easeExpInOut(t)
对称指数easing;expIn的t在[0,0.5]之间,expOut的t在[0.5,1]之间。
d3.easeCircleIn(t)
环形easing。
d3.easeCircleOut(t)
反向环形easing;相当于1-circleIn(1-t)。
d3.easeCircle(t)
d3.easeCircleInOut(t)
对称环形easing;circleIn的t在[0,0.5]之间,circleOut的t在[0.5,1]之间。
d3.easeElasticIn(t)
弹性easing,就像橡皮筋。振幅和周期是可配置的;如果不指定,分别默认为1和0.3。
d3.easeElastic(t)
d3.easeElasticOut(t)
反向弹性easing;相当于1 - elasticIn(1 - t)。
d3.easeElasticInOut(t)
对称弹性easing;elasticIn的t在[0,0.5]之间,elasticOut的t在[0.5,1]之间。
elastic.amplitude(a)
根据给定振幅a返回一个新的弹性easing。
elastic.period(p)
根据给定周期p返回一个新的弹性easing。
d3.easeBackIn(t)
Anticipatory(先行) easing,就像舞蹈演员在跳下地板前屈膝一样。overshoot的程度是可配置的;如果不指定,默认为1.70158。
d3.easeBackOut(t)
反向先行easing;相当于1 - backIn(1 - t)。
d3.easeBack(t)
d3.easeBackInOut(t)
对称先行easing;backIn的t在[0,0.5]之间,backOut的t在[0.5,1]之间。
back.overshoot(s)
根据给定overshoot s返回一个新的back easing。
d3.easeBounceIn(t)
反弹easing;就像橡皮球。
d3.easeBounce(t)
d3.easeBounceOut(t)
反向反弹easing;相当于1 - bounceIn(1 - t)。