JavaScript 动画库

1.GSAP（GreenSock动画平台）：动画强国

• https://gsap.com/

  gsap.to('.box', {duration: 2, x: 300, rotation: 360, ease: 'bounce'});

 2. Anime.js：简单但强大

• https://animejs.com/

  anime({
    targets: '.circle',
    translateX: 250,
    scale: 2,
    duration: 3000
  });

3. Velocity.js：速度与优雅的结合

 http://velocityjs.org/

$('.element').velocity({
  translateY: '200px',
  rotateZ: '45deg'
}, 1000);

4. Three.js：将 3D 带入 Web

• https://threejs.org

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. Lottie：动画变得简单

• https://lottiefiles.com/

  lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json'
  });

6. Popmotion：最佳灵活性

• https://popmotion.io

  animate({
    from: 0,
    to: 100,
    onUpdate: latest => console.log(latest)
  });

7. Mo.js：动态图形变得简单 

• https://mojs.github.io/

  const burst = new mojs.Burst({
    radius:   { 0: 100 },
    count:    5,
    children: {
      shape:      'circle',
      fill:       { 'cyan' : 'yellow' },
      duration:   2000
    }
  });

8.Typed.js：让文本栩栩如生 

• https://mattboldt.com/demos/typed-js/

  new Typed('#element', {
    strings: ['Hello, World!', 'Welcome to my website!'],
    typeSpeed: 50
  });

 

9. AniJS：非编码人员的动画 

• https://anijs.github.io

  <div data-anijs='if: click, do: fadeIn, to: .target'></div>

10. Framer Motion：React 的动画超级英雄 

• https://www.framer.com/motion/

  <motion.div
    animate={{ x: 100 }}
    transition={{ duration: 2 }}
  />

11. ScrollMagic：基于滚动的动画大师

• http://scrollmagic.io/

new ScrollMagic.Scene({
  triggerElement: '#trigger',
  duration: 300
})
.setTween('#animate', {scale: 2.5})
.addTo(controller);

 

12. Motion One：小而强大 

• https://motion.dev/

  animate('#box', { x: 100 }, { duration: 1 });