正文

轻松学会：用JavaScript制作会上下滚动的小球动画教程

/0 浏览量
1114

前言

大家好！今天我要带大家进入一个有趣的JavaScript动画制作世界。在这个教程中，我们将学习如何使用纯JavaScript制作一个会上下滚动的小球动画。这个动画不仅能够增强网页的视觉效果，还能让用户有更好的交互体验。准备好了吗？让我们开始吧！

准备工作

在开始之前，请确保你的电脑上已经安装了最新的浏览器，并打开了一个文本编辑器（如Visual Studio Code、Sublime Text等）。以下是完成本教程所需的HTML、CSS和JavaScript代码。

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小球滚动动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="ball"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* styles.css */
body {
    margin: 0;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    position: relative;
    height: 100vh;
}

.ball {
    width: 50px;
    height: 50px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
}

JavaScript

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var ball = document.querySelector('.ball');
    var container = document.querySelector('.container');
    var isMoving = false;

    function moveBall() {
        if (!isMoving) {
            isMoving = true;
            var startTime = null;
            var speed = 5; // 每秒移动的像素数
            var direction = 1; // 1为向上，-1为向下

            function step(timestamp) {
                if (!startTime) startTime = timestamp;
                var progress = timestamp - startTime;
                var newPosition = ball.offsetTop - (direction * speed * progress / 1000);
                
                if (newPosition <= 0 || newPosition >= container.offsetHeight - ball.offsetHeight) {
                    direction *= -1; // 改变方向
                    startTime = timestamp; // 重新开始计时
                }

                ball.style.top = newPosition + 'px';
            }

            var rafId = requestAnimationFrame(step);
            ball.addEventListener('click', function() {
                cancelAnimationFrame(rafId);
                isMoving = false;
            });
        }
    }

    moveBall();
});

解析

  1. HTML结构：我们创建了一个.container容器，其中包含一个小球元素.ball。
  2. CSS样式：为小球设置了颜色、宽高、圆角和定位属性，使其能够在容器中滚动。
  3. JavaScript脚本：
    • 监听DOM加载完成事件。
    • 获取小球和容器的引用。
    • 定义一个moveBall函数，用于控制小球的滚动。
    • 在moveBall函数中，使用requestAnimationFrame实现平滑的动画效果。
    • 当小球移动到顶部或底部时，改变其移动方向。
    • 点击小球时，停止动画。

总结

通过以上步骤，我们成功地制作了一个会上下滚动的小球动画。这个动画可以根据需求进行修改和扩展，例如添加速度控制、方向切换等。希望这个教程能帮助你更好地了解JavaScript动画的制作。祝你学习愉快！

-- 展开阅读全文 --