渐进式动画解决方案

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

今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享,但还算是有幸的,在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣,而且现在和团队一直在致力于手淘互动动效相关的研究。经历了从Gif、视频到CSS Animation的零至一的过程,并且致力于JavaScript驱动的动效开发,以及现在致力于研究的数据化驱动的动效。这样的一个过程是幸福的,而且也是具有挑战力的。我想很多喜欢动画的同学也对这样的一个课程会感兴趣,所以接下来,我们根据@渚薰大神分享的PPT的思路来聊聊渐进式动画解决方案

PWA

最早听到PWAProgressive Web Apps)这样的一个概念是2016年在上海Qcon的分享会上听到@黄弦 大大的分享,但我们今天要聊的并不是Progressive Web APPs,而是其变身Progressive Web Animation。我们把其称为渐进式动画。那问题来了,什么才是渐进式动画呢?这是值得每位爱好动画的同学去思考的?为了更好的阐述自己对渐进式动画的理解,将分几个方向来介绍:

  • 重新认识动画
  • 如何操作动画
  • 如何管理动画
  • 如何制作动画
  • 重新思考动画

接下来一一聊聊。

重新认识动画

要重新认识动画,那么其中有两个非常重要的概念:动效插值

动效

动效是源于电影动效。动效是录音学范畴,简言之,指各种动作的声音效果,又被称为拟声。比如武打片里,骨折的声音是芹菜制造的,下雨的声音是由洗脸的声音制造的。

看上并不是我们所要说的动效,这并不要紧。如果需要和我们的实际工作中紧密联合在一起,我们的Web也可以有音效,特别是早期的Flash,各种的配合音效,得到与众不同的效果。随着CSS和HTML以及JavaScript相关技术不断的革新,同时各种特性能得到众多现代浏览器的支持。现在的Web展示形式也不断的变化,不管是Web页面或者说APP应用,都会或多或少的添加一些动效效果。

俗话说得好,颜值不够,动效来凑,Web动效已经不仅仅是Web设计的润滑剂了,它的功能更多的体现在交互逻辑、视觉渲染和创新实践上,上能引人注目,下能潜移默化。对于Web开发人员而言,更喜欢把这些动效称之为Web动画。为了接地气,后面也将称之为动画。

迪士尼动画大师乃特维克的毕生经验对Web动画浓缩成一句话:

动画的一切皆在于时间点和空间幅度!

事实上,动效设计和做动画是一脉相通的,我们不要做写实主义的动画,而是要通过时间点和空间幅度的设置为用户建立运动的可信度。这样描述感觉有点绕。其实我们可以这样来描述动画的概念:

动画是指由许多帧静止的画面,以一定的速度(比如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。为了得到活动的画面,第个画面之间都会有细微的改变。

其实我更喜欢说动画就是以时间置换空间。比如下图:

图形A状态(一个正方形)经过时间的变换到了图形B的状态(一个圆形)。从正方形变成圆形这样的一个过程就是一个动画效果(动效)。当然为了制作这样的一个动画,会添加控制动画的一些手段,比如控制持续时间、延迟时间、缓动函数、动画次数和方向之类的等。当然根据不同的制作动画的方式,这些控制动画的参数或者说手段吧,其方法不一样。这里暂且不深入的介绍。

刚才也说过了,这样的一个过程就是一个动画效果,专业一点称之为Motion Effect。而这个Motion Effect又受众多因素的影响。同样拿上面的示例来说,正方形是一下子变成圆形呢还是慢慢的变形圆形呢?又是经过多少时间才变成圆形呢?这一切的一切都会影响到。而其中有一个较好的方案就是在运动的过程中将插值引进来。

插值

这里所说的插值其实是指线性插值。线性插值是数学、计算机图形学等领域广泛的一种简单插值方法。在平常实际运用当中,把插值称之为lerp,简单而言:

lerp是两点之间的线性插值的别称。

同样的回到面的示例,正方形状态A是一个点,圆形状态B是一个点。如果我们把状态A称为0点,把状态B称为1点。那么在这个过程中我们可以有很多个值,比如0.10.2....9之类,比如下图所示:

01这样的一个过程就是一个插值过程。用到图形变化中来,比如正方形是四个点连起的图形,那么变成圆形,这个点数越多这个圆就越圆,比如163264128等等,也可以说点数越多,越趋向于圆。而这个程,我们使用插值原理来计算,效果会更佳。比如下面两个图:

一个高级动画或者动画艺术家都手绘的关键帧定义的一个动画。不管你是怎么一个高级的动画设计师,手绘总是有所限制的,如果我们换成插值来绘制:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

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

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