动效设计的物理法则.pdfVIP

动效设计的物理法则 动效作为当今提升网页感官效果的利器，在各种类型的网页中已经全面开花，如何做到自然流畅让 用户感觉舒适的动画效果呢？今天就来跟大家聊一聊动效设计的物理法则，以及它是如何应用的。 首先来一发大师金句，迪士尼动画大师格里穆 乃特维克曾经说过：· 动画制作和动效设计是本质相通的，我们需要为用户建立一种 视觉的真实“ ”，即动作是可信的，我 们需要获得的不是照搬线下场景的写实主义，而是 可信度“ ”，要让用户感知到这个动作是成立的。 这里，就要搬出高大上的物理学了！ 物理学四大基本力 —— 万有引力、电磁相互作用力、弱相互作用力、强相互作用力，我们在现实生 活中能够感知到的基本上都源自万有引力（其他三种力咱也分析不出来啥）。换句话说，用户在现 实生活中建立的动作经验，皆源于物体的 重量感“ ”。要分析万有引力，就得翻出牛顿大大的课本章 节了。 （一）牛顿第一定律 根据牛顿第一定律 —— 惯性定律，任何物体都要保持匀速直线运动或静止状态，直到外力迫使它改 变运动状态为止，说白了，就是不考虑任何力的作用的物体运动，其速度大小和方向是没有任何变 化的，用公式表示： 通过以上公式我们可以绘制出匀速直线运动的位移 - 时间曲线： 应用到网页设计中，为了实现过渡效果，我们必须模拟出页面区块的位移 - 时间曲线，对于运动拆解 分析得到的分段曲线，可以运用计算机图形图像造型的基本工具 —— 贝塞尔曲线绘制出来，调 用CSS3 animation-timing-function 属性中的贝塞尔曲线绘制函数 cubic-bezier 可以轻松的用程序模 拟运动轨迹。 例如上图所示的贝塞尔曲线可以用四个点来定义，其中 P0、 P3是固定的点，它们的坐标值是默认 的[0,0],[1,1] 。P1 、P2两点则用来控制曲线的形状和曲率， PS 中的钢笔工具的锚点具有相同功能， 这两个控制点的坐标值是需要我们通过 cubic-bezier(x1, y1, x2, y2) 自定义的，范围在 [0, 1] 。 对于匀 速直线运动，将运动时间设置为 1s ，通过 cubic-bezier 模拟运动如下： linear 动画从头到尾的速度是相同的。应用到网页的 banner 区域切换动效中的效果（动图需 加载）： 感觉不是很自然，由于空气阻力的存在，程序模拟的匀速直线运动在现实生活中是很难实现的，因 此对于这样一个用户平时很少感知到的运动是很难建立信任感的。这样的匀速直线运动也是我们在 进行动效设计时需要极力避免的。考虑到需要分析物体运动的受力情况，我们借助牛顿第二定律来 拆解运动。 （二）牛顿第二定律 根据牛顿第二定律 —— 物体加速度的大小跟作用力成正比，跟物体的质量成反比，加速度的方向跟 作用力的方向相同。当物体持续受到一个不变的力的作用时，它将做匀加速直线运动，用公式表示 ： 绘制出匀加速直线运动的位移 - 时间曲线： 通过 cubic-bezier 模拟运动如下： ease-in 动画从低速开始，逐渐加速，收尾态速度最快。应用效果： 开始状态符合静止物体开始运动的物理规律，但是收尾态不太符合，物体在结束运动之前速度是整 个运动过程中最快的，这是不合逻辑的。 如果我们让收尾状态符合物理法则，那么就是需要让物体 减速下来，匀减速运动的公式如下： 绘制出匀加速直线运动的位移 - 时间曲线： 通过 cubic-bezier 模拟运动如下： ease-out 动画从高速开始，以低速结束。应用效果： 模拟的是物体收到一个持续时间很短的推力作用后自然滑行并慢慢停止的过程。在本应用场景使用 这种效果是比较合适的， banner 图片刚开始切换运动时，需要用一个比较快的速度来吸引用户的注 意力 “嗨！这儿有新的信息！ ”，在快要抵达最终位置的时候，需要逐渐慢下来，因为此时用户已经将 注意力转移到新的