HTML5/js - как оживить прямую линию между двумя координатами?

Достаточно простой вопрос (может быть, не так)

im ищет анимацию между двумя точками в прямой линии, используя HTML5 и/или JQuery.

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

http://jsbin.com/enobes

EDIT: плагин jquery, который я разрабатываю для анимации пути http://lazylinepainter.info/

Ответ 1

Спасибо valli-R и Zevan,

Я закодировал амальгаму ваших двух ответов, которые используют lerp с requestAnimFrame

http://jsbin.com/enobes/6

Ответ 2

Вы можете использовать линейную интерполяцию или 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);

Ответ 3

Вы должны это проверить: http://paulirish.com/2011/requestanimationframe-for-smart-animating/, это довольно легко сделать, после прочтения вы сможете это сделать! Также есть пример.

Ответ 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();

Ответ 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/ → demo

- Энди