[干货] JavaScript 动画概述

一、JS 动画原理

JS 动画函数原理实现

二、原生JS 动画知识点

1. DOM 自身动画

const el = document.createElement('div')
el.innerText = 'Hello World'
document.body.appendChild(el)

const animate = el.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(200px)' }
], {
  duration: 1000,
  iterations: Infinity,
  easing: 'ease-in-out'
})

animate.pause()
// animate.finish()

2. new Animation new KeyframeEffect 构造函数

• MDN Animation
• MDN KeyframeEffect

const el = document.createElement('div')
el.innerText = 'Hello World'
document.body.appendChild(el)

const animate = new Animation(
  new KeyframeEffect(
    el,
    [
      { transform: 'translateX(0)' },
      { transform: 'translateX(200px)' }
    ],
    {
      duration: 1000,
      iterations: Infinity,
      easing: 'ease-in-out'
    }
  )
)
animate.play()
// animate.pause()
// animate.finish()

三、推荐动画库

1、auto-animate

介绍：零配置插入式动画实用工具，可向 Web 应用添加平滑过渡。你可以把它用在 React、Vue 或任何其他 JavaScript 应用程序中。

主页：auto-animate.formkit.com
Github：github.com/formkit/aut…

React

Vue

Native JS

2、animejs

介绍：超强的动画引擎

主页：animejs.com
Github：github.com/juliangarni…
文档：animejs.com/documentati…