如何在动画画布上线(How to animate a line in canvas)

我试图用动画画布上线。我想用TimelineLite来处理动画。我会怎么做呢？我知道，在TimelineLite的时间表是这样的：

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

该点在JSON文件存在，该文件被正确地被带到与AJAX。我希望线条在点X1和Y1开始，保持X2，作为相同的值，并以动画的Y2位置。所以我基本上希望它从X1，Y1增长到X2-Y2。

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
    }
]

所以我的问题是一个真正的多部分之一。我该如何去使用动画画布上线？如何动画基于该行name在animateLine()函数？

Answer 1:

TimelineLite使用element来变换元素的目标价值。

你可以看变换使用的更新进度onUpdate基于该值随着时间的推移和动画您的线路。

timeline.eventCallback('onUpdate',function(data){
    var progress = this.progress();
    // Do animation calls here!
});

这里是一个工作示例代码片段

我的时间表期间转变画布不透明度和动画的画布。

 var timeline = new TimelineLite(); var mainCanvas = document.getElementById("ctx"); var ctx = mainCanvas.getContext("2d"); var temp = document.createElement('div'); var animated_lines = [{ "name": "Red", "stroke": "#ff0000", "width": 3, "x1": 50, "y1": 50, "x2": 100, "y2": 100 },{ "name": "Green", "stroke": "#00ff00", "width": 2, "x1": 50, "y1": 20, "x2": 100, "y2": 100 }]; function createLine(line, progress) { ctx.lineWidth = line.width; ctx.strokeStyle = line.stroke; ctx.beginPath(); ctx.moveTo(line.x1, line.y1); ctx.lineTo(line.x2, line.y2*progress); ctx.stroke(); } console.log('ctx', ctx); timeline.from('#ctx', 10, { opacity: 0 }); timeline.eventCallback('onUpdate',function(){ var progress = this.progress(); //console.log(progress); ctx.clearRect ( 0 , 0 , mainCanvas.width, mainCanvas.height ); for (var i = 0; i < animated_lines.length; i++) { createLine(animated_lines[i], progress); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <canvas id="ctx" />

Answer 2:

是这个你正在寻找生产或类似的东西的那种效果呢？

其中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();

关键是要引进两个新的变量到您的每一行 animatedLines ，即destX和destY ，并设置其初始值，你的x1和y1分别下定义initLines(); 功能。然后让他们对你增加x2和y2使用值TimelineMax这发生在populateTimeline(); 功能。