anime.js 实战：实现一个 SVG 形变（morphing）动画

iamyoung001 发布于2019-08-22 10:54 / 3682人阅读

摘要：从形状到另外一个形状的转化就是移动坐标点而已。今天我们来使用之前多次提到过的这个库来实现动画。在执行的时候，会自动读取数组里颜色的值，填充到路径中去，从而实现两个形状填充颜色的动画。

这个实例来看看如何使用anime.js来实现一个形变（morphing）动画。

至于什么是morphing动画，看完下面这个图就知道了。

简而言之，就是不同形状之间能平滑的转换。这个用SVG来做羹适合不过了，因为SVG本身的形状就是有各种不同坐标之间的线段绘制而成的。从形状到另外一个形状的转化就是移动坐标点而已。

说起来貌似挺简单的，其实真正要实现起来还是有点复杂的。今天我们来使用之前多次提到过的anime.js这个js库来实现morphing动画。

关于anime.js的基础知识，可以去看看以前发过的这篇文章。

在anime.js中提供了做动画必不可少时间轴的管理功能，可以轻松的控制和管理动画的播放。

具体可以去官网的文档看看，Timeline。

下面来看看要实现的效果：

使用anime.js实现起来非常简单，只需要准备两个形状的SVG即可。

观察这个效果，可以发现这个效果主要是形状之间的转化，同时还有颜色的变化。

首先默认显示的F这个字母，结构如下：

SVG morph in HTML, CSS & JS

接下来就是使用anime.js来实现形变动画效果。

首先声明一个时间轴：

var socialTimeline = anime.timeline({ autoplay: true, direction: "alternate", loop: true });

中间的几个参数也非常容易理解，自动循环来回播放效果。

下面就是具体动画效果的编写，显示形状的变化，即从字母F转变为twitter的logo。

代码如下：

socialTimeline
  .add({
    targets: ".path",
    d: {
      value: [
      "m 41.416254,90 c -0.327378,-7.4702 0.20833,-32.7284 0,-39.901 -5.386902,-0.2083 -4.521603,0.3274 -9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 -0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356,-3.53554 -0.04417,5.73754 -0.03936,9.37986 0,12.87945 -5.049924,0.46388 -7.309188,-0.33689 -10.85914,1.26269 -1.403378,3.17794 -1.569601,4.80531 -1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907,0 -0.995158,6.00899 -0.948285,7.62376 -1.767767,13.06882 -3.676625,0.088 -5.605721,-0.1488 -11.111678,0 -0.148814,6.756 0.357147,33.0107 0,40.1536 -6.428576,0.1786 -8.174438,-0.03 -14.394674,0 z",
      "m 10.44335,90 c 11.073313,0.3952 19.483106,-1.8358 23.901837,-7.1603 -7.9736,-1.4292 -11.832311,-4.1933 -15.078321,-11.0837 3.459698,0.8219 5.795894,0.6358 7.606781,-0.607 -7.19593,-1.719 -12.734543,-6.7971 -13.741664,-15.836 2.766355,1.55307 5.466848,2.66623 7.828682,2.0203 -4.336544,-2.92911 -9.838998,-10.47636 -5.555839,-22.47589 8.400675,11.87052 23.824269,17.67568 33.840111,17.67767 -0.936406,-9.74688 5.88057,-19.46521 15.302849,-19.97853 8.13118,-0.50719 10.57457,4.01944 12.476346,4.82624 3.644547,0.13419 7.393301,-1.74401 10.354063,-3.53553 -1.380842,4.47157 -5.06769,5.62903 -6.313453,8.58629 5.42317,0.41513 5.891376,-1.53111 8.333758,-2.0203 -2.071414,3.75017 -5.393863,5.00034 -7.323606,8.08122 -1.633654,16.12573 -5.16049,27.57123 -14.647212,36.36553 -13.825764,11.3764 -34.755458,17.369 -56.984332,5.14 z"
      ],
      duration: 700,
      delay: 200,
      easing: "easeInOutQuart"
    },

选中路径元素，然后选中要改变的属性，我们这里是要改变路径的值即d属性，直接写入要变化形状的值就可以了。然后是动画时间，延迟和动画曲线等动画参数的调整，让动画更自然。

后面是改变路径形状的填充和边框颜色，非常简单。

比如改变填充颜色：

 fill: {
      value: ["#3b5998", "#4099ff"],
      duration: 700,
      delay: 200,
      easing: "easeInOutQuart"
    },

这里颜色的值，是一个数组。在执行的时候，anime.js会自动读取数组里颜色的值，填充到路径中去，从而实现两个形状填充颜色的动画。

demo地址

通过上面一个简简单单的动画，可以发现使用anime.js来做SVG的动画，也非常的方便，主要是轻量级。

最近做了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的关于SVG方面的技术知识可以去网站看看。

云服务器 GPU云服务器 svg动画实现加载动画 javascript实现动画 js实现gif动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91431.html

使用 SVG 来制作 Morphing 动画效果

摘要：了解的应该会明白，一般在设计好基本的形状的时候，使用贝赛尔曲线工具，可以做很多的变化，从而使用一个基本的形状可以做出不同形状的变化。可以和属性，，元素和对象一起工作，制作出各种高性能，平滑过渡的动画效果。下面就针对来介绍下使用来实现动画。何为Morphing动画开始之前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另一个形状。如下...

张汉庆 2019-08-29 11:19 评论0 收藏0
使用 SVG 来制作 Morphing 动画效果

摘要：了解的应该会明白，一般在设计好基本的形状的时候，使用贝赛尔曲线工具，可以做很多的变化，从而使用一个基本的形状可以做出不同形状的变化。可以和属性，，元素和对象一起工作，制作出各种高性能，平滑过渡的动画效果。下面就针对来介绍下使用来实现动画。何为Morphing动画开始之前，先来了解下什么是Morphing动画。所谓Morphing动画是表示，同一个模型，从一个形状变到另一个形状。如下...

_Dreams 2019-08-20 11:07 评论0 收藏0
[源码阅读]解析Anime(JS动画库)核心(1)

摘要：初始位置结束位置和持续时间是作为参数传入配置的，因此计算已消耗时间就是完成动画的核心。下面就深入了解下它的核心。本次解析将分为2篇文章，当前是第一篇，第二篇在这里另外，为了能更好的理解这个库，个人写了一个此库的压缩版，实现了核心的功能(主要也是为了更好理解核心功能)，内容更少方便阅读，地址在这里介绍 anime一个JS轻量动画库，摒弃了常规的left,top属性，全面采用req...

魏宪会 2019-08-23 11:57 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

wwolf 2019-08-02 16:10 评论0 收藏0
svg系列：1.svg基础知识 & 不一样的svg动画世界

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

DirtyMind 2019-08-23 16:30 评论0 收藏0