任何方式将css3动画转换为画布动画？

Question

我需要通过画布从this制作gif图像。

有什么办法可以将css3动画转换为canvas动画吗？

我正在寻找一些很棒的文字动画，但它总是由css3制作。我只是想知道有一个简单的转换方法，或者我需要自己重写。

谢谢！

Answer 1

下面是使用HTML5画布捕捉动画转换为.gif

的使用GreenSock动画库是一个优秀的动画库，可以操作DOM元素就像CSS3动画的一种方式。

但是对你很重要，Greensock也可以动画任何javascript对象。

这意味着您可以：

1. 创建基于该JSObject的属性在HTML5画布绘制单个动画帧一个JS对象。例如：

   // create a JSObject capable of drawing a rotating rectangle 
   var RotatingRect={ 
       cx:canvas.width/2, 
       cy:canvas.height/2, 
       w:50, 
       h:35, 
       ww:-50/2, 
       hh:-35/2, 
       rangle:0, 
       draw:function(){ 
        ctx.clearRect(0,0,cw,ch); 
        ctx.translate(this.cx,this.cy); 
        ctx.rotate(this.rangle); 
        ctx.beginPath(); 
        ctx.rect(this.ww,this.hh,this.w,this.h); 
        ctx.closePath(); 
        ctx.fill(); 
        ctx.stroke(); 
        ctx.rotate(-this.rangle); 
        ctx.translate(-this.cx,-this.cy); 
        ctx.setTransform(1,0,0,1,0,0); 
       }, 
   } 
   

2. 使用Greensock通过更改JSObject的属性来驱动动画。 然后请求重绘画布上的每个“帧”。使用GreenSock具有onUpdate事件每次使用GreenSock

   // Use Greensock to animate from RotatingRect's current angle 
   var tl=TweenLite.to(RotatingRect,5,{  
       paused:true, 
       rangle:PI2*2, 
       ease:"Quart.easeOut", 
       onUpdate:function(){this.target.draw();}, 
       onComplete:function(){log('complete',RotatingRect);} 
       } 
   ); 
   

3. 可选地触发，使用GifJS以添加新GIF帧每当使用GreenSock导致要绘制新的画布帧。

   // Add to the bottom of RotatingRect.draw() 
   // Add a GIF frame from the current canvas content 
   gif.addFrame(canvasElement); 
   

工具：

The Greensock Animation Library

The gifJS Script

The Html5 Canvas element

下面是示例代码和去莫：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
ctx.fillStyle='skyblue'; 
 
ctx.strokeStyle='lightgray'; 
 
ctx.lineWidth=3; 
 

 

 
var PI=Math.PI; 
 
var PI2=PI*2; 
 

 

 
var RotatingRect={ 
 
    cx:canvas.width/2, 
 
    cy:canvas.height/2, 
 
    w:50, 
 
    h:35, 
 
    ww:-50/2, 
 
    hh:-35/2, 
 
    rangle:0, 
 
    draw:function(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.translate(this.cx,this.cy); 
 
    ctx.rotate(this.rangle); 
 
    ctx.beginPath(); 
 
    ctx.rect(this.ww,this.hh,this.w,this.h); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
    ctx.rotate(-this.rangle); 
 
    ctx.translate(-this.cx,-this.cy); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    }, 
 
} 
 

 
// Use Greensock to animate from RotatingRect's current angle 
 
var tl=TweenLite.to(RotatingRect,5,{  
 
    paused:true, 
 
    rangle:PI2*2, 
 
    ease:"Quart.easeOut", 
 
    onUpdate:function(){this.target.draw();}, 
 
    onComplete:function(){log('complete',RotatingRect);} 
 
} 
 
        ); 
 

 

 
RotatingRect.draw(); 
 

 
$('#play').click(function(){ tl.play(); }); 
 

 
$('#replay').click(function(){ tl.restart(); });

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> 
 

 
<button id=play>Play</button> 
 
<button id=replay>Replay</button> 
 
<br><canvas id="canvas" width=300 height=300></canvas>