js实现动态画圆

使用Canvas绘制动态圆

在HTML中创建Canvas元素并获取其上下文：

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript代码实现动态画圆：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let radius = 0;
const maxRadius = 100;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

function drawCircle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 3;
    ctx.stroke();

    radius += 1;
    if (radius <= maxRadius) {
        requestAnimationFrame(drawCircle);
    }
}

drawCircle();

使用SVG实现动态圆

HTML中创建SVG容器：

<svg id="svgContainer" width="400" height="400"></svg>

JavaScript动态创建和动画SVG圆：

const svg = document.getElementById('svgContainer');
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

let currentRadius = 0;
const maxRadius = 100;
const centerX = 200;
const centerY = 200;

circle.setAttribute('cx', centerX);
circle.setAttribute('cy', centerY);
circle.setAttribute('r', currentRadius);
circle.setAttribute('stroke', 'red');
circle.setAttribute('fill', 'none');
circle.setAttribute('stroke-width', '3');

svg.appendChild(circle);

function animateSVGCircle() {
    currentRadius += 1;
    circle.setAttribute('r', currentRadius);

    if (currentRadius < maxRadius) {
        requestAnimationFrame(animateSVGCircle);
    }
}

animateSVGCircle();

使用CSS动画结合JavaScript

HTML结构：

<div id="cssCircle"></div>

CSS样式：

#cssCircle {
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 3px solid green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript控制动画：

const circle = document.getElementById('cssCircle');
let size = 0;
const maxSize = 200;

function growCircle() {
    size += 2;
    circle.style.width = size + 'px';
    circle.style.height = size + 'px';

    if (size < maxSize) {
        requestAnimationFrame(growCircle);
    }
}

growCircle();

使用GSAP库实现高级动画

引入GSAP库后：

gsap.to("#gsapCircle", {
    duration: 2,
    attr: {
        r: 100
    },
    ease: "bounce.out"
});

HTML结构：

<svg width="400" height="400">
    <circle id="gsapCircle" cx="200" cy="200" r="0" stroke="purple" stroke-width="3" fill="none"/>
</svg>