KineticJS缓和

Question

我在KineticJS中创建了一个形状，我用补间动画它。

    var tween = new Kinetic.Tween({
         node: rect, 
         duration: 1,
         easing: Kinetic.Easings.BackEaseOut,
         y: 100
    });

反向期间是否可以更改宽松？

目前我已经这样做了：JSFiddle

非常感谢你的帮助。

Answer 1

这似乎有用......但这不是真正的核心功能......

stage.on('mouseover', function() {
    tween.tween.func = Kinetic.Easings.BounceEaseOut;
    tween.play();
});

stage.on('mouseout', function() {
    tween.tween.func = Kinetic.Easings.BounceEaseIn;
    tween.reverse();
});

Answer 2

您可以使用

创建自定义缓动功能 Easing Functions Generator

Robert Penner

并使用它而不是默认的缓动预设：

// generated example 
var customEasingFunction = function(t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(63.2425*tc*ts + -185.23*ts*ts + 198.58*tc + -93.89*ts + 18.2975*t);
};

var tween = new Kinetic.Tween({
     node: rect, 
     duration: 1,
     easing: customEasingFunction, // use it insead of default preset
     y: 100
});