会写动画的前端才是好开发(一)

阅读数:2 2020 年 1 月 7 日 15:40

会写动画的前端才是好开发(一)

动画是通过把某一动态过程分解后,画成许多动作瞬间的画幅,再用摄影机连续拍摄成一系列画面,给视觉造成连续变化的图画。它的基本原理与电影、电视一样,都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性,人的眼睛看到一幅画或一个物体后,在 0.34 秒内不会消失。

利用这一原理,在一幅画还没有消失前播放下一幅画,就会给人造成一种流畅的视觉变化效果。相信很多人都看过动画片,或者手翻书,其实它们与电视、电影的原理都是一样的。

会写动画的前端才是好开发(一)

动画如何实现

  1. Javascript 直接实现动画;
  2. css3 动画中的 transition 和 animation;
  3. Canvas 动画;
  4. SVG(可伸缩矢量图形);
    会写动画的前端才是好开发(一)

1. Javascript 直接实现动画

Javascript 直接实现动画,主要是通过 setInterval 或 setTimeout 方法的回调函数来持续调用改变某个元素的 CSS 样式以达到元素样式变化的效果,或者使用 requestAnimationFrame;
示例:

会写动画的前端才是好开发(一)
上面示例的效果是一个灰色的小方块,慢慢的从左边,移动到屏幕右边的动画,每隔 16ms 就把方块的左外边距增加 1px。尽管过程看起来很连贯,但是这种方法依然存在一些问题。

因为 JavaScript 是单线程的,setTimeout 是异步操作,加入任务队列后,当 js 引擎线程中同步代码执行完才会从任务队列中取出执行,可能发生阻塞。另外 setTimeOut 会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器,而且不同浏览器对 setTimeOut 的解析也是不同的,导致同一动画在不同浏览器下效果不一致,在移动端上使用会有明显的卡顿。

requestAnimationFrame 实现动画的优点是可以避免不必要的过度重绘,但是整体性能和可调节性都不如 css3 动画。

2. css3 实现动画

Transition

Transition 可以实现过渡动画的效果,但是 transition 并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。 transition 抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画,不支持自定义中间的状态。可以设置发生变化的 css 属性,默认为 all,则所有变化的属性都会在触发时,以动画的形式展现出来。如果把 transition 和 transform 配合使用,对元素进行平移、倾斜、缩放,使动画更加丰富生动。

transition 语法如下:
transition:property duration timing-function delay;

具体属性值介绍如下:
会写动画的前端才是好开发(一)

示例:

会写动画的前端才是好开发(一)
Animation

Animation 算是真正意义上的 CSS3 动画。使用 animation 属性制作动画可以更加灵活的设置动画,通过对关键帧及其状态以及循环次数的控制,页面元素会在对应的时间按照设定好的样式改变进行平滑过渡。不过区别于 Transition,Animation 作用于元素本身而不是样式属性,不局限于只有初始状态和结束状态,可以实现更自由的动画效果。

animation 语法如下:
animation: nameduration timing-function delay iteration-count direction;

具体属性值介绍如下:
会写动画的前端才是好开发(一)

关键帧定义:

会写动画的前端才是好开发(一)
示例:
大风车
华语群星 - 央视“启航 2016”跨年晚会

会写动画的前端才是好开发(一)

感兴趣的小伙伴请看这里(如无法打开,请复制链接到浏览器):
http://www.cnblogs.com/yingzi1028/p/7768595.html

使用 CSS3 transition 和 animation 实现动画,它最大的优势是摆脱了 js 的控制,并且能利用硬件加速以及实现复杂动画效果,但是会存在浏览器兼容性问题。

本转载自 Think 体验设计公众号。

原文链接: https://mp.weixin.qq.com/s/iFs4d7XDcoLA3ZweWMpdwQ

评论

发布