Vue:vue中使用TweenLite
1、TweenLite介绍:TweenLite最初是GreenSock公司推出的一款基于ActionScript的免费开源的缓动引擎,是webgame开发人员比较常用的一个动画库,使用TweenLite能够简化动画制作的代码编写工作。2、使用方法:2.1、安装TweenLite依赖gsap:npm install gsap2.2、使用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、实现效果:
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)