svg动画_一款强大的SVG动画转换库

这次介绍一款强大的SVG动画转换

查了下morph的意思&＃xff0c;是一个动词

(使)变形(利用电脑动画制作使图像平稳变换) ; (使) 变化; (使) 改变

先看一下效果

一开始我以为只能切换默认的一些Icon&＃xff0c;后来发现它果真是强大&＃xff0c;理论上是能动画切换任何SVG的&＃xff0c;也支持设置如下的参数

我做了一下简单的尝试&＃xff0c;从左边的同心圆&＃xff0c;动画转换到右边的圆角矩形。

下面看放慢到10秒的效果

本着好奇的精神&＃xff0c;我还是略作查看&＃xff0c;每当这种动画库想要深入的时候&＃xff0c;发现背后全是数学知识。

万事都是冰箱三部曲。

这里主要是看在SVGMorpheus的构造函数里&＃xff0c;它做了点什么小动作。

吃进去的是草

挤出的是奶

我们看到在SVGMorpheus内部它已经偷偷地转成了标签&＃xff0c;并且和原来的绘图效果完全一致&＃xff0c;抠出源码一看

其他诸如、等都是有对应的转换方式。

如此第一步把冰箱打开已经完成&＃xff0c;可以猜测&＃xff0c;之后肯定是在上做文章。

接下来要实现动画就要如此调用

再看源码可以知道建立起动画计算主要是调用了

首先要有from和to两个形状

由于这两个图形一个是有两个&＃xff0c;一个只有一个&＃xff0c;所以第一步要先把两者填平&＃xff0c;在节点数上一致&＃xff0c;填进来的效果也很简单&＃xff0c;要么是从无到有&＃xff0c;要么是从有到无。

接下来的事情就是每个一对一单挑了&＃xff0c;核心就是这个方法

先看curves的结果&＃xff0c;它把M12,10l36,0a2,2 0 0,1 2,2l0,36a2,2 0 0,1 -2,2l-36,0a2,2 0 0,1 -2,-2l0,-36a2,2 0 0,1 2,-2z这样的字符串&＃xff0c;转化成

这样的数组。另外不光有path&＃xff0c;还有style和rotate的计算。

拿到了起点和终点的对比数据之后&＃xff0c;相当于把大象放进了冰箱&＃xff0c;就可以开始做显示了&＃xff0c;内部也是用的raf。

主要看SVGMorpheus.prototype._updateAnimationProgress这个方法&＃xff0c;核心就是按照当前进度计算属性变化的值

关上冰箱门的步骤也完成了。

最后我觉得这款动画库是能实现任何图形的动画转换&＃xff0c;但是由于需要大量的计算和不停的渲染&＃xff0c;致使它在性能上肯定有短板&＃xff0c;而作者应该也是意识到这一点&＃xff0c;给它的定位是只局限在图标上的动画库。

Javascript library enabling SVG icons to morph from one to the other.

比较可惜的是作者说这个库不再维护了。