Как добиться эффекта баллистического ослабления в TweenJS

Question

Возможно, простой, я оживляюсь по искривленному пути и хотел применить смягчающий профиль, который облегчает первую половину анимации, и во второй половине. Таким образом, быстрый, медленный профиль, например, мяч был выброшен в воздух, если это имеет смысл?

Варианты ослабления, перечисленные в TweenJS Spark Table, содержат некоторые, которые в значительной степени противоположны тому, что я ищу; например, кубический. Используя предыдущее (плохое) описание, это будет медленно-медленным.

Я могу, конечно, достичь этого, цепляя подростки, используя различное ослабление, но это не кажется таким чистым, и в этом случае пауза должна быть решена для этого приложения.

Пример, показывающий кубик в верхней части и цепочки с помощью кубика, затем кубический снизу, чтобы достичь близкого к тому, что мне нужно.

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 с этим примером.

Просто интересно, есть ли более чистый способ достичь этого без необходимости цепочки твинов и без паузы на вершине кривой? Уравнение ослабления кажется самым простым, но я не уверен, как бы я это сделал. Любые мысли были бы оценены.

Большое спасибо,

Baps.

Answer 1

TweenJS API документы говорят:

Класс Простота предоставляет набор функций для облегчения использования с TweenJS. Он не использует стандартную сигнатуру с 4 параметрами. Вместо этого он использует один параметр, который указывает текущее линейное отношение (от 0 до 1) анимации.

Custom Easing Functions вопрос/статья о GitHub, есть способ определить вашу пользовательскую функцию. Просто продолжайте и создайте свой Bezier easing function, чем преобразуйте его в линейный.

Вы получите этот вид функции Безье:

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.