将 css3 动画转换为画布动画的任何方法

Any way to convert css3 animation to canvas animation?

本文关键字：动画任何方法布动画 css3 转换更新时间：2023-09-26

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

有没有办法将css3动画转换为画布动画？

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

谢谢！

以下是使用 html5 canvas 将动画捕获到.GIF中的一种方法

Greensock 动画库是一个优秀的动画库，可以像 CSS3 动画一样操作 DOM 元素。

但对你来说重要的是，Greensock 还可以为任何 JavaScript 对象设置动画。

这意味着您可以：

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

// 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 的属性来驱动动画。然后请求在画布上重绘每个"框架"。格林索克每次触发格林索克时都有一个onUpdate事件

// 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);

工具：

格林索克动画库

gifJS 脚本

Html5 Canvas 元素

下面是示例代码和演示：

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>