国产动画音乐分享组

讲真,会写动画的前端才是好开发!

Think体验设计 2020-07-06 06:45:02


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


具体属性值介绍如下:   

描述

transition-property

规定设置过渡效果的 CSS 属性的名称。(none / all / property)

transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

规定速度效果的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))

transition-delay

定义过渡效果延迟时间。


示例:


Animation


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


animation语法如下:

animation: nameduration timing-function delay iteration-count direction;


具体属性值介绍如下:

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。(keyframename、none)

animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。  (normal、alternate)


关键帧定义:


示例:

感兴趣的小伙伴请看这里(如无法打开,请复制链接到浏览器)

http://www.cnblogs.com/yingzi1028/p/7768595.html


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


 3. canvas 动画 


canvas 作为H5新增元素,是页面图形绘制的容器,借助Web API来实现动画的。通过getContext()获取元素的绘制对象,通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。


示例:(请点击图片查看大图)


上面的例子画出了一幅1000*600,淡蓝色背景有动态下雪效果的图片,其中一帧如下图所示:


canvas 的主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过 javascript来渲染控制动画的执行,可用于实现较复杂动画。同样都是使用编码的方式由前端开发工程师完成动画效果,canvas要比原生js效率高的多,流畅的多能够轻松的实现更多的动画效果。


canvas的缺点是没有提供为其内部元素添加事件监听的方法,需要自己动手实现,使其内部元素能够响应事件。首先获得鼠标在 canvas 上的坐标,计算当前坐标在哪些元素内部,然后对元素进行相应的操作。配合自定义事件,我们就可以实现为 canvas 内的元素添加事件监听的效果。


 4. SVG动画 


SVG用来定义用于网络的基于矢量的图形,其使用 XML 格式定义图像,由SVG元素内部的元素属性控制。Svg不依赖分辨率,基于矢量图,支持事件处理,最适合带有大型渲染区域的应用程序。


示例:(请点击图片查看大图)


上面的例子实现的是一个跳动的心的动图,其中一帧如下图所示:

想看动图的小伙伴请看这里(如无法打开,请复制链接到浏览器)

https://code.h5jun.com/kul


SVG的一大优势是含有较为丰富的动画功能,原生绘制各种图形、滤镜和动画,并且能被js调用。


但是,另一方面元素较多且复杂的动画使用svg渲染会比较慢,CSS3动画的出现让svg的应用变得相对少了。


感兴趣的小伙伴请戳这里(如无法打开,请复制链接到浏览器)https://segmentfault.com/a/1190000008215226


另外,还有在不同框架下,也都有自己实现动画的方法,例如jQuery中的show、slide、fade以及animate方法,或者angularJs中的ngAnimate通过添加或移除 class,使用预定义的样式类来设置 HTML 元素的动画,或者animate()方法, 在组件对应的模板上直接加动效,AnimationBuilder, 在自定义指令中给宿主元素加动效。


看到这里大家一定很疑惑,既然实现动效的方法有那么多种,那么对于组件来说,应该如何做选择?


这就要结合组件来看了,首先使用 css3 中 animation 和 transition实现,这种实现方式除了IE9及其以下版本不兼容之外,其他浏览器之下都有很好的兼容性。这种实现方式能够将组件样式与组件动画分离开展示,非常有利于后期维护,对国际化和换肤也是十分友好的。


然后根据情况选择angular的ngAnimate或者jQuery中的.animate()方法,因为这两种方法的使用都是有前提和限制的,并不能实现左右的动画效果。


最后,如果以上方法还不能满足你的需求,那就只能使用 JavaScript 中的 setInterval 和setTimeOut 方法实现了,在定时器中不断修改某个样式的值,直到达到临界值,实现动画。


— END —


    别忘了给 作者:蔡萌 点赞呦!  



有什么想对作者说的吗?快来留言吧!


相关链接:


  • 溜到飞!Vue 组件化开发之 Vuex 了解一下~

  • 解决回调深渊的利器!这就是Promise!

  • 十分有趣的全球化设计!

  • 华为云服务图标升级的“那点儿事”

  • Angular2组件间的数据传递,这几种姿势你知道吗?

  • 拒绝千篇一律,你也能秒变配色高手!

  • Angular 生命周期钩子,让你掌控每个关键时刻!



THINK体验设计

微信ID:hw-Think

长按二维码关注有惊喜



点击“阅读原文”,进入华为云官网 ! 

Copyright © 国产动画音乐分享组@2017