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)。

d3.easeBounceInOut(t)

对称反弹easing;bounceIn的t在[0,0.5]之间,bounceOut的t在[0.5,1]之间。

results matching ""

    No results matching ""