你离高效制作动画只差这一篇文章的距离

转载 1 收藏 评论
举报 2018-07-10

看完本文,前端能快速开发一些 H5动画,设计师也能高效地制作出合自己心意的动画来让别人高保真还原,希望能给大家带来一点帮助。


前言

说起动画H5,作为一个前端,可谓是「又爱又恨」。爱的是加上动画动效后 H5会变得生动有趣,吸引力 Max;恨的是做动画时都是一边在脑海中 yy效果,一边用 css、js代码模拟出来,既低效又不直观,正所谓「产品一句话,设计一根线,重构一身汗」。庆幸的是,你现在看到了这篇文章了,我将结合实例来介绍一下 Adobe Animate CC 如何高效直观地实现动画效果,并指出一些2018版本新特性。


一、好戏来了

首先我们先来看一个动画,大家估一下这个 H5 需要做多久时间? 答案是一天。



能这么快完成这个 h5,靠的是可视化动画制作软件 Adobe Animate CC。Adobe Animate CC 前身是 Adobe FlashProfessional CC,由于 H5 的出现,很多以前需要用 flash 才能实现的动画现在也可以用 H5 来实现了,另外 flash 一直以来备受不安全的诟病,使得业界越来越排斥 flash,例如 iphone 上的网页上就不能播放 flash。Adobe 心想不能就此没落啊,于是这个软件就顺势转型,在维持原有 Flash 开发工具基础上,新增制作 H5动画功能。对于原 flash 开发人员来说可以轻松转型,对于新手来说,这个软件也比较容易上手。


在介绍如何做动画之前,我们先来熟悉一下软件的界面:


    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)