You can create highly dynamic SVG animations by binding SVG attributes (like points for a <polygon>) to data properties that are updated via watchers.
When the underlying data array (e.g., stats) changes, use a watcher to trigger an animation library (like TweenLite) to transition the calculated SVG attribute (e.g., points) from its old value to the new value. This allows for real-time prototyping of complex shapes and movements.
// Example logic for animating SVG polygon points
new Vue({
el: '#svg-polygon-demo',
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) {
// Logic to add or remove stats based on side count change
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 i = 1; i <= absoluteSidesDifference; i++) {
this.stats.shift()
}
}
},
stats: function (newStats) {
// Use TweenLite to animate the 'points' property in $data
TweenLite.to(
this.$data,
this.updateInterval / 1000,
{ points: generatePoints(newStats) }
)
}
}
})
