准备好把你的网页设计提升到一个新的水平了吗？JavaScript 动画库是可以将静态页面转换为动态、引人注目的体验的秘密武器。无论您是经验丰富的开发人员还是刚刚起步的开发人员，这些库都能提供强大的工具，将您的创意愿景变为现实。让我们深入了解 12 年掀起波澜的 2024 大 JavaScript 动画库！

1. GSAP（GreenSock 动画平台）

GSAP就像动画库的瑞士军刀。它坚固耐用、用途广泛，深受全球专业人士的喜爱。

例：

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

这个简单的代码使框元素向右移动 300 像素，同时旋转 360 度，具有弹性效果。

2. Anime.js：简单而强大

Anime.js证明，有时候，少即是多。它的轻巧特性不会在功率上妥协。

例：

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

此动画在 3 秒内平滑移动并放大圆形元素。

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

Velocity.js都是关于性能的，同时又不牺牲功能。这就像在你的动画上绑上火箭一样！

例：

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

此代码将元素向下转换 200 像素，并在一秒钟内将其旋转 45 度。

4. Three.js：将 3D 引入网络

Three.js开辟了一个全新的维度 - 从字面上看！它是您在浏览器中创建令人惊叹的 3D 图形的门户。

例：

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：动画变得简单

Lottie 将复杂的动画变成了小菜一碟。这就像你的口袋里有一个专业的动画师！

例：

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

此代码从 JSON 文件加载并播放 Lottie 动画。

6. Popmotion：最佳的灵活性

Popmotion就像一条变色龙 - 它可以轻松适应任何JavaScript环境。

例：

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

这个简单的动画从 0 到 100 计数，记录每个值。

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

Mo.js使创建动态图形就像用蜡笔绘图一样简单，但结果却更加壮观！

例：

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

此代码创建一个连拍动画，其中包含五个扩展和改变颜色的圆圈。

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

Typed.js为您的文本增添了人情味。这就像在您的网站上有一个幽灵打字员！

例：

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

这将创建一个在两个短语之间交替的键入动画。

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

AniJS 就像魔术一样 - 您无需编写任何代码即可创建动画！

例：

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

此 HTML 属性在单击时创建淡入动画。

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

Framer、Motion 和 React 就像花生酱和果冻一样搭配在一起。它是你的 React 工具包的完美补充。

例：

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

这个 React 组件在 2 秒内向右移动 100 个像素。

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

ScrollMagic 将滚动变成一场冒险。这就像在用户滚动浏览您的网站时创建一部迷你电影！

例：

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

这将创建一个动画，该动画在用户滚动时缩放元素。

12. Motion One：小而强大

Motion One 证明了好东西来自小包装。它很轻，但很有冲击力！

例：

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

这条简单的线在一秒钟内将一个盒子向右移动 100 像素。

你有这12 个令人惊叹的 JavaScript 动画库，可以将您的 Web 项目从普通转变为非凡。无论您是创建简单的悬停效果还是复杂的 3D 世界，这些库都能满足您的需求。

请记住，最适合您的库取决于您的特定需求和项目要求。不要害怕尝试不同的选项来找到您的完美匹配。

SS简介

1.什么是CSS？

• CSS：Cascading Style sheet层叠样式表或级联样式表
• ? 是一种样式设置规则，用于控制页面的外观的样式

2.为什么使用CSS？

• 实现内容与样式的分离，方便团队开发
• 样式复用，便于网站后期维护
• 页面的精确控制，让页面更精美

3.CSS作用

• 页面外观美化
• 布局和定位

CSS动画

动画的原理

• 人脑的bug

定义

• 由许多静止的画面（帧）组成
• 以一定的速度（如每秒30张）连续播放时
• 肉眼因视觉残象产生错觉
• 而误以为是活动的画面

概念

• 帧：每个静止的画面都叫做帧
• 播放速度：每秒24帧（影视）或者每秒30帧（游戏）

浏览器渲染原理

浏览器渲染过程步骤

• 根据HTML构建HTML树（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两棵树合并成一棵渲染树（render tree）
• Layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制（把边框颜色、文字颜色、阴影等画出来）
• Comepose合成（根据层叠关系展示画面）

如何更新样式

一般JS来更新样式

• 比如div.remove()删除节点
• 比如div.style.background='red'
• 比如div.style.display='none'
• 比如div.classList.add('red')

三种更新方式

1.JS/CSS》样式》布局》绘制》合成

比如：div.remove()会触发当前消失，其它元素relayout。

2.JS/CSS》样式》绘制》合成

比如：改变背景色，直接repaint+composite。

3.JS/CSS》样式》合成

比如：改变transform，直接composite。

CSS动画优化

• JS优化：使用requestAnimationFrame代替setTimeout或setlntervl
• CSS优化：使用will-change或translate

CSS 动画的两种做法（transition 和 animation）

一. transform

四个常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate
• 倾斜 skew

经验：

• 一般都需要配合transition过度
• inline元素不支持transform，需要先改变成block

transform: translate

• translateX(像素(px) / 百分比(%))
• translateY(像素(px) / 百分比(%))
• translate(<像素 / 百分比>,<像素 / 百分比>？)
• translateZ(像素) 且父容器加perspective
• translate3d(x,y,z)

经验：

• 多看MDN语法
• translate(-50%,-50%)可做绝对定位元素居中

#demo{
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

transform: scale

• scaleX(倍数)
• scaleY(倍数)
• scale(倍数，倍数)

经验：

• 用得较少，容易出现模糊

transform: rotate

• rotate([<angle> | <zero> ])
• rotateZ([<angle> | <zero> ])
• rotateX([<angle> | <zero> ])
• rotateY([<angle> | <zero> ])
• rotate3d

经验：

• 一般用于360°旋转制作loading。

transform: skew

• skewX([<angle> | <zero> ])
• skewY([<angle> | <zero> ])
• skew([<angle> | <zero> ]，[<angle> | <zero> ]？)

经验：

• 用得较少

transform 可以组合使用

• transform：scale（0.5）translate（-100%，-100%）；
• transform：none；取消所有

transition 过渡

作用

• 补充中间帧

语法

• transition: 属性名 时长 过渡方式 延迟
• transition: left 200ms linear
• 可以用逗号分隔开两个不同的属性
• transition: left200ms，top400ms
• 可以用all代表所有属性
• transition: 200ms
• 过渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具体含义要靠数学知识

并不是所有的属性都能过度

• display: none=> block 不能过渡
• 要改成visibility: hidden=> visible
• background 颜色可以过渡
• opacity 透明度可以过渡

二. animation

缩写语法

• animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
• 时长: 1s 或者 1000ms
• 过渡方式: 跟transition的取值一样，如linear
• 次数: 3 或 n 或者 infinite
• 方向: reverse | alternate | alternate-reverse
• 填充模式: none | forwards | backwards | both
• 是否暂停: paused | running
• 这些属性都有对应的单独属性

使用animation

1. 声明关键帧 @keyframes xxx
2. 添加动画 animation:xxx

如何让动画停在最后一帧

• 给animation加个forwards

@keyframes 完整语法

• 一种写法是from…to
• 另一种写法是百分数

本文为作者本人的原创文章，著作权归作者本人和饥人谷所有，转载务必注明来源。