css3动画如何使三张图片围饶一个圆在运动
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3动画如何使三张图片围饶一个圆在运动相关的知识,希望对你有一定的参考价值。
参考技术A 这个是利用 transform:rotate(); 设置旋转,旋转多少度决定圈数,时间和平缓度(变化模式)在动画里设置,另外你要设置一下你的旋转中心,把旋转中心设置到你规定的圆的圆心(transform-origin)。这样就可以让它们围绕这个中心点旋转了。Javascript画布动画(棒图运动)
我一直在寻找一个地方来展示如何做动画。我已经看到你可以将积木移动到一个区域并向后移动,一个圆圈上下移动,但没有任何东西可以移动他的身体。我使用css动画,但想尝试javascript画布。这个数字有什么方法可以在Canvas上挥动动画吗?我假设需要setTimeout?
<canvas id="canvas" width="400px" height="400px" >
Your browser does not support HTML5 Canvas element
</canvas>
<script>
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200.width, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
context.moveTo(200, 100);
context.lineTo(250, 130);
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
</script>
答案
首先,由于我们要反复绘制一个框架,我们需要将绘图代码放入draw function
。
在Window对象上有一个名为requestAnimationFrame
的方法,只要它可用,它就会一直调用这个draw
函数。这可以防止窗口耗尽所有内存,如果在动画运行时翻转标签,则会暂停动画。 setTimeout
和setInterval
过去常用于此,但不再使用它们。
由于所有发生的事情都是draw
函数一直被调用,为了只定期更改图形,我们设置一个变量(在这种情况下称为wave
),它决定了手臂的绘制方式。
timestamp
用于确定自调用draw
时最后一次绘制以来是否已经过了900毫秒。如果还没有我们继续调用该函数,直到该持续时间已经过去。通常我们希望这更快,但由于我们使用'wave'作为示例,我们只有两个绘图状态(向上或向下),它工作正常。
let timestamp = Date.now();
let wave = false;
draw();
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
let timestamp = Date.now();
let wave = false;
draw();
function draw() {
if(Date.now() < (timestamp+900)) return requestAnimationFrame(draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if(wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
timestamp = Date.now();
requestAnimationFrame(draw);
}
<canvas id="canvas" width="400px" height="400px" >
Your browser does not support HTML5 Canvas element
</canvas>
以上是关于css3动画如何使三张图片围饶一个圆在运动的主要内容,如果未能解决你的问题,请参考以下文章