前端迪士尼动画守则上

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

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

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

当然有关系!

  • 我们知道在前端开发中,我们少不了使用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 条评论
登录 后参与评论

相关文章

来自专栏大数据挖掘DT机器学习

从采集到建模:某二手主机游戏交易论坛用户行为分析

作者:陈丹奕 宜人贷 数据分析师 https://ask.hellobi.com/blog/datanaystimprovement/4902?utm_sour...

3176
来自专栏数据处理

信息

1253
来自专栏tkokof 的技术,小趣及杂念

音乐游戏&音频解析 ABC(下)

  首先我们应该先确定一下我们到底需要解析歌曲的哪些信息?歌名?作者?呵呵,都不是,我们要解析的应该是歌曲的“信号”属性(譬如歌曲的BPM)。然而歌曲的这些属性...

831
来自专栏媒矿工厂

Netflix将VP9应用于移动视频流编码

A.采用的两种编码标准: 1. VP9: VP9是一款由Google开发的免费开源的视频编解码器,与最优的H.264编码器相比具有将近50%的性...

3684
来自专栏喔家ArchiSelf

令人激动的语音UI背后

亚马逊Echo和Echo Dot智能音箱获得了成功,它已经使语音命令(通常称为语音UI或语音UI)出现在了新技术产品中。在每一部智能手机和平板电脑上,大多数新型...

924
来自专栏CreateAMind

寒武纪神经网络处理器效能如何 ?

中国科学院计算技术研究所陈云霁、陈天石课题组提出的深度学习处理器指令集DianNaoYu被计算机体系结构领域顶级国际会议ISCA2016(Internation...

903
来自专栏鸿的学习笔记

使用python探知一个故事的大意(上)

2. Define the problem (outcomes, technicalrequirements)

732
来自专栏大数据文摘

从人脸识别到情感分析,这有50个机器学习实用API!

1165
来自专栏机器人网

自平衡机器人的控制系统设计

引 言 移动式机器人在各行各业具有广泛的应用,而轮式移动机器人由于具有结构简单、可控性强、成本低等优点,成为移动式机器人研究的一个主要方向。自平衡机器人采用水...

2645
来自专栏龙行天下CSIEM

科学瞎想系列之七十二 电机设计宝典(中学版)

【图片来自网络如有侵权敬请邮箱联系。欢迎原文转发到朋友圈,未经许可的媒体平台谢绝转载,如需转载或合作请邮件联系。联系邮箱laolicsiem@126.com】 ...

2004

扫码关注云+社区