如何在canvas中动画一行 [英] How to animate a line in canvas

问题描述

我想使用画布来动画一行。我想使用TimelineLite来处理动画。我该怎么做？我知道在TimelineLite，时间线看起来像这样：

I am trying to animate a line using canvas. I want to use TimelineLite to handle the animation. How would I do this? I know that in TimelineLite, the Timelines look like this:

var timeline = new TimelineLite();
timeline.to(target, duration, vars, position);

这些点存在于JSON文件中，文件正确地使用AJAX。我想要的线从点x1& y1，保持x2，作为相同的值，并将其动画化到y2位置。因此，我基本上希望它从x1-y1增长到x2-y2。

The points exist in a JSON file, and the file is correctly being brought in with AJAX. I want the line to start at the points x1 & y1, keep x2, as the same value, and animate it to the y2 position. So I basically want it to grow from x1-y1 to x2-y2.

JS

function animateLines(name, stroke, width, x1, y1, x2, y2){
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineWidth = width;
    ctx.strokeStyle = stroke;
    ctx.stroke;
    console.log(x2);
}

for(var i = 0; i < animated_lines.length; i++){
    animateLines(animated_lines[i].name, animated_lines[i].stroke, animated_lines[i].width, animated_lines[i].x1, animated_lines[i].y1, animated_lines[i].x2, animated_lines[i].y2);
}

JSON

"animated_lines": [
    {
        "name": "Test",
        "stroke": "red",
        "width": 3,
        "x1": 0,
        "y1": 0,
        "x2": 0,
        "y2": 50
    }
]

所以我的问题真的是一个多部分的。我如何使用画布动画线条？如何根据 animateLine（）函数中的名称动画线条？

So my question is really a multi-part one. How do I go about animating the line using canvas? How do I animate the line based on the name in the animateLine() function?

推荐答案

是这

JS的效果如下：

var width,height,centerX,centerY,canvas,context;
var delayFactor=.06,duration=1.2,ease=Elastic.easeOut,destIncrement=200,strokeWidth=2;
var timeline=new TimelineMax({paused:true,repeat:-1,yoyo:true,repeatDelay:duration*.5});
var animatedLines=[
    {name:'Test',stroke:'red',width:strokeWidth,x1:0,y1:0,x2:0,y2:destIncrement},
    {name:'Test',stroke:'green',width:strokeWidth,x1:0,y1:0,x2:destIncrement*.5,y2:destIncrement*.5},
    {name:'Test',stroke:'blue',width:strokeWidth,x1:0,y1:0,x2:destIncrement,y2:0},
    {name:'Test',stroke:'red',width:strokeWidth,x1:0,y1:0,x2:destIncrement*.5,y2:-destIncrement*.5},
    {name:'Test',stroke:'green',width:strokeWidth,x1:0,y1:0,x2:0,y2:-destIncrement},
    {name:'Test',stroke:'blue',width:strokeWidth,x1:0,y1:0,x2:-destIncrement*.5,y2:-destIncrement*.5},
    {name:'Test',stroke:'red',width:strokeWidth,x1:0,y1:0,x2:-destIncrement,y2:0},
    {name:'Test',stroke:'green',width:strokeWidth,x1:0,y1:0,x2:-destIncrement*.5,y2:destIncrement*.5}
];
function init(){
    initCanvas();
    initLines();
    populateTimeline();
    timeline.play();
    TweenLite.ticker.addEventListener('tick',render);
}
function populateTimeline(){
    var length=animatedLines.length,currentLine;
    for(var i=0; i<length; i+=1){
        currentLine=animatedLines[i];
        timeline.to(currentLine,duration,{destX:currentLine.x2,destY:currentLine.y2,ease:ease},i*delayFactor);
    }
}
function initLines(){
    var length=animatedLines.length,currentLine;
    for(var i=0; i<length; i+=1){
        currentLine=animatedLines[i];
        currentLine.destX=currentLine.x1;
        currentLine.destY=currentLine.y1;
    }
}
function initCanvas(){
    canvas=document.querySelector('canvas');
    context=canvas.getContext('2d');
    width=canvas.width=window.innerWidth;
    height=canvas.height=window.innerHeight;
    centerX=width*.5;
    centerY=height*.5;
}
function drawLine(currentLine){
    context.lineWidth=currentLine.width;
    context.strokeStyle=currentLine.stroke;
    context.beginPath();
    context.moveTo(centerX+currentLine.x1,centerY+currentLine.y1);
    context.lineTo(centerX+currentLine.destX,centerY+currentLine.destY);
    context.stroke();
}
function render(){
    var length=animatedLines.length;
    context.clearRect(0,0,width,height);
    for(var i=0; i<length; i+=1){ drawLine(animatedLines[i]); }
}
init();

诀窍是将两个新变量引入 code> animatedLines ，即 destX 和 destY ，并设置其初始值分别定义在 initLines（）; c>下的 x1 和 y1 code>函数。然后使用 TimelineMax x2 和 y2 c>这发生在 populateTimeline（）; 函数中。

The trick is to introduce two new variables into each Line of your animatedLines, namely destX and destY, and set their initial values to that of your x1 and y1 respectively, defined under the initLines(); function. And then make them increment towards your x2 and y2 values using TimelineMax which happens in the populateTimeline(); function.

继续看看 jsFiddle 进一步。

Hope这对你有所帮助。

Hope this is helpful to you in some way.

这篇关于如何在canvas中动画一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！