0%
// 触发动画并同步数字计数
window.addEventListener('load', () => {
const progressBar = document.querySelector('.progress-bar');
const progressText = document.querySelector('.progress-text');
const targetProgress = progressBar.dataset.progress;
// 启动宽度动画
setTimeout(() => {
progressBar.style.width = `${targetProgress}%`;
}, 300);
// 数字计数动画
let current = 0;
const interval = setInterval(() => {
current++;
progressText.textContent = `${current}%`;
if (current >= targetProgress) clearInterval(interval);
}, 20);
});
```
**关键技术**：
- CSS过渡控制宽度变化，JavaScript控制数字计数同步
- 线性渐变背景随进度条宽度动态变化
- `transform: translateY(-50%)`实现文字垂直居中
### 示例3：滚动触发动画（元素进入视口时淡入上移）
**需求**：页面滚动时，当元素进入视口，触发“淡入+上移”动画。
```html
滚动到此处查看动画
我是滚动触发的动画元素
// 监听滚动事件
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target); // 只触发一次
}
});
}, { threshold: 0.1 }); // 元素10%进入视口时触发
observer.observe(document.querySelector('.animated-element'));
```
**优势**：
- 使用`IntersectionObserver` API替代传统`scroll`事件监听，性能更优
- 动画触发时机精准（元素进入视口时）
- 支持一次性触发或重复触发（移除`unobserve`即可）
## 注意事项
### 性能优化
1. **硬件加速**：对`transform`和`opacity`属性动画优先使用GPU渲染，避免`width`、`height`等触发重排的属性
```css
/* 推荐 */
.box { transition: transform 0.3s; }
.box:hover { transform: scale(1.1); }
/* 不推荐（触发重排） */
.box { transition: width 0.3s; }
.box:hover { width: 200px; }
```
2. **减少动画元素数量**：避免同时动画过多元素，可使用`requestAnimationFrame`控制动画帧率
```javascript
function animateElements() {
// 每次只更新可见区域的动画元素
requestAnimationFrame(animateElements);
}
animateElements();
```
3. **使用`will-change`提示浏览器**：提前告知浏览器可能变化的属性，优化渲染准备
```css
.complex-animation {
will-change: transform, opacity; /* 仅在必要时使用 */
}
```
### 兼容性处理
- IE11不支持`animation-play-state`和部分`@keyframes`特性，可使用`prefixfree.js`自动添加前缀
- 移动端Safari对
```
transform: translateZ(0)
```
依赖硬件加速，复杂动画建议添加：
```css
@supports (-webkit-overflow-scrolling: touch) {
.ios-fix { transform: translateZ(0); }
}
```
## 自测题
1. 如何实现一个“加载→完成→成功”的三段式序列动画？（提示：使用`animation-delay`和多个关键帧）
2. 为什么`transform: translate(100px)`比`left: 100px`动画性能更好？
3. 如何使用Chrome DevTools的“Performance”面板分析动画卡顿问题？
4. 编写一个当用户点击按钮时，元素先旋转360度再缩放至2倍的复合动画。
## 扩展阅读
- [MDN Web Animations API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API)（JavaScript动画控制高级接口）
- [CSS-Tricks: Animation Timing Functions](https://css-tricks.com/almanac/properties/a/animation-timing-function/)（缓动函数详解）
- [Web.dev: Optimize CSS Animations](https://web.dev/optimize-css-animations/)（动画性能优化权威指南） 