使用JQuery的KineticJS動畫

Question

我是KineticJS的新手，我很忙。 我想使用具有不透明度的簡單動畫，但是我發現似乎沒有那么“簡單”。 我閱讀了有關KineticJS動畫的文檔（關於本教程，您不會說得那么簡單）。 我想知道什么有一種簡單的方法可以使KineticJS像JQuery或JCanvaScript一樣對事物進行動畫處理？ 例如

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，它就非常簡單）

編輯：動畫的快速操作方法：

因此，如您所見，在Kinetic中，您不會像在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>