【前端】输入时字符跳动动画实现

news2024/9/21 16:37:39

输入时字符跳动动画实现

在前端开发中，为了提升用户体验，我们经常需要为用户的交互行为提供即时的反馈。这不仅让用户知道他们的操作有了响应，还可以让整个界面看起来更加生动、有趣。本文将通过一个简单的例子讲解如何实现在用户输入字符时，让字符产生一个小跳动的动画效果，使得界面交互更为生动。
请添加图片描述

技术方案概述

实现这一效果的核心思路是利用CSS的关键帧动画（Keyframes Animation）来定义字符的跳动动画，并通过JavaScript来动态地将动画应用到用户每次输入的新字符上。同时，为了保持输入框内容和展示的内容同步，我们还需要对输入框的值进行监听，并相应地更新显示区域的内容。

关键技术点

CSS 关键帧动画：利用@keyframes规则定义一个动画，描述该动画中每个阶段的样式。
JavaScript 事件监听：监听输入框（<input>元素）的input事件，以便在用户每次输入时触发更新。
JavaScript DOM 操作：动态地创建和更新DOM元素来反映输入内容的变化，并应用动画效果。

实现步骤

定义字符跳动的动画

首先，我们使用@keyframes规则定义一个名为bounce的动画。这个动画简单地使得元素先向上移动10px（30%过程点），然后回到原位置（100%过程点）。

@keyframes bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

样式准备

我们需要为动态生成的字符元素应用动画，并对输入框和文本展示区域进行基本的样式设置。

.character {
    display: inline-block;
    animation: bounce 0.6s;
    font-size: 24px;
}

#input-box {
    /* ...省略无关样式... */
    opacity: 0; /* 让输入框透明，但仍可输入 */
}

#animated-text {
    /* ...省略无关样式... */
}

JavaScript 事件监听与动态DOM更新

当用户输入字符时，通过监听input事件来捕获输入值的变化，并根据这些变化动态创建<span>元素来包裹每个字符。对于新增的字符，我们为其添加定义好的动画效果。

document.getElementById('input-box').addEventListener('input', function (event) {
    const inputText = event.target.value;
    const container = document.getElementById('animated-text');
    const existingText = container.textContent;

    // 如果是删除操作，直接同步内容，不添加动画
    if (inputText.length < existingText.length) {
        container.innerHTML = '';
        for (let char of inputText) {
            let span = document.createElement('span');
            span.textContent = char;
            container.appendChild(span);
        }
    } else {
        // 新增字符，添加跳动动画
        const newChar = inputText[inputText.length - 1];
        let span = document.createElement('span');
        span.className = 'character';
        span.textContent = newChar;
        container.appendChild(span);
    }
});

DEMO

这段代码可以直接拷贝到html文件中允许查看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入动画效果</title>
    <style>
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }

            30% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .character {
            display: inline-block;
            animation: bounce 0.6s;
            font-size: 24px;
            font-family: 'Arial', sans-serif;
        }

        #input-box {
            font-size: 24px;
            opacity: 0;
            width: 200px;
            min-height: 28px;
            line-height: 28px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        #animated-text {
            border: 1px solid #eee;
            width: 200px;
            min-height: 28px;
            line-height: 28px;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <input type="text" id="input-box" placeholder="输入文字看效果...">
    <div id="animated-text"></div>
    <script>
        document.getElementById('input-box').addEventListener('input', function (event) {
            const inputText = event.target.value;
            const container = document.getElementById('animated-text');
            const existingText = container.textContent;

            // 如果是删除操作，直接同步内容，不添加动画
            if (inputText.length < existingText.length) {
                container.innerHTML = '';  // 清除旧的字符
                // 重新添加字符，但不包括最新的字符，因为是删除操作
                for (let char of inputText) {
                    let span = document.createElement('span');
                    span.textContent = char;
                    container.appendChild(span);
                }
            } else {
                // 找出新增的字符
                const newChar = inputText[inputText.length - 1];
                let span = document.createElement('span');
                span.className = 'character';  // 应用动画的类
                span.textContent = newChar;
                container.appendChild(span);
            }
        });
    </script>
</body>

</html>