Two.js实现圆点在蚊香形曲线移动动画效果代码-html代码-BFW代码库

Two.js实现圆点在蚊香形曲线移动动画效果代码

代码语言：html

所属分类：动画

代码描述：Two.js实现圆点在蚊香形曲线移动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



</head>

<body>


    <script type="module">
       
       import Two from 'https://cdn.skypack.dev/two.js@0.7.8';

var two = new Two({
  type: Two.Types.svg,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

var amt = 64;

two.renderer.domElement.style.background = 'rgb(0, 191, 168)';

var points = [];
for (var i = 0; i < amt; i++) {
  var pct = i / (amt - 1);
    var theta = pct * Math.PI * 8;
    var r = pct * Math.min(two.height, two.width);
    var x = r * Math.cos(theta);
    var y = r * Math.sin(theta);
    points.push(new Two.Anchor(x, y));
}
var path = two.makeCurve(points, true);

path.noFill().linewidth = 25;
path.cap = path.join = 'round';
path.stroke = 'white';

var cursor = two.makeCircle(0, 0, 25);
cursor.fill = cursor.stroke = 'rgb(255, 100, 100)';
cursor.linewidth = 10;
cursor.cap = cursor.join =.........完整代码请登录后点击上方下载按钮下载查看