前端迪士尼动画守则上

阅读此文章前,建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈

该视频是描述迪士尼这么多年积累的动画开发经验和规则。

有人就好奇了,迪士尼的动画守则跟我们前端有啥关系吖?

当然有关系!

  • 我们知道在前端开发中,我们少不了使用css3 transiton(过渡)animation(动画)来制作页面生动的交互效果。
  • 然而生动形象的动画往往建立在正确的动画规则基础下

看到这些原则的时候,我就在思考,是否在前端开发动画中,能够运用到这些原则呢?故自己根据这些原则动手试了下相应的动画效果。

由于篇幅过长,故分成上下两篇来描述这些原则哈

守则一:squash and stretch 挤压和拉伸

当一个软性物体和地面撞击时,会有压扁和拉伸的状态,其真实的反映了现实中的物理碰撞情况,通过挤压和拉伸,极大的加强了物体碰撞时的动画效果,十分生动抢眼。

如同下面这个css动画,小球的弹跳运用了守则一,显得更为生动

查看源代码

守则二:Anticipation 准备动作

现实中,许多动作的发生都存在着准备过程,如篮球中跳投时的屈膝和手腕手臂弯曲的过程,例如这个手笔直的伸向远方的动作,一般人的动作是直接画A位置然后到B位置。但是为了加深观众对这个动作的印象,就会在AB中间插入一帧预备动作X。这样会更有力度感。预备动作是个神发明啊!!!让动画师们不仅仅只是对于现实生活动作的描摹,而是新的艺术创造。个人认为准备动作的意义在于一方面让观众理解知道接下来将会发生的过程,第二方面事得最终整个动作更加逼真。

如同下面的css动画, 胖子出锤前的抖动准备,增加了出锤的沉重勇猛的感觉,这就是准备动作带来的增效

查看源代码

守则三 : Staging 上演

英文没学好=。=!,(有道翻译的意思是上演)

我个人认为该守则,表达的意思是通过如同舞台出场的方式,来强调物体对象在场景中的展现,可以通过模糊渐变,抖动,闪烁,光影的等场景变化来突出想要强调的对象。

如下面的大棒!!,运用闪烁的阴影和色彩的变化,营造出定海神针的威武。

查看源代码

守则四:Straight Ahead 和 Pose to pose 逐帧画法和关键帧画法

顾名思义逐帧画法是一帧一阵接着画,关键帧则是先画出关键的动作点帧,然后再再有加中间帧画手画中间的画。例如 原画师画好了这些关键帧

然后交给另外一个人补充完整

我们在设计css动画时,也是通过先写关键帧的状态,然后通过浏览器渲染引擎去计算关键帧之间的状态差值,然后补齐关键帧之间状态变化的每一帧,这里就不做展示了。

守则五:Follow Through & Overlapping Action 动作惯性跟随和动作重叠

比如说做投掷的动作,投球出去后胳膊因为惯性没有停下来而是继续向前摆,所谓的动作惯性跟随就是发生在这个时刻,胳膊没有停在本应该停止的位置上而是靠惯性继续摆动一段时间然后反方向摆回来。动作重叠本质上是因为其他动作的连带性而产生的跟随动作,而且时间上动作间有互相重叠部分。比方说,如果一只奔跑的小狗突然停下来,她的耳朵可能仍然继续向前因为惯性运动着。

守则六:Slow in and Slow out (缓入缓出)

动作的起势和收势都是慢的,而中间的部分则是快的。这样一个动作才不会特别平板匀速,而会更有力度感一些。 例如一个硬币主动由1处滚到25处。

如下面的css动画

查看源代码

更多精彩,静等下一期哈!!!!!!!!!!!!!!!!!!!!!!!!!!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

程序员,就要有一套自己的终极装备

我们程序员工作,敲代码如同搬砖,如果你有好的开发工具,优秀的 IDE ,有好的代码管理工具,高效率的协同办公软件,都可以使我们搬砖的速度和质量有大幅度的提高,就...

993
来自专栏大数据

纳米白与Pandas

温井很久没有来更新,感谢小伙伴幕黑君积极推送文章,希望大家喜欢。 温井消失的理由,说来很不好意思。 一是后来意识到上一篇中提到的后台留言的粉丝,其实是给幕黑君留...

16410
来自专栏木子昭的博客

坚持在简书写博客的好处

501
来自专栏生信技能树

给学徒的GEO作业

看懂文章:https://www.jci.org/articles/view/96060/figure/1 看其C子图里面的TRAF4基因在4个数据集的表达量,...

713
来自专栏CDA数据分析师

快速了解数据科学与 R 语言数据分析

作者 CDA 数据分析师 数据科学家被认为是21世纪最性感也是最具发展前景的职业,目前有75%左右的数据科学家使用R语言,有35%左右的数据科学家将R语言作为...

1938
来自专栏机器人网

干货教程:教你DIY一个萌蠢可爱的机器鸟

这个名叫RoboBrrd的鸟形机器人项目来自RobotGrrl,原文发布于Makezine。Makezine对本项目的难度评级为“适中”,制造耗时估计在3-20...

3016
来自专栏数说工作室

导语:SAS正则表达式,统计师入门文本分析的捷径

文本分析很有用,数说君自己也玩过,炒鸡有意思,从论坛、网页上爬取网友的舆情数据,然后整理、统计、画图,就可以知道舆论的风暴是什么,可以知道网友最热议的话题、最想...

3015
来自专栏IT大咖说

IT大咖撩段子

01 一个士兵爱上一个公主,公主告诉他,如果他愿意连续100个晚上守在她的阳台下,她就接受他。于是士兵照做了,他等了一天,两天,三天……直到第九十九天,士兵离开...

2606
来自专栏CSDN技术头条

数据科学家应该掌握的5个工具

即使是知识渊博的数据科学家也能提升他们的技术水平。当谈及到分析你编纂的数据时,有大量的工具可以帮助你更好的理解数据。我们与我们的数据科学指导者探讨了很久,最后总...

1898
来自专栏数据小魔方

可视化基础——排版篇

image.png 今天要给大家简单聊聊文字排版的技巧! 以后无论是图表排版还是PPT版式中将会多次用到这些理念!!! 谈到排版,不得不提一位伟大的世界级设计大...

30211

扫码关注云+社区