大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
您准备好将您的网页设计提升到一个新的水平吗?JavaScript 动画库是将静态页面转变为动态、引人注目的体验的秘诀。无论您是经验丰富的开发人员还是刚刚起步的开发人员,这些库都提供了强大的工具来将您的创意愿景变为现实。让我们深入了解 2024 年掀起波澜的 12 个 JavaScript 动画库!
1.GSAP(GreenSock动画平台):动画强国
![da1b79cedfd76c6b0771c95306a8ee79.png](https://img-blog.csdnimg.cn/img_convert/da1b79cedfd76c6b0771c95306a8ee79.png)
GSAP 就像动画库中的瑞士军刀。它坚固耐用、用途广泛,深受全球专业人士的喜爱。
https://gsap.com/
例子:
gsap.to('.box', {duration: 2, x: 300, rotation: 360, ease: 'bounce'});
这个简单的代码使盒子元素向右移动 300 像素,同时旋转 360 度并具有弹性效果。
2. Anime.js:简单但强大
![ba80d46ea062f2769bf38f8c540df578.png](https://img-blog.csdnimg.cn/img_convert/ba80d46ea062f2769bf38f8c540df578.png)
Anime.js 证明,有时,少即是多。其轻量化特性并不会影响功率。
https://animejs.com/
例子:
anime({
targets: '.circle',
translateX: 250,
scale: 2,
duration: 3000
});
该动画在 3 秒内平滑移动并放大圆形元素。
3. Velocity.js:速度与优雅的结合
![73ad6de2f75c867e0edd5403651306d6.png](https://img-blog.csdnimg.cn/img_convert/73ad6de2f75c867e0edd5403651306d6.png)
Velocity.js注重性能而不牺牲功能。这就像将火箭绑在您的动画上一样!
http://velocityjs.org/
例子:
$('.element').velocity({
translateY: '200px',
rotateZ: '45deg'
}, 1000);
此代码仅在一秒钟内将元素向下平移 200 像素并旋转 45 度。
4. Three.js:将 3D 带入 Web
![945204ceed0e5344f72af00b1e44a1bc.png](https://img-blog.csdnimg.cn/img_convert/945204ceed0e5344f72af00b1e44a1bc.png)
Three.js开辟了一个全新的维度——字面上!它是您在浏览器中创建令人惊叹的 3D 图形的门户。
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);
此代码片段创建了一个简单的绿色 3D 立方体,您可以对其进行操作和设置动画。
5. Lottie:动画变得简单
![b36eee818d51deae5e09b91251eb210f.png](https://img-blog.csdnimg.cn/img_convert/b36eee818d51deae5e09b91251eb210f.png)
Lottie 将复杂的动画变成小菜一碟。这就像你的口袋里有一个专业的动画师!
https://lottiefiles.com/
例子:
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
});
此代码从 JSON 文件加载并播放 Lottie 动画。
6. Popmotion:最佳灵活性
![3cbac7c1052757f83e4c6f18af998b02.png](https://img-blog.csdnimg.cn/img_convert/3cbac7c1052757f83e4c6f18af998b02.png)
Popmotion就像变色龙 - 它可以轻松适应任何 JavaScript 环境。
https://popmotion.io
例子:
animate({
from: 0,
to: 100,
onUpdate: latest => console.log(latest)
});
这个简单的动画从 0 计数到 100,记录每个值。
7. Mo.js:动态图形变得简单
![0039517fc451a3ff5738d98f15776a2d.png](https://img-blog.csdnimg.cn/img_convert/0039517fc451a3ff5738d98f15776a2d.png)
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:让文本栩栩如生
![72b67d4eb2241484d17483ea47d3755a.png](https://img-blog.csdnimg.cn/img_convert/72b67d4eb2241484d17483ea47d3755a.png)
Typed.js为您的文本增添了人情味。这就像您的网站上有一个幽灵打字员!
https://mattboldt.com/demos/typed-js/
例子:
new Typed('#element', {
strings: ['Hello, World!', 'Welcome to my website!'],
typeSpeed: 50
});
这将创建一个在两个短语之间交替的打字动画。
9. AniJS:非编码人员的动画
![df75585e9f4a4a859ff548bc8dcab079.png](https://img-blog.csdnimg.cn/img_convert/df75585e9f4a4a859ff548bc8dcab079.png)
AniJS就像魔法一样 - 您无需编写任何代码即可创建动画!
https://anijs.github.io
例子:
<div data-anijs='if: click, do: fadeIn, to: .target'></div>
此 HTML 属性会在单击时创建淡入动画。
10. Framer Motion:React 的动画超级英雄
![02b36054f6617331dc211c1039ef5afd.png](https://img-blog.csdnimg.cn/img_convert/02b36054f6617331dc211c1039ef5afd.png)
Framer Motion和 React 的结合就像花生酱和果冻一样。它是 React 工具包的完美补充。
https://www.framer.com/motion/
例子:
<motion.div
animate={{ x: 100 }}
transition={{ duration: 2 }}
/>
该 React 组件在 2 秒内向右移动 100 像素的动画。
11. ScrollMagic:基于滚动的动画大师
![7d4453de95f613f0d18d350204d2d2e8.png](https://img-blog.csdnimg.cn/img_convert/7d4453de95f613f0d18d350204d2d2e8.png)
ScrollMagic将滚动变成一次冒险。这就像当用户滚动浏览您的网站时制作一部迷你电影!
http://scrollmagic.io/
例子:
new ScrollMagic.Scene({
triggerElement: '#trigger',
duration: 300
})
.setTween('#animate', {scale: 2.5})
.addTo(controller);
这将创建一个随着用户滚动而缩放元素的动画。
12. Motion One:小而强大
![e1cfeab5b07a45b833f4d9e85afc0846.png](https://img-blog.csdnimg.cn/img_convert/e1cfeab5b07a45b833f4d9e85afc0846.png)
Motion One证明了小包装带来的好东西。它很轻,但具有强大的冲击力!
https://motion.dev/
例子:
animate('#box', { x: 100 }, { duration: 1 });
这条简单的线在一秒钟内将一个盒子向右移动 100 像素。
总结
您的动画之旅从这里开始!
现在您已经拥有了 12 个令人惊叹的 JavaScript 动画库,可以将您的 Web 项目从普通变为非凡。无论您是要创建简单的悬停效果还是复杂的 3D 世界,这些库都能满足您的需求。
请记住,最适合您的库取决于您的具体需求和项目要求。不要害怕尝试不同的选择来找到最适合您的选择。
那么,您想首先尝试哪个库呢?您已经在您的项目中使用了其中一些吗?在下面的评论中分享您的经验和问题。让我们一起为网站注入活力吧!
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍