任何方式将css3动画转换为画布动画?
问题描述:
我需要通过画布从this制作gif图像。任何方式将css3动画转换为画布动画?
有什么办法可以将css3动画转换为canvas动画吗?
我正在寻找一些很棒的文字动画,但它总是由css3制作。我只是想知道有一个简单的转换方法,或者我需要自己重写。
谢谢!
答
下面是使用HTML5画布捕捉动画转换为.gif
的使用GreenSock动画库是一个优秀的动画库,可以操作DOM元素就像CSS3动画的一种方式。
但是对你很重要,Greensock也可以动画任何javascript对象。
这意味着您可以:
-
创建基于该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); }, }
-
使用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);} } );
-
可选地触发,使用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
下面是示例代码和去莫:
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>
+0
酷!这就是我想要的。我会尝试一下,谢谢! –
你需要将它写入自己。别无退路。 –
你必须自己写。也许这概述的HTML5动画可能性有助于:[动画你的HTML5](http://animateyourhtml5.appspot.com/pres/) – lrecknagel
好的,谢谢! –