摘要：了解的应该会明白，一般在设计好基本的形状的时候，使用贝赛尔曲线工具，可以做很多的变化，从而使用一个基本的形状可以做出不同形状的变化。可以和属性，，元素和对象一起工作，制作出各种高性能，平滑过渡的动画效果。下面就针对来介绍下使用来实现动画。
何为Morphing动画
开始之前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另一个形状。如下图所示，从形状1渐变到形状2，再从形状2渐变到形状3，最后从形状3渐变到形状1，以此循环往复。
从上图可以看到像这样的Morphing动画简直是为SVG量身定制的，因为SVG中的路径原本就是由很多的坐标点构成的（点连成线），做一些形状变化只要移动坐标点就可以了。
简单的来说，在SVG要实现Morphing动画，主要是靠移动形状路径上的坐标点从而达到从一个形状变到另一个形状的动画效果。并且由于这个形状是从一个形状变化而来，所以路径上的坐标数量要完全相同，不同的只是坐标的位置不同而已。
如何制作Morphing动画要制作Morphing动画，首先得用矢量编辑软件比如Adobe Illustrator或者是Inscape来设计好相关的形状并得到相关路径（path）的数据信息。
比如，如果你要做如下图所示的两个形状之间变化的Morphing动画，就需要在设计软件中先设计好两个形状。当然这里要注意一点的事是，两个图形的坐标数量要一样，只是位置不同而已。了解
Adobe Illustrator的应该会明白，一般在设计好基本的形状的时候，使用贝赛尔曲线工具，可以做很多的变化，从而使用一个基本的形状可以做出不同形状的变化。
下面我们来小小的练习一下，实现上图中的效果。
首先在设计软件中，这里使用的是Adobe Illustrator来设计一个基本的形状，如下图所示：
然后复制一份新建一个文档，在它基础上使用贝赛尔曲线工具，稍微对几个坐标点做下变化得到下面的图形：
这就得到了两个矢量图形，然后分别导出SVG格式，得到Path的信息：
path1path2
得到path信息之后，接下来就是来实现动画效果来。
这里我们需要借助于一个小小的轻量级的js动画库anime，这个库非常的小，而且没有任何的依赖，才几百行。是一款功能强大的Javascript动画库插件。anime.js可以和CSS3属性，SVG，DOM元素和JS对象一起工作，制作出各种高性能，平滑过渡的动画效果。
具体的使用方法就不详细介绍，可以去官网看相关实例。
下面就针对SVG来介绍下使用anime来实现Morphing动画。根据Morphing动画原理，我们现在是要实现从path1形状平滑的过度到path2的动画效果。
anime api获取目标元素
在anime中要来编写动画效果，首先是选择你要运动的元素，这里使用浏览器默认的方法来得到目标元素：
| 选择器 | 示例 |
|---|---|
| DOM元素 | document.getElementsByTagName("path")[0]] |
参数
这里简单介绍下，我们将要使用的一些参数
| 名字 | 默认值 | 类型 |
|---|---|---|
| delay(动画延迟) | 0 | 数字 |
| duration(动画运行时间) | 1000 | 数字 |
| autoplay(是否自动开始) | ture | 布尔值 |
| easing(缓动曲线) | easeOutElastic | 使用console log anime.easings可以输出它支持的一些欢动曲线方法 |
| loop(是否循环播放) | false | 布尔值或者是具体的整数 |
具体到我们这个效果，其实我们要改变的就是SVG中Path路径的值，使用anime结合上面介绍的方法可以很轻松的来实现这个效果，如下代码所示：
anime({
targets: [document.getElementsByTagName("path")[0]],
d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
duration: 1000,
loop: true,
direction: "alternate",
easing: "linear"
});
上面的代码中，d就是我们要改变的属性的值。这里注意下duration这个参数，它是用来指定动画运行的方向的，主要是三个值normal、reverse和alternate，这里选择是alternate即动画动画轮流反向播放。
OK，就这么简单我们就实现了一个简单Morphing动画。充分发挥你的想象力，我们可以实现更有趣的Morphing动画。
最近做了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的关于SVG方面的技术知识可以去网站看看。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111573.html
摘要：了解的应该会明白，一般在设计好基本的形状的时候，使用贝赛尔曲线工具，可以做很多的变化，从而使用一个基本的形状可以做出不同形状的变化。可以和属性，，元素和对象一起工作，制作出各种高性能，平滑过渡的动画效果。下面就针对来介绍下使用来实现动画。 何为Morphing动画 开始之前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另一个形状。如下...
摘要：今天这篇文章来讲一个动画在界面上一个具体的运用即具有动画效果的播放按钮。在后面实现动画效果的时候要用到。下面来看下实现动画效果核心代码所谓动画效果，就是从一个形状变到另一个形状。由于使用方法，它们之间的变化会有一个动画效果即动画效果。 前面有专门写过一篇morphing动画基础知识的文章，不了解的话可以去这里看看。 今天这篇文章来讲一个morphing动画在UI界面上一个具体的运用即具...
摘要：从形状到另外一个形状的转化就是移动坐标点而已。今天我们来使用之前多次提到过的这个库来实现动画。在执行的时候，会自动读取数组里颜色的值，填充到路径中去，从而实现两个形状填充颜色的动画。 这个实例来看看如何使用anime.js来实现一个形变（morphing）动画。 至于什么是morphing动画，看完下面这个图就知道了。 showImg(https://segmentfault.com/...
摘要：在制作动画方面也非常强悍，并且还专门提供了用于加强动画制作的相关插件，比如。一个有趣的的动画效果就完成了，代码地址使用配合来制作动画效果如此简单。原文地址，根据自己理解整理了下这个教程，主要是来学习下使用来制作动画效果的思路和方法。 这是我的一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于SVG技术应用可以去网站看看。 最近从Dribbble...
阅读 804·2021-11-16 11:56
阅读 1631·2021-11-16 11:45
阅读 3088·2021-10-08 10:13
阅读 4020·2021-09-22 15:27
阅读 709·2019-08-30 11:03
阅读 623·2019-08-30 10:56
阅读 917·2019-08-29 15:18
阅读 1686·2019-08-29 14:05
