KineticJS动画与jQuery(KineticJS animation with JQuery

2019-09-21 17:09发布

我在KineticJS新的,我堆叠。 我想使用不透明一个简单的动画,但我发现没有那么“简单”,因为它似乎。 我看了一下文档与KineticJS动画 (你会不会说简单的关于本教程)。 我想知道是否有一个简单的方法来与动画像jQuery或JCanvaScript具有KineticJS东西呢? 例如

this.animate({
   opacity:0,
   x: 50
}, 500);

这样的事情?

如果没有,我们可以使用KineticJS使用jQuery做动画简单吗? 我发现这是具有非常有趣的一段代码项目:

$(logo.getCanvas()).animate({
            opacity: 1,
            top: "+=50px"
        }, 1000);

所以家伙,你有什么感想? 难道是越野车使用这种方法吗?

Answer 1:

如果你只是做你的不透明度的动画:你应该坚持的JQuery这将隐藏动画完成的计算(和你指出什么是一个很好的解决方案)。

如果你想在你的动画更加控件:去KineticJS。

通过,我想你将有更多的问题,试图使用jQuery动画和KineticJS层在同一时间,而不是只用KineticJS(和Kinetic.Animation很简单,一旦你了解如何发挥它)

编辑:快速获取为动画:

你有一个被称为在动画和所有的逻辑都被放置在它的每一帧功能的访问:所以,你可能已经看到,在动力学,你不喜欢在JQuery中得到最终的位置:

<script>
// you should have an object yourShape containing your KineticJS object.

var duration = 1000 ; // we set it to last 1s 
var anim = new Kinetic.Animation({
    func: function(frame) {
        if (frame.time >= duration) {
            anim.stop() ;
        } else {
            yourShape.setOpacity(frame.time / duration) ;
        }
    },
    node: layer
});

anim.start();
</script>


文章来源: KineticJS animation with JQuery