logo标签列表

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

jqueryhtml
13

这是一个非常简单的问题（可能我理解错了）

我想要使用HTML5和/或JQuery在一条直线上动画显示两个点之间的过渡效果。

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

http://jsbin.com/enobes

编辑：我最终开发了一个用于 SVG 路径动画的库 http://lazylinepainter.info/

example

你想用“animate”表达什么意思？ - David Rodrigues
我会画一个图表...等一下。 - Cam
你需要绘制n条不同的线段，每一条比上一条更长，通过重新绘制画布来实现平滑效果。平滑度来自于每次重绘时高度的差异。 - Ben
1
这个解决方案不适用于曲线，对吧？你有什么想法可以解决这个问题吗？ - Roozbeh15
嗨Roozbeh，看看这个网站http://lazylinepainter.info/。 - Cam
5个回答
17
你可以使用线性插值或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);​
2
2

感谢valli-R和Zevan，

我编写了一个综合你们两个答案的代码，使用requestAnimFrame和lerp。

http://jsbin.com/enobes/6

0
这对我有用：
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();
是的，这划定了线条，但没有在两点之间进行动画... http://jsbin.com/enobes/ 如果我能设置时间和缓动方程式就太理想了。 - Cam
0

可以试试这个，不确定是否符合您的要求，如果有任何不明白的地方可以解释一下：

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/ -> 演示

-- 安迪

谢谢Andy，我成功地将我的答案推进了一步http://jsbin.com/enobes/6，添加了一个cancelRequestAnimFrame函数-http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html。像你添加缓动一样，我也会尝试包含它！ - Cam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接