Question

今年访问谷歌大气的网站后，我发现了一个非常引人入胜的小功能，我想知道是否有人可以给我一个粗略的想法，如何实现盘旋气泡的动画效果，我不感兴趣除了在圆形路径中盘旋之外，他们能够做任何事情。

该网站的链接位于https://atmosphere.withgoogle.com/

如何围绕圆形路径创建一些随机移动的圆圈，以及如何实现彼此连接的圆圈的动画

Answer 1

如果您检查网站上的气泡动画，您可以看到动画正在使用HTML5画布元素来绘制和动画气泡。您可以通过多种方式实现旋转效果。下面我展示了一种在循环中动画单个圆圈的可能方法。为了实现网站的全部功能，显然需要更复杂的功能，但它应该让您对如何实现这一目标有一个基本的了解。

＆＃13;

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

var circlePosX = 40;
var circlePosY = 60;
var radius = 10
var rotationSpeed = 0.025;
var canvasCenterX = canvas.width/2;
var canvasCenterY = canvas.height/2;

// Begin Canvas Animation
window.requestAnimationFrame(drawFrame);

function drawFrame() {
    
    // Clear Canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
        
    // Draw Circle
    context.beginPath();
    context.arc(circlePosX, circlePosY, radius, 0, 2 * Math.PI, true);
    context.fillStyle = 'green';
    context.fill();
    
    // Rotate Canvas Around Center
    context.translate(canvasCenterX, canvasCenterY);
    context.rotate(rotationSpeed);
    context.translate(-canvasCenterX, -canvasCenterY);

    // Continue Animation
    window.requestAnimationFrame(drawFrame);
}

＆＃13;

<canvas id="canvas" width="200" height="150" style="border: 1px solid black" />

＆＃13;

如果您想了解更多信息，MDN上有一个很好的资源，可以使用canvas元素创建动画。这是链接：Basic animations

如何实现这种动画效果

1 个答案: