gsap+MorphSVGPlugin3实现划线等高线动画效果代码-html代码-BFW代码库

gsap+MorphSVGPlugin3实现划线等高线动画效果代码

代码语言：html

所属分类：其他

代码描述：gsap+MorphSVGPlugin3实现划线等高线动画效果代码，拖动鼠标按住鼠标左键拖动图形即可看到效果。

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

html, body, svg {
  width:100%;
  height:100%;
  background:#111;
  overflow:hidden;
  font-family:Roboto, sans-serif;
  font-size:20px;
}

text {
  user-select:none;
}
</style>

  
  


</head>

<body  >
  <svg class="stage" fill="none" stroke="#fff">
  <path class="path1" d="M0,0"/>
 	<path class="path2" d="M0,0"/>
  <g class="blended"></g>
  <rect width="100%" height="100%" fill="rgba(0,0,0,0)" stroke="none"/>
	<text class="dir" x="80" y="40" text-anchor="middle" stroke="none" fill="#fff">Draw 2 Paths</text>  
</svg>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
      <script type="module">
console.clear()

import { spline, pointsInPath } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";

const blendSteps = 25,
      precision = 99,
      stage = document.querySelector('.stage'),
      path1 = document.querySelector('.path1'),
      path2 = document.querySelector('.path2'),
      blended = document.querySelector('.blended')

let mx,
    my,
    currentPath = document.querySelector('.path1'),
    nPts = 0,
    drawn = 0

function setM(e){
  mx = e.clientX
  my = e.clientY
}

stage.addEventListener('pointerdown', handleDown)

function handleDown(e){
  setM(e)
  window.addEventListener('pointermove', setM)
  stage.addEventListener('pointerup', handleUp)
  stage.addEventListener('mouseleave', handleOut)
  gsap.set(currentPath,{attr:{d:'M'+mx+','+my}})
  addPt(true)
}

function handleOut(){
  stage.removeEventListener('pointerup', handleUp)
  handleUp()
}

function handleUp(){
  gsap.killTweensOf(addPt).........完整代码请登录后点击上方下载按钮下载查看