.

2.2.SVG变形动画

老赵发表于:2016年01月21日 11:13:03更新于:2019年04月24日 11:58:26

一、案例效果

00156a04d42e900ac0699e5bc33771f

推荐阅读:《SVG大神元小望的分享教程


二、应用场景

什么是SVG变形动画?先看看Demo样例,了解一下效果如何。本教程讲解了如何设置、并提供了几个样例SVG文件(见附件)。


、素材准备

1. 这里以AI为例,已经有了基本的图形素材后,需要注意把一个对象的所有节点选中后,利用“对象”菜单建立“复合路径”进行合并;blob.png

blob.png  blob.png


2. 保存时,点击“文件”菜单,选中存储为“SVG格式”(步骤如下所示)

(1)选择“文件”/“存储为..”0015579828d793807d135dcaa73b25a


(2)选择格式为“SVG”

0015579829e860dab21cf0513e77e6e


(3)在存储后弹出的SVG选项对话框中,点击“SVG代码...”

001557982c962402d2c7a89ae8b9883


(4)在打开的文本中,全部选中后拷贝到粘贴板中,这样就可以粘贴到Epub360的SVG路径组件里了。

blob.png


5.SVG样例文件在附件中,可下载用文本编辑器打开,拷贝正文使用。


四、功能设置

1.添加SVG组件

00156a04d6e2284738068f7cf29e958


2.粘贴SVG代码

00156a04d9b819241957cb97502aae4


3.添加SVG变形动画设置


(1)添加SVG变形动画
blob.png


2.指定参与变形的对象

00156a04db3d0129e31fa2648c38518

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

00156a04da9382209be9624b0ef1e70

4.根据需要,可以调整次序,比如多个变形动画组合,进行反复变形的处理。
00156a04dbb45105634124a9a5234b9


附件:动物.txt • 10.48KB • 下载

附件:几何图形.txt • 3.92KB • 下载

附件:方形_五角星.txt • 643B • 下载

--------- 不了解设计的程序员不是好客服 ---------------

回复(9)