也许是一个简单的动画,我正在沿着弯曲的路径设置动画,并希望应用缓和轮廓,以便在补间的上半部分和下半部分中缓和。那么,如果这样有意义,那么快慢速的轮廓(例如球)已经被抛向空中了吗?

TweenJS Spark Table中列出的缓动选项包含一些与我正在寻找的相反的选项。例如cubicInOut。使用前面的(差的)描述,这将是慢-快-慢。

我当然可以通过使用不同的缓动链接补间来实现此目的,但这似乎并不干净,并且此应用程序需要解决顶部的暂停。

一个示例在顶部显示cubicInOut,并使用cubicOut链接补间,然后在底部显示cubicIn,以达到我想要的效果。

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);
createjs.MotionGuidePlugin.install();

var shape1 = new createjs.Shape();
shape1.graphics.f("#000000").dc(0,0,10);

var shape2 = shape1.clone();

var path1 = new createjs.Shape();
path1.graphics.beginStroke("#ff0000").mt(0,100).qt(200,0,400,100);

var path2 = path1.clone();
path2.y = 100;
stage.addChild(path1, path2, shape1, shape2);

createjs.Tween.get(shape1).to({guide:{ path:[0,100, 200,0, 400,100] }},2000, createjs.Ease.cubicInOut);

createjs.Tween.get(shape2).to({guide:{ path:[0,200, 100,150, 200,150] }},1000, createjs.Ease.cubicOut).call(function(){
    createjs.Tween.get(shape2).to({guide:{ path:[200,150, 300,150, 400,200] }},1000, createjs.Ease.cubicIn);
});

function tick(event) {
    stage.update();
}


Fiddle与本例。

只是想知道是否有一种更清洁的方法来实现这一目标,而无需链接补间,并且无需在曲线的顶点处停顿?缓和方程似乎是最简单的,但是我不确定如何实现它。任何想法将不胜感激。

非常感谢,

ps

最佳答案

TweenJS API文档说:


  Ease类提供了一系列缓动函数以用于
  TweenJS。它不使用标准的4参数缓动签名。
  相反,它使用单个参数来指示当前线性
  补间的比例(0到1)。


在GitHub上的Custom Easing Functions issue / article的指导下,有一种定义自定义函数的方法。只需继续创建Bezier easing function,然后将其转换为线性即可。

您将获得这种Bezier函数:

function(t:Number, b:Number, c:Number, d:Number):Number {
    var ts:Number=(t/=d)*t;
    var tc:Number=ts*t;
    return b+c*(0.699999999999999*tc*ts + -1.75*ts*ts + 3.9*tc + -4.1*ts + 2.25*t);
}


您的TweenJS放松将是:

var myEasing = function( k ) {
    var t = (k*100);
    var d = 100;
    var ts=(t/=d)*t;
    var tc=ts*t;
    return (0.699999999999999*tc*ts + -1.75*ts*ts + 3.9*tc + -4.1*ts + 2.25*t);
};


在您的代码中,将以这种方式使用它:

createjs.Tween.get(shape2).to({guide:{ path:[0,200, 200,100, 400,200] }},2000, myEasing);


updated Fiddle上进行检查。

10-05 20:43
查看更多