TweenMax+svg实现贝塞尔曲线动画图表效果代码-html代码-BFW代码库

TweenMax+svg实现贝塞尔曲线动画图表效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现贝塞尔曲线动画图表效果代码

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

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

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

    <style>
        body,
    html {
      margin: 0;
      width: 100%;
      height: 100%;
      position: relative;
      background: #212938;
    }
    
    #parent {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%) scale(1.5);
    }
    
    .graph-grid {
      opacity: 0.6;
      stroke: #C4CCFC;
      stroke-width: 1;
      stroke-linecap: round;
    }
    
    .graph-lines {
      stroke: #EDBF6E;
      stroke-width: 2;
      stroke-linecap: round;
    }
    
    .graph-points circle,
    .graph-bezier circle {
      /*stroke: #40ACBA;*/
      stroke: #EDBF6E;
      stroke-width: 2;
      fill: #212938;
    }
    
    .graph-bezier line {
      stroke: #ED5E8F;
      stroke-width: 2;
      stroke-linecap: round;
    }
    
    h1 {
      position: fixed;
      top: 50px;
      left: 50px;
      font-family: monospace;
      font-weight: 100;
      color: #EDBF6E;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="parent"></div>
    <h1 id="lambda"></h1>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        // Amount of points:
var points = 9;
var speed = 5; // seconds

function Graph(parent) {
  this.parent = document.getElementById(parent);

  this.init = function() {
    this.parent.innerHTML = '';

    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    this.parent.appendChild(this.svg);

    this.svg.style.width = this.parent.offsetWidth;
    this.svg.style.height = this.parent.offsetHeight;

    this.svg.grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    this.svg.lines = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    this.svg.points = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    this.svg.bezier = document.createElementNS('http://www.w3.org/2000/svg', 'g');

    this.svg.grid.setAttribute('class', 'graph-grid');
    this.svg.lines.setAttribute('class', 'graph-lines');
    this.svg.points.setAttribute('class', 'graph-points');
    this.svg.bezier.setAttribute('class', 'graph-bezier')

    this.svg.appendChild(this.svg.grid);
    this.svg.appendChild(this.svg.lines);
    this.svg.appendChild(this.svg.points);
    this.svg.appendChild(this.svg.bezier);
  }
  this.points = [];
  this.lines = [];
  this.init();
}

/**
 * Create a grid based on the min/max/step values
 */
Graph.prototype.createGrid = function() {
  for (var i = 1; i < this.data.x.max; i = i + this.data.x..........完整代码请登录后点击上方下载按钮下载查看