自定义动画

1. 概述

在现代网页设计中，动画效果不仅能够提升用户体验，还能使页面更加生动和吸引人。Bootstrap 提供了一些基本的动画工具类，但有时我们需要更复杂的动画效果。本教程将指导你如何使用 CSS 和 JavaScript 创建自定义动画。

2. 理论基础

2.1 CSS 过渡效果

CSS 过渡（Transitions）允许你在元素的属性值发生变化时，平滑地过渡到新的状态。常见的属性包括 background-color、width、height 等。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
    width: 200px;
    height: 200px;
    background-color: blue;
}

2.2 CSS 动画

CSS 动画（Animations）允许你创建更复杂的动画效果，通过定义关键帧（Keyframes）来控制动画的各个阶段。

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    75%  {background-color: green;}
    100% {background-color: red;}
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 4s infinite;
}

2.3 JavaScript 动画

JavaScript 提供了更灵活的动画控制能力，特别是通过 requestAnimationFrame 方法，可以实现更流畅的动画效果。

const box = document.querySelector('.box');
let start;

function step(timestamp) {
    if (start === undefined)
        start = timestamp;
    const elapsed = timestamp - start;

    // 这里控制动画的进度
    box.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

    if (elapsed < 2000) { // 在 2 秒后停止动画
        requestAnimationFrame(step);
    }
}

requestAnimationFrame(step);

3. 实践练习

3.1 创建一个简单的淡入淡出动画

1. HTML 结构

<div class="fade-box">Hover me!</div>

2. CSS 样式

.fade-box {
    width: 100px;
    height: 100px;
    background-color: green;
    opacity: 1;
    transition: opacity 1s;
}

.fade-box:hover {
    opacity: 0;
}

3.2 创建一个旋转动画

1. HTML 结构

<div class="rotate-box">Click me!</div>

2. CSS 样式

.rotate-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 2s;
}

.rotate-box:active {
    transform: rotate(360deg);
}

3.3 使用 JavaScript 创建一个平移动画

1. HTML 结构

<div class="move-box">Move me!</div>

2. CSS 样式

.move-box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

3. JavaScript 代码

const moveBox = document.querySelector('.move-box');
let start;

function step(timestamp) {
    if (start === undefined)
        start = timestamp;
    const elapsed = timestamp - start;

    moveBox.style.left = Math.min(0.1 * elapsed, 200) + 'px';

    if (elapsed < 2000) { // 在 2 秒后停止动画
        requestAnimationFrame(step);
    }
}

moveBox.addEventListener('click', () => {
    requestAnimationFrame(step);
});

4. 总结

通过本教程，你学习了如何使用 CSS 和 JavaScript 创建自定义动画。CSS 提供了简单的过渡和动画效果，而 JavaScript 则提供了更灵活的控制能力。希望这些知识能帮助你在未来的项目中创建出更加生动和吸引人的网页动画效果。

5. 进一步学习

• 探索更多 CSS 动画属性，如 animation-delay、animation-iteration-count 等。
• 学习使用 JavaScript 库如 GreenSock (GSAP) 来创建更复杂的动画效果。
• 研究如何将动画效果与 Bootstrap 组件结合，提升用户体验。

希望你喜欢这个教程，并能在实践中不断提升你的动画设计技能！