gsap+svg实现苹果keynote绘制apple图标动画效果代码-html代码-BFW代码库

gsap+svg实现苹果keynote绘制apple图标动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现苹果keynote绘制apple图标动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
svg {
  width: 80vmin;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  transition: 0.15s ease-out;
}
svg:hover {
  opacity: 1;
}

body {
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
}

canvas {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
}
</style>



</head>

<body >
  <canvas></canvas>
<svg viewBox="0 0 400 488">
  <path d="m 376.3299,351.06186 c 4.45361,47.0103 -51.46392,124.20619 -127.17526,105.40206 -75.71134,-18.80413 9.89692,-176.65979 69.7732,-140.53608 59.87628,36.12371 -80.02665,144.51868 -165.7732,140.53608 -51.44793,-2.38956 -95.0103,-28.70103 -80.65979,-101.4433 14.35051,-72.74227 207.83505,-255.3402 264.24742,-194.96907 56.41237,60.37113 -171.71134,177.15461 -229.60825,173.6907 -57.89691,-3.46391 -114.55671,-62.35051 -65.31959,-137.567 49.23712,-75.21649 131.76348,-45.721 131.76348,-45.721" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
  <path d="M207.83505,122.567C243.83505,117 308.04124,69.98969 288.24742,21.49485C215.62887,21.49485 199.858,109.20619 203.01031,131.84536" fill="none" stroke="#4F7FFF" stroke-linecap="round" stroke-width="2" />
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
      <script >
console.clear();

const canvas = document.querySelector('canvas');
const svg = document.querySelector('svg');
const ctx = canvas.getContext('2d');
let width = svg.clientWidth;
let height = svg.clientHeight;

canvas.width = width;
canvas.height = height;

const gradients = [
[
[0, [118, 179, 236]],
[10, [41, 102, 193]],
[20, [129, 77, 185]],
[30, [129, 77, 185]],
[50, [250, 148, 170]],
[60, [237, 70, 54]],
[70, [253, 134, 100]],
[80, [254, 156, 33]],
[90, [250, 213, 0]],
[100, [171, 211, 96]]],

[
[0, [1, 123, 147]],
[100, [131, 201, 167]]]];



const dots = [];
class Dot {
  constructor(x, y, color, delay) {
    this.x = x;
    this.y = y;
    this.r = 0;
    this.color = color;
    this.delay = delay * 0.9;
    this.tween = gsap.fromTo(this, {
      r: 0,
      x: x - 0.05,
      y: y - 0.05 },
    {
      x: x,
      y: y,
      r: () => width * 0.03 + Math.abs(Math.sin(this.delay * 3.4 - 1.5)) * width * 0.02,
      duration: 1.8,
      ease: 'elastic.out(1, 0.5)',
      delay: this.delay });

  .........完整代码请登录后点击上方下载按钮下载查看