gsap+p5实现堆叠立体动画效果代码-html代码-BFW代码库

gsap+p5实现堆叠立体动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+p5实现堆叠立体动画效果代码

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

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

<head>

    <meta charset="UTF-8">



    <style>
        body {
          margin: 0;
          overflow: hidden;
        }
        
        p {
          position: fixed;
          left: 0;
          width: 100%;
          bottom: 1vh;
          text-align: center;
        }
    </style>




</head>

<body>
    <p>Click to toggle clipping (Clipping Enabled)</p>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
    <script id="rendered-js">
        const tween = { angle: 1 };
    function setup() {
      createCanvas(windowWidth, windowHeight);
      stroke(255);
      colorMode(HSL);
      
      gsap.to(tween, {
        angle: TWO_PI,
        duration: 3,
        ease: 'power1.inOut',
        yoyo: true,
        repeat: -1,
        repeatDelay: 0.5
      });
    }
    
    function draw() {
      drawingContext.restore();
      clear();
      const r = min(width, height) * 0.35;
      /* Top part */
      if (clipping) {
        drawingContext.restore();
        drawingContext.save();
        drawingC.........完整代码请登录后点击上方下载按钮下载查看