恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效落地系列教程(九):SVGA动效实现方案
9.8°
原创文章 / 教程 / / 举报
1517 23 9 0

2021-12-05

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小,播放资源占用更优,动画还原效果更好。最大的优势在于对于复杂效果可以支持序列帧导出。

SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式, Lottie 基本上是按照我们在 AE 当中的关键帧及缓动的结合形式去记录动画。而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态,从而省去对缓动值的计算。跟序列帧的逻辑非常相似,但是因为他的素材可以复用,所以会比序列帧占用更低的内存。

SVGA能够支持的特效有:
● 位移
● 缩放
● 旋转
● 透明度变化
● 蒙版

SVGA不支持的特效有:
● 粒子效果
● 羽化
● 遮罩
● 颜色替换
● 3D图层效果
● 操控点工具

● 表达式
● 流体效果
● 高斯模糊
● 描边
● 位移曲率

... 

但是,针对复杂特效,SVGA可以采用序列帧的方式导出,后面会详细介绍。


插件的下载与安装

下载地址:SVGA官网--官网首页--社区生态--设计师工具

http://svga.io/index.html

有win和mac版本,有详细的安装步骤,按照步骤操作即可


SVGA文件的导出与预览

1、插件安装成功后,我们在AE的窗口--扩展下,即可找到该插件

2、选择我们制作好的动效文件,点击插件进行导出,先选择输出路径,再点击开始转换(注意:矢量动效可直接导出,复杂动效会采用后面第二种序列帧的方法)

3、导出之后,找到我们输出文件位置,可以看到直接输出一个.svga格式的文件

4、将文件拖入官网播放器进行预览

确认效果没有问题后,我们可以交付给开发


接下来讲解第二种方式,带粒子特效的复杂动效如何导出

1、从AE中导出序列帧,具体方法我们之前介绍过,这里不再赘述,如下

2、将序列帧导入到AE中,从菜单--文件--导入,选择存放序列帧的文件夹,选择导入文件

3、对序列帧进行裁剪(关键),因为拖入序列帧是占据整个时间轴的,我们全选,alt+】进行裁剪

4、将序列帧进行错位,选择菜单栏,动画--关键帧辅助--序列图层,这里默认,直接点击确定

序列帧错开如图所示:

5、利用SVGA插件导出,导出如下

放入播放器预览效果如下:

采用序列帧方式导出所占有的内存会比直接导出大很多,设计师在落地过程中和开发密切沟通,寻找最合适的落地方案。

Powered by Froala Editor

教程动效svga落地

创建于:2021-12-05
收藏

23人已收藏

子沐design

每一次的尝试都是为将来的蜕变而准备

  • 25

    作品

  • 134

    粉丝

  • 30

    关注

  • 动效落地系列教程(八):Lottie动效实现方案
  • 动效落地系列教程(七):VAP动效实现方案
  • 动效落地系列教程(六):PAG动效实现方案
  • 动效落地系列教程(五):Apng/Webp导出方法

猜你喜欢

    子沐design

    子沐design

    每一次的尝试都是为将来的蜕变而准备

    活雷锋当仁不让lv.2小有见解话唠收藏家lv.3
    • 134

      粉丝

    • 142

      人气

    • 2360

      颜值

    作品

      最新推荐

      有奖临摹 | 新年幸运签设计

      3738 13 0

      相关佳作
      换一换

        子沐design

        点赞:9

        收藏:23

        评论:0

        动效落地系列教程(九):SVGA动效实现方案

        你确定要举报动效落地系列教程(九):SVGA动效实现方案

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年12月05日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录

        可云端编辑的专业级UI设计工具

        立即体验