two实现圆点转动动画效果代码-html代码-BFW代码库

two实现圆点转动动画效果代码

代码语言：html

所属分类：动画

代码描述：two实现圆点转动动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: #161E21;
  height: 100vh;
  width: 100vw;
  position: relative;
}

#assets {
  display: none;
}

#demo {
  width: 100%;
  height: 100%;
  overflow: visible;
  margin: auto;
  position: absolute;
  left: 100%;
  top: 100%;
}

.dot {
  position: absolute;
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
</style>



</head>

<body>
  <div id="assets"></div>
<div id="demo"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/two.min.js"></script>
      <script>
(function() {

  var assets = document.body.children[0],
    demo = document.body.children[1],
    two = new Two().appendTo(assets);

  var k, r = 30,
    numRings = 20,
    multiplier = r,
    circleGroup = two.makeGroup(),
    colors,
    dotGroups = [];

  for (k = 0; k < numRings; k++) {
    circleGroup.add(two.makeCircle(0, 0, r).subdivide(12));
    r += multiplier;
  }

  var H = demo.getClientRects()[0].height,
    W = demo.getClientRects()[0].width;

  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    smoothChidTiming: false
  });

  TweenMax.set(demo, {
    xPercent: -50,
    yPercent: -50
  });

  var startingColor = '#a7d957';

  var c = tinycolor(startingColor).analogous(numRings, 7);
  colors = c.map(function(t) {
    return t.toHexString();
  });

  // calculating the coordinates for each circle path and iterating through each collectio.........完整代码请登录后点击上方下载按钮下载查看