Web Animation 制作指南

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Web Animation (Web动画)在Web中的运用越来越广泛,但共制作(开发)并不是件易事。这里将主要总结一下有关于Web Animation制作相关的知识,以供给初次接触动画制作的同学有所帮助。

Web动画实现原理

Web动画的实现原理,是利用了人眼的“视觉暂留”现象,在短时间内连续播放数幅静止的画面,使肉眼因视觉残象产生错觉,而误以为画面在“”。

Web动画中有几个主要的概念:

  • :在动画过程中,每一幅静止画面即为一“帧”。
  • 帧率:即每秒钟播放的静止画面的数量,单位是fps(Frame per second)。
  • 帧时长:即每一幅静止画面的停留时间,单位一般是ms(毫秒)。
  • 跳帧(掉帧/丢帧):在帧率固定的动画中,某一帧的时长远高于平均帧时长,导致其后续数帧被挤压而丢失的现象。

Web Animation 实现方法

到目前为止,Web Animation实现方法主要有以下几种(大家觉见的):

  • GIF图片动画: 设计师直接通过制图软件制作而成,嵌入到Web页面中。其优点制作成本低,无需开发人员介入;缺点是文件大,耗性能,无法人机交互。
  • Flash动画: 设计师(或网页制作师)通过Adobe Flash软件将音乐、声效、动画及富有新意的界面融合在一起,以制作出高品质的网页动态效果。其主要运用于PC端的Web页面中。
  • 视频:将需要的一些动画制作成视频文件插入到Web页面中。
  • CSS Animation:通过CSS的相关特性将GIF、Flash、视频动画(创意)转换成代码
  • JavaScript Animation: Web自带的一些制作动画的JavaScript API。

在手淘中使用的动画主要有两大类:

  • 视频型: 纯视频格式,用户不需要互动,打开手淘可以直接播放或选择跳过(例如:2015年双11揭幕动画)
  • Web动画:称之为交互型动画,主要有前端开发人员根据视觉设计师提供的GIF动画、视频或Flash动画效果制作。具有较强的人机交互功能,用户触发某按钮开始播放动画效果或者用户进入手淘后动画就开始播放,而且在播放过程中还可以做一些其他交互功能(例如:2014年双12揭幕动画)

对应的我们前端所要承载的就是Web Animation中的CSS Animation和JavaScript Animation。

CSS Animation

CSS Animation是目前制作Web动画的一处主流方式,也是W3C规范之一

CSS Animation实现原理较为简单,如果你曾经结束过Flash或者动手制作过GIF动画图,那么对CSS Animation能很好的理解。

CSS Animation制作Web动画分为三部分:

  • 声明动画:通过定制关键帧(@keyframes)来声明一个动画,这个关键相当于Flash动画、GIF动画图中的帧,主要用于控制CSS Animation效果
  • 调用动画:在CSS中对应的元素上通过animation属性调用声明好的对应动画,并且指定动画播放的一些特性,比如播放时间、播放函数等
  • 触发动画:最后一个环节是控制动画触发方式,就好比,我们视频做好了,默认有可能是播放的,也有可能是不播放的。在实际中我们要通过一定的触发方式来触发这些被引用的动画。

声明动画:@keyframes

@keyframes是CSS Animation中的最大功臣,可以在@keyframes集合中定义动画的效果,而这些效果其实就是对应的CSS规则集合。比如:

@keyframes anim-name{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}

anim-name就是通过@keyframes声明的动画名称,其集合中的百分数(比如0%,100%)就是动画的关键帧,关键帧对应的CSS规则就是实现动画的一些样式规则。

而其中较为麻烦的事情是如何确定关键帧的个数,以及怎么配合相应的动作。下面的工具可以帮助大家快速构建出所需的关键帧

除此之外,也可以借用Adobe Edge Animation软件。有关于@keyframes使用的相关细节可以阅读这篇文章

调用动画: animation

animation属性主要用来调用@keyframes已声明好的动画。其主要包括以下几个属性:

animation属性名 说明
animation-name 定义使用的动画名称,需要和@keyframes声明的动画名称一致
animation-duration 用来指定元素播放动画所持续的时间长
animation-timing-function 动画的播放方式
animation-delay 指定元素动画开始播放的时间
animation-iteration-count 指定元素播放动画的循环次数
animation-direction 指定元素动画播放的方向,包括单向循环和双向循环
animation-play-state 用来控制元素动画的播放状态
animation-fill-mode 动画结束之后,关键帧值是否保留在结束状态时的值

其中animation-nameanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode相对来说较为简单,在使用的时候根据其属性值的说明对号入座即可。较为复杂的是animation-durationanimation-

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/animation/web-animation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部