html - HTML 5 Canvas - 实现每个按钮的平滑滚动

Question

我已经用谷歌搜索了一段时间，但我找不到解决我问题的好方法。

我有一个包含多个图像的画布。通过“左”和“右”按钮，我想平滑地水平滚动这些图像。我想一定有一种方法可以设置画布的焦点。我试过translate哪个效果很好，但我不想“跳”到下一部分，我想要一个平滑的滚动......

有任何想法吗？

Answer 1

对于画布中的平滑动画，您需要使用该requestAnimationFrame方法（http://paulirish.com/2011/requestanimationframe-for-smart-animating/）

Answer 2

我认为这是Greensock JS 补间库的工作。它可以补间您可以公开的任何对象的任何属性。

文档非常好，那里有很多资源可以帮助您入门。您还可以在论坛上询问有关您要做什么的问题。

我TweenMax多年来一直是一名 Flash 开发人员，现在我开始在 JS 开发中使用它。

根据@devnull69 的回答，它还利用requestAnimationFrame.

Answer 3

好的，最后我找到了一种方法......虽然很基本。

function animate() {

draw();

if(globalVar<300){
    globalVar++;
    setTimeout("animate();", 100);
} }