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

代码语言：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.step) {
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', String(this.ratio('y') * i));
    line.setAttribute('y1', String(this.parent.offsetHeight));
    line.setAttribute('x2', String(this.ratio('y') * i));
    line.setAttribute('y2', String(0));
    this.svg.grid.appendChild(line);
  }

  for (var i = 1; i < this.data.y.max; i = i + this.data.y.step) {
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', String(0));
    line.setAttribute('y1', String(this.ratio('x') * i));
    line.setAttribute('x2', String(this.parent.offsetWidth));
    line.setAttribute('y2', String(this.ratio('x') * i));
    this.svg.grid.appendChild(line);
  }
}

/**
 * Import data in the graph
 * @param data
 */
Graph.prototype.importData = function(data) {
  this.data = data;
}

/**
 * Add new point with options
 * @param options
 */
Graph.prototype.addPoint = function(options) {
  var point = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  for (var key in options) {
    point.setAttribute(key, options[key]);
  }
  this.points.push(options);
  this.svg.points.appendChild(point);
}

/**
 * Add new point with options
 * @param options
 */
Graph.prototype.addBezierPoint = function(options) {
  var point .........完整代码请登录后点击上方下载按钮下载查看