Animation

随着时间的变化，给定对象能够通过改变其属性来展现出变化的视觉效果的过程。所以动画的形式中最重要的就是属性的改变，这样属性的改变可以是单个属性变化，也可以是多个属性同时变化，这样动画的效果就会更加精致和复杂。

技术媒介

  • CSS3
  • JS Animation
    • DOM
    • SVG
    • Canvas
    • WebGL
    • Sprite
  • Video
  • Gif
  • Flash
  • Silverlight / Java Applet
  • Other Plugins

动画的本质

时间与增量

  • 幅度控制
  • 时间控制
  • 速度控制
  • 不会延迟
  • 不会掉帧

动画队列

  • Animator
  • AnimationQueue

动画形式

逐帧动画 Sprite

逐帧动画高强度依赖于动画师。动画师绘制出逐帧的图像，然后利用 Tick 函数逐帧播放这些图片，形成动画。

补间动画 Tweens

补间动画是通过修改已知对象，一般是 DOM 元素负责视觉展现的 CSS 属性来实现的。一般利用：JS, CSS3属性都可以实现动画。值得一提的是：CSS动画成本低而且是由独立的线程操作，很方面，但不适用于复杂的，需要交互的动画。而 多个属性合成的补间动画 效果是很赞的！

以下罗列一些常用的有效补间属性：

  • CSS Normal
    • width / height
    • top / left / bottom / right
    • margin / padding / border
    • color
  • CSS Transform
    • transform
  • CSS 3D 属性

骨骼动画 Spine

骨骼动画有不少优秀的工具库支持，用于代码定义二维的骨骼运动。

粒子动画 Particles

  • 粒子随机性约束
    • 概率密度函数
    • 运动轨迹约束函数
    • 粒子生成和运动区域约束
    • 数量、大小约束
  • 粒子的装饰性
    • 纹理贴图、渐变
    • 闪烁、消失、出现
  • 粒子的物理性质
    • 碰撞、落体、加速度、弹射、爆炸
    • 粒子引力、斥力、连接

带物理引擎的动画

  • 加速
  • 碰撞
  • 弹射
  • 落体
  • 边界判断

动画速率

  • 以：CSS 的内置速度曲线作为参考
    • ease 类曲线是一种经典的 UI 交互组件的速度

三维动画

参考 Three.js 以及 WebGL 的基本知识以及动画基础。

Animation Library

FE Animation Library.

See pictures in the same category.

General Usage

  • Three.js 3D Animation complex but amazing!
  • Animate.css Most Popular CSS Animation lib
  • Bounce.js JS and CSS Mix Animation lib
  • Magic Animations Excellent Animation with impressive effects
  • Tween.js Google’s Animation Lib

Special Ones

  • DynCSS use for parallax related pages.
  • Hover.css

Perfomance

  • Use CSS animations for simpler “one-shot” transitions, like toggling UI element states.
  • Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind or slow-down.
  • If you choose to animate with JavaScript, go with TweenMax or, if you want a lighter-weight solution, TweenLite.

The Basic of Easing

Natural motion will make your users feel more comfortable with your apps, which in turn leads to a better overall experience.

  • Easing makes your animations feel more natural.
  • Choose ease-out animations for UI elements.
  • Avoid ease-in or ease-in-out animations unless you can keep them short; they tend to feel sluggish to end users.
  • Custom easing will allow you to give more personality to your projects.

Choose the Right Type

  • ease-out series Are nice to go.
  • See the Github Hosting Easing Curves.

Choose the Right Time

  • Ease-outs: around 200ms - 500ms. This gives the eye chance to see the animation, but doesn’t feel obstructive.
  • Ease-ins: around 200ms - 500ms. Bear in mind that it will jolt at the end and no amount of timing changes will soften that feel.
  • Bounce or elastic effects: around 800ms - 1200ms. You need to allow time for the elastic or bounce effect to ‘settle’. Without this extra time the elastic bouncing part of the animation will be really aggressive and unpleasant to the eye.

Animation Between Views

  • Use transitions to move between views; avoid using left, top or any other property that triggers layout.
  • Ensure any animations you use are snappy and the durations are kept short.
  • Consider how your animations and layouts change as the screen sizes go up; what works for a smaller screen may look odd when used in a desktop context.
  • Use this property: will-change: transform;

Animation Modal Views

  • Modal views should be used sparingly; users will get frustrated if you interrupt their experience unnecessarily.
  • Adding scale to the animation gives a nice ‘drop on’ effect.
  • Be sure to get rid of the modal view quickly when the user dismisses it, but you should bring it on to screen a little more slowly so it doesn’t surprise the user.

Asymmetric Animation Timing

The general rule of thumb, then, is:

  • For UI animations triggered by a user’s interaction, such as view transitions or showing an element, have a fast intro (short duration), but a slow outro (longer duration).
  • For UI animations triggered by your code, such as errors or modal views, have a slower intro (longer duration), but a fast outro (short duration).

Animation and Performance

  • 60fps
  • Take care that your animations don’t cause performance issues; ensure you know the impact of animating a given CSS property.
  • Animating properties that change the geometry of the page (layout) or cause painting are particularly expensive.
  • Where you can, stick to changing transforms and opacity.
    • Where you can, you should avoid animating properties that trigger layout or paint.
    • For most modern browsers this means limiting animations to opacity or transform, both of which can be highly optimized by the browser; it doesn’t matter if the animation is handled by JavaScript or CSS.
  • Use will-change to ensure that the browser knows what you plan to animate.
    • .box {will-change: transform, opacity;}

Ref

Tool support:

  • spirit: online web-animation maker

web_animation_lib.jpgweb_animation_perform.jpgweb_animation_tool.jpg