我可以: 邀请好友来看>>
ZOL论坛 > 软件论坛 > 电脑综合论坛 > 办公软件论坛 > Epub360软件教程:HTML5实现SVG路径/描绘动画
帖子很冷清,卤煮很失落!求安慰
返回列表
签到
手机签到经验翻倍!
快来扫一扫!

Epub360软件教程:HTML5实现SVG路径/描绘动画

48浏览 / 1回复

H5教程与案例...

H5教程与案例分享

0
精华
5
帖子

等  级:Lv.1
经  验:144
  • Z金豆: 22

    千万礼品等你来兑哦~快点击这里兑换吧~

  • 城  市:江苏
  • 注  册:2015-05-30
  • 登  录:2019-11-22
发表于 2019-11-07 16:02:10
电梯直达 确定
楼主

二、应用场景

SVG作为矢量图图片格式,具有广泛的用途,Epub360可以对SVG的路径,进行动画播放控制。

使用这个组件,可以简单的粘贴各种SVG图形文本,不加动画,作为一种配图使用效果也是不错的。

00156f364d7bbb6426bda172df85833

blob.png  blob.png blob.png  blob.png


三、组件用法

基本用法

1. 点击添加SVG路径组件

blob.pngblob.png


2.我们提供了这个SVG文本样例,可以拷贝后自己试试 :)






3.粘贴SVG代码,并点击下方的保存按钮。

0015c9c9d42ea4b36250d6e8fc8dca2


4. 选中SVG组件,添加“SVG描绘动画”

0015c9c9c1c1c1e944642cf54ecf2fb


5. 动画设置:关键是持续时间、起始结束状态 这几个属性

0015c9c9c8a9f0b3fc6eaf5985d9c42


6. 把这个组件尺寸调整一下,单页预览就可以开头demo的效果了。

0015c9c9cdfedfb5ae08b002167f0b0



高级用法

1.我们想要绘制SVG线条,需要借助一定的软件,方式之一:通过illustrator获取。

(1)把illustrator打开一个矢量图文件另存为... 注意保存时选择SVG格式

0015579828d793807d135dcaa73b25a

0015579829e860dab21cf0513e77e6e


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

001557982c962402d2c7a89ae8b9883


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

blob.png

(4)这里需要说明的是:不是所有SVG内容都可以做路径动画,如果里面有填充颜色,就不能做描绘动画了;

另外,如果SVG的线条在AI中使用了虚线等样式,在H5作品中整个SVG组件周围会显示白边,所以不支持虚线样式。具体的可以在后面看下SVG动画怎么做。


2.除了可以通过Ai软件绘制,还可以用PS软件,这里大家可以百度一下具体方法。

如果是简单的线条或者图形描边,编辑器中有图形组件,是支持SVG描边动画的。

0015c9c9f5309ec2e2dc30b6773ac98


3.如果想玩转SVG动画,必须理解SVG动画的路径设置。

(1)如何理解起始/结束状态。SVG路径的状态,指的就是原始SVG路径显示的区间,用的是百分号来表示,大家可以看一下下图所示:


这是一条完整的线段:             这是选取其中的一段(用百分号表示):

blob.png

(2)先定义好起始和结束状态后,在动画持续时间内,从起始状态变化到结束状态,就是SVG描绘动画了。这里例举几个常用的状态搭配:

起始结束效果
0%,0%(起点)0%,100%(完整的路径)从头开始绘制完整的路径
0%,100%(完整的路径)0%,0%(起点)完整的路径从尾部开始消失
0%,100%(完整的路径)50%,50%(中点)完整的路径从两头开始消失
0%,10%(头部的10%)90%,100%(尾部的10%)一段固定长度走过完整的路径


(3)同理,如果需要反向描绘一段SVG,就用这个参数值

image.png



H5教程与案例...

H5教程与案例分享


精华

帖子

等  级:Lv.1
经  验:144
发表于 2019-11-08 10:06:01 1楼
svg教程分享!求顶
高级模式
论坛精选大家都在看24小时热帖7天热帖大家都在问最新回答

针对ZOL论坛您有任何使用问题和建议 您可以 联系论坛管理员查看帮助  或  给我提意见

快捷回复 APP下载 返回列表