Vue：vue中使用TweenLite

1、 TweenLite介绍：

TweenLite最初是GreenSock公司推出的一款基于ActionScript的免费开源的缓动引擎，是webgame开发人员比较常用的一个动画库，使用TweenLite能够简化动画制作的代码编写工作。

2、使用方法：

2.1、安装TweenLite依赖gsap：

npm install gsap

2.2、使用TweenLite实例：

记得在<script>中引入依赖import TweenLite from 'gsap'，否则会报错 http://eslint.org/docs/rules/no-undef  'TweenLite' is not defined

<template>
  <div id="app">
    <svg
      width="200"
      height="200"
    >
      <!-- <polygon>标签用来创建含有不少于三个边的图形;points 属性定义多边形每个角的x和y坐标 -->
      <polygon :points="points"></polygon>
      <!-- <circle>标签可用来创建一个圆,cx和cy属性定义圆点的x和y坐标,r属性定义圆的半径-->
      <circle
        cx="100"
        cy="100"
        r="90"
      ></circle>
    </svg>
    <label>Sides: {{ sides }}</label>
    <input
      type="range"
      min="3"
      max="500"
      style="width:200px"
      v-model.number="sides"
    >
    <label>Minimum Radius: {{ minRadius }}%</label>
    <input
      type="range"
      min="0"
      max="90"
      style="width:200px"
      v-model.number="minRadius"
    >
    <label>Update Interval: {{ updateInterval }} milliseconds</label>
    <input
      type="range"
      min="10"
      max="2000"
      style="width:200px"
      v-model.number="updateInterval"
    >
  </div>
</template>
<script type="text/javascript">
import TweenLite from 'gsap'

export default {
  name: 'demo0906',
  data: function () {
    var defaultSides = 10
    var stats = Array.apply(null, { length: defaultSides })
      .map(function () { return 100 })
    return {
      stats: stats,
      points: generatePoints(stats),
      sides: defaultSides,
      minRadius: 50,
      interval: null,
      updateInterval: 500
    }
  },
  watch: {
    sides: function (newSides, oldSides) {
      var sidesDifference = newSides - oldSides
      if (sidesDifference > 0) {
        for (var i = 1; i <= sidesDifference; i++) {
          this.stats.push(this.newRandomValue())
        }
      } else {
        var absoluteSidesDifference = Math.abs(sidesDifference)
        for (var k = 1; k <= absoluteSidesDifference; k++) {
          this.stats.shift()
        }
      }
    },
    stats: function (newStats) {
      TweenLite.to(
        this.$data,
        this.updateInterval / 1000,
        { points: generatePoints(newStats) }
      )
    },
    updateInterval: function () {
      this.resetInterval()
    }
  },
  mounted: function () {
    this.resetInterval()
  },
  methods: {
    randomizeStats: function () {
      var vm = this
      this.stats = this.stats.map(function () {
        return vm.newRandomValue()
      })
    },
    newRandomValue: function () {
      return Math.ceil(this.minRadius + Math.random() * (100 - this.minRadius))
    },
    resetInterval: function () {
      var vm = this
      clearInterval(this.interval)
      this.randomizeStats()
      this.interval = setInterval(function () {
        vm.randomizeStats()
      }, this.updateInterval)
    }
  }
}

function valueToPoint (value, index, total) {
  var x = 0
  var y = -value * 0.9
  var angle = Math.PI * 2 / total * index
  var cos = Math.cos(angle)
  var sin = Math.sin(angle)
  var tx = x * cos - y * sin + 100
  var ty = x * sin + y * cos + 100
  return { x: tx, y: ty }
}

function generatePoints (stats) {
  var total = stats.length
  return stats.map(function (stat, index) {
    var point = valueToPoint(stat, index, total)
    return point.x + ',' + point.y
  }).join(' ')
}
</script>

<style>
svg {
  display: block;
}
polygon {
  fill: #41b883;
}
circle {
  fill: transparent;
  stroke: #35495e;
}
input[type="range"] {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
</style>

3、实现效果：