TweenMax+ModifiersPlugin实现多彩svg粒子线条游动动画效果代码-html代码-BFW代码库

TweenMax+ModifiersPlugin实现多彩svg粒子线条游动动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+ModifiersPlugin实现多彩svg粒子线条游动动画效果代码

代码标签： TweenMax ModifiersPlugin svg 多彩粒子线条游动动画

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          overflow: hidden;
        }
        
        svg {
          position: absolute;
          width: 400px;
          height: 400px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        line {
          stroke-width: 2.5;
        }
    </style>



</head>

<body>
    <svg></svg>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ModifiersPlugin.js"></script>
    <script>
        TweenLite.defaultEase = Linear.easeNone;
        
        var cx = 200;
        var cy = 200;
        
        var svgns = "http://www.w3.org/2000/svg";
        var root  = document.querySelector("svg");
        var twoPi = Math.PI * 2;
        var ease  = 0.35;
        var total = 25;
        
        var colors = ["#EA4335", "#FBBC05", "#34A853", "#4285F4"];
        
        colors.forEach(function(color) {
          
          var leader = createPoint(color);
          
          var i = total;  
          while (i--) {
            var alpha = (i + 1) / total;
            leader = createLine(leader, alpha, color);
          }
        });
        
        TweenLite.from("line, circle", 1.5, { alpha: 0 });
        
        function createPoint(fill) {
          
          var circle = document.createElementNS(svgns, "circle");
          root.appendChild(circle);
          
          var radius = random(75, 125);
          
          TweenLite.set(circle, {
            attr: { r: 2.5, fill: fill },
   .........完整代码请登录后点击上方下载按钮下载查看