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.divanimate={{ 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 });