Question

简单的问题（可能是错的）

我希望使用HTML5和/或Jquery在直线上的两个点之间设置动画。

ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();

http://jsbin.com/enobes

编辑：我正在为路径动画http://lazylinepainter.info/

开发的jquery插件

example

Answer 1

您可以使用线性插值或lerp。像这样的东西。以下是jsfiddle的一个示例：http://jsfiddle.net/UtmTh/，这里是主要代码：

var canvas = $("#paper")[0];
var c = canvas.getContext("2d");

var startX = 50;
var startY = 50;
var endX = 100;
var endY = 100;
var amount = 0;
setInterval(function() {
    amount += 0.05; // change to alter duration
    if (amount > 1) amount = 1;
    c.clearRect(0, 0, canvas.width, canvas.height);
    c.strokeStyle = "black";
    c.moveTo(startX, startY);
    // lerp : a  + (b - a) * f
    c.lineTo(startX + (endX - startX) * amount, 
             startY + (endY - startY) * amount);
    c.stroke();
}, 30);

Answer 2

你应该检查一下：http://paulirish.com/2011/requestanimationframe-for-smart-animating/这很容易做到，读完之后你应该可以做到！还有一个例子。

Answer 3

感谢valli-R和Zevan，

我编写了你的两个答案的混合物，它使用lerp和requestAnimFrame

http://jsbin.com/enobes/6

Answer 4

这对我有用：

HTML：

<html>
<head>
</head>
<body>
    <canvas id="canvas">
    </canvas>
</body>
</html>

JS：

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0); // a
ctx.lineTo(100, 100); // b
ctx.stroke();

Answer 5

尝试一下，不确定它是否是您所追求的，可以解释您不确定的任何内容：

var frame = function () { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
        return window.requestAnimationFrame  ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function (callback) {
            window.setTimeout(function () {
              callback(+new Date())
            }, 10)
          }
      }()

var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");

var easeing = {bouncePast: function (pos) {  //just a sample to show easing
                if (pos < (1 / 2.75)) {
                  return (7.5625 * pos * pos);
                } else if (pos < (2 / 2.75)) {
                  return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
                } else if (pos < (2.5 / 2.75)) {
                  return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
                } else {
                  return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
                }
              } }

function animate(x1,y1,x2,y2, duration, ease) {  //your main animation loop
    var start = +new Date();
    frame(run);
    function run(t) {
        var delta =t - start;
        var pos = delta/duration;
        if (delta <= duration) {
             draw(x1,y1,x2,y2, ease, pos)
             frame(run)
        }
    }   
}

function draw(x1,y1,x2,y2,ease, pos) {  //does the drawing
    var easepos= ease(pos)
    canvas.width = canvas.width;
    ctx.strokeStyle = "black";
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + (x2 - x1) * easepos, y1+ (y2- y1) * easepos);
    ctx.stroke();            
}

animate(10,10,150,100, 2000, easeing.bouncePast)

http://jsfiddle.net/fqtGb/2/ - ＆gt;演示

- 安迪

HTML5 / js - 如何在两个坐标之间设置直线动画？

5 个答案: