gsap实现canvas彩虹死亡球动画效果代码-html代码-BFW代码库

gsap实现canvas彩虹死亡球动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现canvas彩虹死亡球动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
</head>

<body >
  <style>
  body {
    margin: 0;
  }
</style>
<canvas></canvas>


  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
      <script >
// code required to setup canvas
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

// class design
class Ball {
  constructor({ position, velocity, angle, distance, color }) {
    this.position = position;
    this.velocity = velocity;
    this.angle = angle;
    this.distance = distance;

    // step 4 - animate each ball's distance from center of canvas
    // here gsap animates the distance down to 50, then repeats the process forever.
    // Distance is used within update() to determine ring's overall radius
    gsap.to(this, {
      distance: -50,
      yoyo: true,
      repeat: -1,
      duration: 1,
      ease: 'power4.inOut' });


    this.color = color;
  }

  draw() {
    c.fillStyle = this.color;
    c.beginPath();
    c.arc(this.position.x, this.position.y, 10, 0, Math.PI * 2, false);
    c.closePath();
    c.fill();
  }

  update() {
    this.draw();
    this.angle += 0.01;

    // step 3 - animate ring clockwise by incrementing angle and setting new x and y positions
    this.position.x = canvas.width / 2 + Math.cos(this.angle) * this.distance;
    this.position.y = canv.........完整代码请登录后点击上方下载按钮下载查看