前端开发不会写动画？分享4个动画库助你打造视觉盛宴

Hello大家好，我是日拱一卒的攻城师不浪，专注前端、后端、AI学习、二三维可视化、GIS等学习沉淀，这是2024年输出的第14/100篇文章，欢迎志同道合的朋友一起学习交流；

前言

上个周写了一篇大屏开发经验总结，引来了不少朋友围观，还未浏览的朋友可以直接跳转：可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（上）。

很多前端在开发大屏的时候，一般都会涉及很多动画效果开发，但我发现大部分前端动画开发能力薄弱。

今天，我给大家介绍一下我常用到的一些比较好用的动画开发库，基本上能够满足99.9%的业务开发需求，让产品经理和UI小姐姐看完后给你狂竖大拇指，记得收藏点赞噢~

gsap

做前端动画，我强推这个框架，真的很好用！

GSAP（GreenSock Animation Platform）是一个用于创建高性能、跨浏览器的动画的JavaScript库。它提供了许多强大而灵活的API，允许开发者创建各种复杂的动画效果。

使用起来非常简单，我们实现一个动画，将.box这个元素在x轴方向向右移动200px，耗时2秒

  gsap.to(".box", { 
    x: 200,
    duration: 2
  });

当然，这只是gsap功能的冰山一角，它还有很多可以让我们高效工作的能力：

1. CSS属性动画：可以对几乎所有CSS属性进行动画处理，包括不常用的属性。
2. 时间线控制：提供时间线功能，可以方便地控制动画的序列和并行。
3. 缓动函数：内置多种缓动函数，可以创建更自然的运动效果。
4. SVG和Canvas动画：支持SVG和HTML5 Canvas元素的动画。
5. 复杂动画路径：可以创建复杂的运动路径，实现复杂的动画效果。
6. 3D动画：虽然GSAP主要用于2D动画，但也支持一些3D动画效果。
7. 插件系统：有丰富的插件系统，可以扩展其功能，比如MorphSVG插件可以创建SVG图形的形变动画。
8. 性能优化：GSAP在性能上做了大量优化，可以处理大量的动画而不影响页面性能。
9. 跨浏览器兼容性：确保动画在各种浏览器和设备上都能平滑运行。

GSAP的一个关键特点是它对性能的优化，它使用优化的算法和浏览器的请求动画帧（requestAnimationFrame）API来实现流畅的动画效果。

此外，GSAP的API设计得非常人性化，易于学习和使用，同时它还提供了大量的文档和示例来帮助开发者快速上手。

gsap官方地址：https://gsap.com

lottie

Lottie 是一个由爱彼迎（Airbnb）开发的开源动画库，主要用法就是UI设计通过专业动画软件（如After Effects）设计好之后，输出json文件，然后通过 Lottie 将这些动画无缝地集成到移动app和网页中。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

Lottie优势：

1. After Effects 兼容性：Lottie 支持将 After Effects 项目（.json 格式的动画数据）直接转换为可在应用和网页中使用的动画。

2. 跨平台：Lottie 支持多种平台，包括 Android、iOS、Web（通过 React Native、Vue、Angular 等框架）。

3. 性能炸裂：Lottie 使用原生的图形和动画代码，这意味着动画性能通常比使用 CSS 或 JavaScript 直接编写的动画更优。

4. 定制化：动画可以被定制和动态修改，例如更改颜色、大小、速度等。

5. 轻量级：Lottie 动画文件体积小，因为它们只包含关键帧数据，而不是完整的视频或序列帧。

6. 易于使用：Lottie 提供了简单的 API，使得在项目中集成动画变得非常容易。

7. 动画效果丰富：由于它基于 After Effects，Lottie 可以支持复杂的动画效果，包括3D效果、遮罩、表达式等。

8. 实时渲染：Lottie 动画是实时渲染的，这意味着动画可以在不同的屏幕尺寸和分辨率下保持高质量。

9. 社区支持：作为一个开源项目，Lottie 有一个活跃的社区，不断有新的功能和改进被加入。

10. 动画缓存：Lottie 支持动画的缓存，可以提高重复播放动画的性能。

Lottie 的使用场景非常广泛，从简单的加载指示器到复杂的交互式动画，都可以用 Lottie 来实现。

Lottie官方地址：https://airbnb.io/lottie/#/web

React Spring

React Spring：react开发者的福音，这款框架是基于React的动画库，它使用基于物理的动画，可以创建非常自然和流畅的动画效果。

初始化一个简单的动画，让div从左向右移动：

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: '#ff6d6d',
        borderRadius: 8,
        ...springs,
      }}
    />
  )
}

React Spring官方地址：https://www.react-spring.dev/docs/getting-started

Anime.js

Anime.js：一个轻量级的JavaScript动画库，它使用CSS属性和SVG，可以创建平滑的CSS和SVG动画

初始化一个简单的动画：

anime({
  targets: '.css-prop-demo .el',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});

说实话，看api，有点类似于gsap动画库，也不知道它倆是怎么个关系~

Anime.js官方地址：https://animejs.com/documentation/#cssSelector

其他动画库

还有很多其他的动画库，但是作者本人还没用过，如果有用过的小伙伴也可以在评论区发表一下使用体验或者看法。

1. Framer Motion：也是一个基于React的动画库，它提供了一个简单的API来创建动画和交互效果。

2. Velocity.js：一个强大的动画引擎，可以与jQuery结合使用，提供丰富的动画效果。

3. Popmotion：一个功能全面的动作和动画库，支持React和非React环境。

4. Web Animations API：是现代浏览器提供的原生JavaScript动画API，允许开发者以编程方式创建复杂的动画。

5. KUTE.js：一个轻量级的动画库，专注于性能和易用性，支持CSS属性、SVG和自定义属性的动画。

6. Flickity：虽然主要是一个轻量级的画廊和卡丁车库，但它也提供了一些基本的动画功能。

7. GreenSock Draggable：GSAP的一个插件，允许元素的拖放，可以创建交互式的动画效果。

8. CyberConnect：一个基于Web Animations API的库，可以创建复杂的动画和过渡效果。

总结

目前笔者用的比较多的是gsap和lottie，特别是在threejs项目中，用gsap做动画再合适不过，而lottie大部分时间我是用来展示一些复杂的无交互的动画开发。

如果你也对大屏开发感兴趣，可以加我：brown_7778，我拉你进技术交流群，还有机会参与多个开源项目的共建（目前都已经超100star）

如果觉得文章对你有帮助，也欢迎一键三连👏👏👏，你的鼓励是支持我持续原创下去的动力~