发表新帖
发表新帖

HTML5 / js - how to animate straight line between two coordinates?

前端 未结
关注
5 2258
你的背包
你的背包 2021-02-07 23:37

Simple enough question (could be wrong)

im looking to animate between two points in a straight line, using HTML5 and/or Jquery.

ctx.beginPath();
ctx.mov
相关标签:
5条回答
  • 春和景丽
    2021-02-07 23:43

    You could use a linear interpolation or lerp. Something like this. Here is an example on jsfiddle: http://jsfiddle.net/UtmTh/ and here is the main code:

    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);​
    0 讨论(0)
  • 生来不讨喜
    2021-02-07 23:43

    This works for me :

    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();
    0 讨论(0)
  • 孤独总比滥情好
    2021-02-07 23:48

    Give this a try, not sure if it is what you are after, can explain anything you are not sure of:

    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

    -- Andy

    0 讨论(0)
  • 悲&欢浪女
    2021-02-07 23:55

    You should check this out : http://paulirish.com/2011/requestanimationframe-for-smart-animating/ it is fairly easy to do, after reading it you should be able to do it! There is also an example.

    0 讨论(0)
  • 死守一世寂寞
    2021-02-08 00:02

    Thanks valli-R and Zevan,

    I've coded an amalgam of your two answers which uses lerp with requestAnimFrame

    http://jsbin.com/enobes/6

    0 讨论(0)
 看不清?
提交回复
热议问题