Yehor Lvivski

Everything Animated 2

The Matrix strikes back

Animation is the rapid display of a sequence of images to create an illusion of movement.

History

Apple

JavaScript

$.fn.animate()

CSS

Transforms

• Do not disrupt the normal flow
• transform & transform-origin
• skew, scale, rotate, translate

• 1
• 3.2
• 3.5
• 10.5
• 10

3D Transforms

• perspective & perspective-origin
• scale3d, rotateY, rotateY, rotateZ, translate3d

• 12
• 4
• 10
• 10

Transitions

        transition:  [
          <property> ||
          <duration> ||
          <timing-function> ||
          <delay> ]
      

Transition example

• 1
• 3.2
• 4
• 10.5
• 10

Animations

        animaton:  [
          <animation-name> ||
          <duration> ||
          <timing-function> ||
          <delay> ||
          <iteration-count> ||
          <direction> ||
          <fill-mode> ]
      

Easings

Keyframes

        @keyframes animation-name {
        0%, 100% {...}
        from, to {...}
        50% {...}
        }
      

Animations Examples

• 4
• 4
• 5
• 12
• 10

Canvas

Canvas is Bitmap

Canvas

• getContext('2d')
• arc, stroke, fill, ...
• scale, rotate, translate, transform
• drawImage

Control

• 21
• 6
• 15
• 10

CSS animations, Bad parts

• Not easy to stop animation once started
• You have to deal with percents
• Limited user control

anima.js

• uses durations and delays
• has more predefined easings
• can generate pure CSS animations
• uses rAF

How it works

      matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
      )
      

scale and translate

      matrix3d(
        sX,   0,   0, 0,
          0, sY,   0, 0,
          0,   0, sZ, 0,
        tX, tY, tZ, 1
      )
      

      matrix3d(
        cos(Y)cos(Z),
        cos(X)*cos(Z)
        +sin(X)sin(Y)cos(Z),
        sin(X)sin(Z)
        -cos(X)sin(Y)cos(Z), 0,
        ...
      )
      

Decomposition

Matrix decomposition

• A×B≠B×A
• scale×rotate×translate

Thanks