Question

我希望在我阅读了一些关于补间函数的内容之后，以类似于我在下面创建的那个方式的方式穿过我的canvas元素：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();

var line = new Kinetic.Line({
    x: 100,
    y: 100,
    points: [0, 0, 0, 0],
    stroke: '#000000'
});

layer.add(line);
stage.add(layer);

var tween = new Kinetic.Tween({
    node: line,
    duration: 3,
    x: 800,
    y: 100,
    points: [-700, 0, 800, 0]
});


setTimeout(function () {
    tween.play();
}, 2000);

最终，我希望用户能够通过单击鼠标左键来操纵线条，线条向上，向右对角线，右键单击，线条对角线向下（水平速度朝向屏幕右侧）相同）。放开鼠标按钮将导致它恢复到正常的水平运动，此时它处于屏幕上的任何“高度”。

这是我第一次尝试使用JavaScript，并且想知道我选择的方法是否适合我希望实现的目标。

此外，非常感谢任何有关如何开始使用鼠标效果的提示。

Answer 1

该方法是合适的，它可以工作，你应该看看Kinetic.Animation，这可能会给你稍微清洁的代码。通过动画，您可以将更多逻辑放入正在重新运行的代码中。我认为补间可能仅限于你想要做的事情，这是可能的，但动画可能是你正在寻找的，如果你的目标是一个好的设计。

我会阅读这份文件。 http://kineticjs.com/docs/Kinetic.Animation.html

绘制移动线JavaScript的最佳方法

1 个答案: