gsap+MotionPathPlugin实现方圆连线动画效果代码-html代码-BFW代码库

gsap+MotionPathPlugin实现方圆连线动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+MotionPathPlugin实现方圆连线动画效果代码，有点像圆形的圆球摆动形成正方形。

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

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

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

  
  
  
<style>
body {
 background-color: #0e0f19;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}
</style>


  
</head>

<body>
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
	<g class="node">
	<circle class="inner" cx="0" cy="0" r="4" fill="#faa81d" />
	<circle class="outer" cx="0" cy="0" r="6" fill="#faa81d" />
	<line class="connector" x1="0" y1="0" x2="0" y2="0" stroke="#2c98bc" stroke-wdith="1" />
	<circle class="circlePath" cx="0" cy="0" r="20" stroke-width="0" stroke="blue" fill="none" />
		</g>
	</defs>
	
	<g id="container" />
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.min.js"></script>
      <script >
MotionPathPlugin.convertToPath('.circlePath')
gsap.config({trialWarn: false});
let select = s => document.querySelector(s),
		toArray = s => gsap.utils.toArray(s),
		mainSVG = select('#mainSVG'),
		num = 36,
		container = select('#container'),
		inner = select('.inner&.........完整代码请登录后点击上方下载按钮下载查看