Basics of Animation

animation.js

render () {
  // how much progress is it?
  // from 0 to 1
  let progress = time / duration
  
  // apply ease function to the progress
  // lots of action is actually based on ease function
  // the ease function works like affine transformation matrix
  // it can make all kinds of simple transformation to the tween
  let ratio = ease(progress)
  
  // the value that will be fed into dom
  let value = start + ratio * change
  
  // set property value of the target
  setTargetPropertyValue(target, property, value)
  
  // render loop
  requestAnimationFrame(render)
}

render()