每日一博 | 前端动效讲解与实战
作者:vivo 互联网前端团队- ZhaoJie 本文将从各个角度来对动画整个体系进行分类,并且介绍各种前端动画的实现方法,最后我们将总结在实际开发中的各个场景的动画选择方案。 一、背景 前端动画场景需求多 对众多动画场景的技术实现方案选择上比较模糊 各动画方案的优劣及适用场景认识模糊 现有动画库太多,不知道选哪个 主流动画库的适用场景认识模糊 下面首先让我们从各个角度来对动画整个体系进行分类,让我们清晰的了解动画整个体系。 二、分类 2.1 用途角度 首先我们从动画的用途或者说是业务的角度来进行区分,将我们平时的动画分为展示型动画和交互型动画。 2.1.1 展示型动画 类似于一张GIF图,或者一段视频。比如在开启宝箱的时候,我们会加入一个切场过渡动画,来替代原有的生硬等待结果。 展示型动画在实际使用的场景中,实现的方法很多,比如用GIF图,canvas,CSS3动画等,但是最终输出的结果是不带有交互的,也就是从动画起始状态到结束状态一气呵成,这个过程用户可以感知,但是无法参与。 2.1.2 交互型动画 用户自已参与的,对于交互性动画而言,我们可以在动画播放的某个时间节点触发相应的操作...