popmotion.js简介
官网连接
popmotion.js是一个小巧强大的js动画工具库,并不像传统的动画库,不会把各种类型的动画封装成直接驱动元素的函数,核心功能是生成数字类型补间值,结合vue这种数据驱动视图的框架用起来特别爽.和任何其他动画库例如three.js都可以很好的融合使用.举个简单的例子:
import { animate } from "popmotion"
animate({
from: 0,
to: 100,
onUpdate: latest => console.log(latest) //输出补间值
})
给定一个初始值和结束值,调用onUpdate钩子函数,就可以得到从0到100的补间值,结合vue,例如left绑定了元素的translateX属性,一个简单的右移动画就实现了.
onUpdate: (latest) => {
// this.left
this.left = latest;
},
任何需要生成补间值的库都可以无缝结合使用.
通过配置可以定义各种物理效果,可以打印latest值查看不同效果的输出值.
可以生成数字,字符串,颜色值等凡是可以转化成数值的数据.非常强大.
控制动画的播放和停止.
本身就很小巧了,作者又把它拆分成了好几个模块,每个模块还可以按需引入不同的函数,性能刚刚的.
在vue中实现一个svg变形动画
popmotion不能计算svg里path属性值的补间值,需引入另外一个小库polymorph
<svg width="350px" height="175px">
<path :d="svgPath" style="fill:#aaa" />
</svg>
...
import { animate } from "popmotion"
import { interpolate } from 'polymorph-js'
...
mounted() {
this.svgAnimate()
},
methods: {
svgAnimate() {
//svg图形1
let svg1 = 'M133 38l-15 16c-11,-4 -21,-8 -35,-1 -4,2 -6,4 -9,6 -2,-1 -2,-1 -3,-3 -3,-3 -5,-6 -8,-9 -8,-7 -1,-5 -2,-16 -1,-11 -13,-21 -27,-17 -19,6 -20,33 -2,40 9,3 12,1 19,-1 5,4 12,11 16,16 -4,10 -8,17 -5,30 1,4 3,7 4,10l-13 13c-8,-3 -12,-8 -24,-5 -38,8 -35,62 1,66 11,1 17,-3 24,-7 8,-5 15,-21 11,-33 -1,-5 -4,-8 -5,-12l11 -11c4,2 2,3 10,7 4,2 8,4 13,4 11,1 19,-1 27,-6l20 19c-6,13 -1,28 7,35 12,9 28,5 36,-4 9,-10 9,-26 0,-36 -3,-4 -8,-8 -16,-9 -10,-2 -12,2 -20,4l-18 -18c11,-16 11,-40 -3,-53l15 -15c31,10 37,-22 24,-34 -13,-12 -31,-4 -34,10 -2,8 1,10 1,16z'
//svg图形2
let svg2 = 'M218 101c10,-4 18,14 5,18 -11,3 -18,-14 -5,-18zm-39 59c1,8 11,7 12,2 0,-2 1,-18 0,-21 -1,-8 -10,-7 -12,-1 -1,2 -1,18 0,21zm-29 0c1,7 10,8 12,2 1,-2 1,-18 0,-21 -1,-8 -10,-7 -12,-1 -1,2 -1,18 0,21zm-31 -60c12,-4 17,16 5,19 -12,3 -18,-15 -5,-19zm11 56c1,-3 0,-7 1,-11 1,-9 5,-17 11,-23 16,-18 44,-18 61,1 10,12 10,19 11,33l51 0c0,-5 0,-12 -1,-17 -1,-5 -3,-11 -4,-16 5,-2 10,-7 17,-8 13,-2 37,21 49,25 5,-3 11,-12 15,-15 -1,-2 -9,-10 -11,-12l-17 -18c-2,-2 -4,-3 -6,-5 -13,-13 -24,-31 -41,-17 -4,3 -20,20 -22,23l-2 -2c-9,-10 -14,-15 -27,-22 -27,-14 -58,-13 -85,0 -13,7 -19,14 -28,23l-1 1c-4,-6 -13,-13 -17,-17 -5,-6 -11,-14 -22,-10 -6,2 -9,6 -12,10l-45 46c2,2 13,14 15,16 3,-1 13,-8 16,-9 5,-3 10,-6 15,-9 21,-13 22,-4 35,2 -2,11 -6,19 -5,33l51 0z'
const interpolator = interpolate([svg1, svg2], {
addPoints: 0,
origin: { x: 0, y: 0 },
optimize: 'fill',
precision: 1 // 中间值的小数位数,大了会增加计算负担 经测试影响不大,设为1,动画效果更平滑 默认为0
})
const animation = animate({
from: 0,
to: 1,
duration: 3000,
repeat: 'Infinity',
repeatType: "reverse", //"loop":重复 "mirror":交替from/to值。
onUpdate: (latest) => {
// interpolator函数接收0-1的参数,返回path的补间属性值
this.svgPath = interpolator(latest)
}
})
// animation.stop() //停止动画
}
}
一个骚气的变形动画就搞定了,任何两个svg图形都可以使用.
封装过渡的东西用起来简单,但瓶颈很多,原生写法又太难,这种介于两者之间的库就能解决这类痛点.