言

上个周写了一篇大屏开发经验总结，引来了不少朋友围观，还未浏览的朋友可以直接跳转：juejin.cn/post/736541…

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

今天，我给大家介绍一下我常用到的一些比较好用的动画开发库，基本上能够满足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官方地址：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官方地址：airbnb.io/lottie/#/we…

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官方地址：www.react-spring.dev/docs/gettin…

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官方地址：animejs.com/documentati…

其他动画库

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

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大部分时间我是用来展示一些复杂的无交互的动画开发。

作者：攻城师不浪
链接：https://juejin.cn/post/7367696432935419944

用Adobe After Effects (AE) 制作MG动画是一种常见的做法，尽管AE的学习曲线相对较高，但通过逐步学习和实践，你可以掌握这项技能。下面是使用AE制作MG动画的基本流程和操作：

1. 准备阶段

• 规划概念: 确定MG动画的主题、故事板和设计风格。
• 收集素材: 搜集所需的图片、音频、视频和其他视觉元素。
• 创建故事板: 设计每个场景的布局和动作流程。

2. 创建项目

• 新建项目: 打开AE，点击“文件” > “新建” > “项目”，命名项目并保存。
• 新建合成: 在项目面板中点击“新建” > “合成”，设定合成的尺寸（通常为1920x1080像素）、帧速率、持续时间和背景颜色。

3. 构建动画

• 绘制元素: 使用形状图层工具（矩形、椭圆、多边形等）来绘制静态元素。
• 添加文本: 在工具栏中选择文本工具，输入文字并调整字体、大小和颜色。
• 创建动画: 使用关键帧来定义动画的起始和结束状态，例如移动、旋转、缩放等。
• 应用效果: 为元素添加各种视觉效果，如阴影、发光、模糊等。

4. 动态元素

• 使用钢笔工具: 绘制路径和动态线条，为指针、箭头等创建流畅的动画。
• 路径动画: 将元素沿着特定路径移动，可以通过绘制路径来实现。

5. 时间轴管理

• 调整层顺序: 在时间轴面板中管理各个图层的顺序。
• 使用预合成: 对复杂的元素或场景进行预合成，便于管理和编辑。

6. 视觉效果与转场

• 过渡效果: 为场景间的切换添加过渡效果，比如淡入淡出、滑动等。
• 视觉特效: 应用AE内置的效果插件，或者安装第三方插件来增强视觉效果。

7. 后期处理

• 添加音频: 导入背景音乐或音效，并调整音量和同步点。
• 颜色校正: 使用色彩校正工具调整整体色调和对比度。
• 导出视频: 设置输出格式、分辨率、码率等参数，导出最终的视频文件。

8. 实践案例

• 示例一: 制作一个倒计时三秒的MG动画。新建合成，持续时间为10秒。创建纯色背景层。使用形状图层绘制圆圈，添加动画效果。调整动画的关键帧以实现所需的效果。
• 示例二: 制作指针动画。使用矩形工具和椭圆工具绘制底图和椭圆。复制椭圆并填充不同颜色，制作刻度。使用钢笔工具画出指针。调整刻度、指针和表盘的旋转。开启运动模糊选项，调整运动模糊效果。
• MG动画的风格多种多样，可以适应不同的应用场景和创意需求。以下是几种常见的MG动画风格：

1. 扁平化风格：简洁、直接，色彩鲜明，使用简单的形状和颜色。
2. MBE描边风格：一种独特的轮廓描边风格，边缘通常带有圆形或圆角。
3. 线条风格：使用线条来构成画面，可以是精细的手绘线条或简单的几何线条。
4. 手绘插画风格：给人以温馨、自然的感觉，通常使用手绘的线条和色彩。
5. 点线科技风格：具有高端、大气的特点，以科技感的线条为主。
6. 3D风格：使用电脑生成的3D模型和动画，给人一种立体、真实的感觉。
7. 抽象风格：使用抽象的形状和颜色，以及非线性的剪辑。
8. 文字动画风格：主要通过文字的变化来产生动态效果。
9. 科幻风格：具有未来感和科技感，主要表现在机械设备、太空、机器人等方面。
10. 奇幻风格：表现为神秘、异域、魔法等元素，营造神话般的氛围。
11. 战斗风格：以激烈的场面、精彩的动作为主要特点。
12. 竞技风格：以运动、比赛、竞技为主题。

关于MG动画相关的岗位素材，你可以从以下几个途径寻找：

• 在线素材平台：如 Shutterstock, Adobe Stock, Pond5, VideoHive 等，这些网站提供大量的MG动画模板和素材。
• 专业社区：Behance, Dribbble 和 ArtStation 等网站上有许多专业的设计师分享的作品，可以从中获取灵感或联系作者定制素材。
• 动画制作软件内置资源：Adobe After Effects, Blender, Toon Boom 等软件通常会有内置的模板和资源库。
• 专门的MG动画素材网站：如 Artlist, PremiumBeat 等专注于视频和动画素材的网站。
• 以下是一些常用的MG动画制作软件：

1. Adobe After Effects：
2. 专业级别的动画制作软件，广泛应用于影视后期制作和MG动画创作。
3. 支持2D和3D动画，可以创建复杂的动画效果。
4. 学习曲线较陡峭，但对于专业人士来说是非常强大的工具。
5. Adobe Animate（原名Flash Professional）：
6. 适用于创建矢量动画和交互式内容。
7. 特别适合制作基于Web的动画，支持HTML5 Canvas, WebGL, Flash/SWF 等输出格式。
8. Cinema 4D：
9. 一款3D建模和动画软件，也常用于MG动画的制作。
10. 提供了直观的界面和强大的3D渲染功能。
11. Blender：
12. 免费开源的3D建模和动画软件。
13. 可以用来制作高质量的MG动画，支持多种渲染引擎。
14. Toon Boom Harmony：
15. 高级的2D动画制作软件，广泛应用于电视动画和电影制作。
16. 提供了高级的绘画和动画工具。
17. Moho (Anime Studio)：
18. 适合制作2D动画，特别是骨骼绑定技术使得角色动画更加容易。
19. 提供了直观的界面和强大的动画工具。
20. 万彩动画大师：
21. 入门级的MG动画制作软件，易于上手。
22. 内置了丰富的动画模板、场景和特效，适合初学者。
23. Renderforest：
24. 在线动画视频制作平台，无需下载软件。
25. 提供了大量的模板和预设动画效果，适合社交媒体营销等场景。
26. Biteable：
27. 在线视频制作工具，适合快速套用模板制作视频。
28. 适合社交媒体平台上的视频制作，也有MG动画模板。
29. 秀展网：
30. 在线制作MG动画的网站，无需下载软件。
31. 提供大量模板，支持云端同步，方便异地编辑。

MG动画个人怎么变现

1. 承接项目：
2. 承接来自企业和个人客户的定制项目，如制作产品介绍、品牌宣传、教育课程等内容的MG动画。
3. 通过自由职业者平台（如Upwork、Freelancer、猪八戒网等）寻找客户和项目。
4. 在线课程和教程：
5. 制作关于MG动画制作技巧的在线课程，在各大在线教育平台（如Udemy、Coursera、腾讯课堂等）销售。
6. 发布免费的教程吸引粉丝，然后推出付费的进阶课程或一对一辅导服务。
7. YouTube频道：
8. 创建一个YouTube频道，发布创意的MG动画作品，积累观众并通过YouTube广告分成计划获得收入。
9. 也可以通过频道推广自己的其他业务，如定制服务或产品。
10. 社交媒体营销：
11. 利用微博、抖音、快手等社交媒体平台发布作品，吸引粉丝并推广自己的服务。
12. 通过社交媒体上的影响力接广告合作。
13. 制作和销售模板：
14. 设计并销售MG动画模板给需要快速制作内容的企业和个人。
15. 可以通过专门的市场（如VideoHive、Motion Array等）出售这些模板。
16. 制作微课或短片：
17. 制作教育性质的微课或者短片，用于在线教育平台或者企业的内部培训。
18. 与教育机构合作，为其开发教学资源。
19. 制作微信表情包：
20. 制作具有个性的MG动画表情包，在微信表情开放平台上线，通过下载和赞赏等方式获取收益。
21. 个人品牌商品化：
22. 将自己的MG动画形象或设计印刷在T恤、杯子等商品上，通过电商平台（如淘宝、京东等）销售。
23. 版权授权：
24. 将自己的原创MG动画作品授权给其他媒体平台使用，比如授权给电视台、电影制片厂等作为背景动画。
25. 参与比赛和奖项：
26. 参加国内外的动画竞赛，如果获奖可以提高知名度，进而带来更多的商业机会。
27. 开设个人工作室：
28. 如果条件允许，可以开设自己的动画工作室，提供全方位的动画解决方案，包括创意策划、脚本编写、动画制作等。

通过以上步骤，你可以开始在AE中制作简单的MG动画。随着经验的积累，你会学会更多高级技巧和技术。希望这能帮助你入门AE的MG动画制作！