前端迪士尼动画守则上

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

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

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

当然有关系!

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

相关文章

来自专栏张善友的专栏

Using sqlite with .NET

The other day I found that there is a .NET wrapper for sqlite. sqlite is a very ...

2508
来自专栏c#开发者

jquery easyui datagrid mvc server端分页排序筛选的实现

1自定义一个ModelBinder public class filterRule { public string field { g...

4249
来自专栏谈补锅

记录C#常用的代码片段

using Newtonsoft.Json; using Newtonsoft.Json.Linq;

1172
来自专栏成长道路

JDBC动态SQL语句连接orcale数据库的工具类

import java.sql.Connection; import java.sql.DriverManager; import java.sql.P...

2700
来自专栏积累沉淀

Hive2.0.0操作HBase 1.2.1报错解决

首先看错  org.apache.hive.service.cli.HiveSQLException: Failed to open new session: ...

2549
来自专栏跟着阿笨一起玩NET

[C#]工具类—FTP上传下载

  不错的文章:http://www.cnblogs.com/greatverve/archive/2012/03/03/csharp-ftp.html

1601
来自专栏听雨堂

想修改CSS

      下载了一个“通用”的CSS文件,本来想偷懒的,结果发现有问题,就是它用的颜色是变量定义的,无法识别。我又找不到在哪里可以定义。 BODY{     ...

22210
来自专栏跟着阿笨一起玩NET

C# 通过HttpWebRequest在后台对WebService进行调用

http://www.cnblogs.com/macroxu-1982/archive/2009/12/23/1630415.html

3382
来自专栏飞扬的花生

日志帮助类

 1.代码 using System; using System.Collections.Generic; using System.Linq; using S...

2039
来自专栏菩提树下的杨过

SqlTransaction事务使用示例

using System; using System.Data; using System.Data.SqlClient; using System.Co...

1988

扫码关注云+社区