d3-ease

easing是一种通过扭曲时间来控制动画的明显运动的方法。通常用于slow-in(慢进),slow-out(慢出)。通过easing时间,动画过渡更平滑,动画表现更合理。

此模块中的easing类型实现了ease方法,以正常的时间t返回对应“eased”的时间。通常正常的时间和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”时间,通常范围也在[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;polyInt在[0,0.5]之间,polyOutt在[0.5,1]之间。如果不指定exponent,默认为3,相当于cubic

poly.exponent(e)

用给定指数e返回一个新的多项式easing。例如,创建linearquadcubic的等价物:

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;quadInt在[0,0.5]之间,quadOutt在[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;cubicInt在[0,0.5]之间,cubicOutt在[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;sinInt在[0,0.5]之间,sinOutt在[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;expInt在[0,0.5]之间,expOutt在[0.5,1]之间。

d3.easeCircleIn(t)

环形easing。

d3.easeCircleOut(t)

反向环形easing;相当于1-circleIn(1-t)。

d3.easeCircle(t)

d3.easeCircleInOut(t)

对称环形easing;circleInt在[0,0.5]之间,circleOutt在[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;elasticInt在[0,0.5]之间,elasticOutt在[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;backInt在[0,0.5]之间,backOutt在[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;bounceInt在[0,0.5]之间,bounceOutt在[0.5,1]之间。

results matching ""

    No results matching ""