.

12.2.SVG变形动画

戏子。发表于:2016年07月27日 11:28:20更新于:2019年07月19日 12:13:02


一、案例效果

001579828ec8ba028b5385e01d87e82

00157987b774e69598b6f8830d1bd0c

00157987bcc48c4fd965d8245e6c3fc

00157987bcfd39530280de6eb3a6ad6

00157987bd6612700a1adad4f8507c8

《SVG变形动画》

《SVG变形动画》


二、场景应用

什么是SVG变形动画?除了上方的案例效果,当然效果并不局限于此,本文注重介绍设置方法。


三、SVG图形绘制及获取代码

1.获取SVG变形动画代码

新建AI文档,设置画布尺寸宽740px,高为1136px,点击确定;

00157961c7f8a4ec1622605617087d6


2.在左侧菜单里点击椭圆工具,按住Shift键可画出一个正圆,填充黑色,无描边,在该圆上右击,选择建立复合路径;

00157981a9cc856837ceb982955626a


3.我们依次在圆上画出正方形(填充红色),五角星(填充黄色),每画完一个图形就在该图形上建立复合路径,三个图形的叠放次序如图所示;

00157981bf4daf61b5f493da654bd7e


4.设置文件存储为,保存类型为SVG,点击保存按钮;

001579821afda6088dabda0d217d881


5.在SVG选项的设置面板的下方点击 “显示SVG代码” 按钮;

00157972dcfb1a20fc08ccbf277621e


6.在新弹出网页里的窗口里复制里面的代码,快捷键Ctrl+A是全部选中,Ctrl+C是复制;

0015798226f06ec777c1a24274257d5


7.这里提供demo里直线的SVG文本,可以拷贝后自己试试 :)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="740px" height="1136px" viewBox="0 0 740 1136" enable-background="new 0 0 740 1136" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="217.169" y1="804.857" x2="217.169" y2="119.143"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="357.429" y1="804.857" x2="357.429" y2="194.468"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="502.883" y1="804.857" x2="502.883" y2="371.091"/>
</svg>


  1. SVG图形需建立复合路径;

  2. SVG变形动画可根据需要添加动画效果。


四、组件用法

基本用法

1.添加SVG组件。在作品的操作页面上方的菜单里点击高级组件,选择SVG组件;

0015797490ea97172f3937ae2eb0f4e


2.粘贴SVG代码,调整组件。在右侧的面板里输入粘贴SVG代码,拖动组件边框设置成合适的大小,移动到合适的位置;

00157982a4c7131779729887f02d02b


3.添加SVG变形动画。我们在动画类型选择SVG变形动画,依次添加三个SVG变形动画。

在动画1的设置面板中,依次勾选path1,path2,点击确认按钮;

00157a8083b033c1bf76e80233fd2e9


4.在动画2的设置面板中,依次勾选path2,path3,点击确认按钮;

00157a8095f97a454e0c82aeaf36f6b


5.在动画3的设置面板中,我们点住path1后面的拖拽按钮,把path1拖动到最下方,依次勾选path3,path1,点击确认按钮;

00157a80ab52c096edcdc9bdef9edfe


6.关于节点的设置。如有必要,可以针对一组对象中具体某一个对象设置变形节点。一般无需设置,使用默认节点即可。

00157987a7b8ce823e6f58deac5da6a


高级用法

详细参考《跟小望学习最新SVG》