当前位置：首页 > news >正文

微信小程序实现文字逐行动画效果渲染显示

news 来源：原创 2025/6/15 8:46:36

1. 微信小程序实现文字逐行动画效果渲染显示

在微信小程序开发中，为了文字逐行动画效果渲染可以通过JavaScript 和 WXML 的动态数据绑定来实现，实现文字逐行显示的效果，同时结合 CSS 动画提升视觉体验。
如果需要更复杂的动画效果（如缩放、移动等），可以使用微信小程序提供的 Animation。
在实际开发中，需根据需求调整定时器的时间间隔和动画效果，以确保用户体验最佳。
&emsp如果列表较长或字符较多，建议优化性能，例如限制同时运行的定时器数量，或者在用户滚动时暂停动画。
在这里插入图片描述

1.1. 实现文字逐行显示的动画效果

1.1.1. 使用 KEYFRAMES 定义动画

通过 @keyframes 定义动画的关键帧，控制每行文字的显示时间。通过定义一个名为 fadeIn 的动画2，它通过调整透明度从 0 到 1 来实现淡入效果。

@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}

1.1.2. 设置每一行文字的样式

为每一行文字添加不同的 animation-delay 属性，以确保它们依次显示。

.line1 {animation: fadeIn 1s ease-in-out;
}
.line2 {animation: fadeIn 1s ease-in-out 1s;
}
.line3 {animation: fadeIn 1s ease-in-out 2s;
}

1.1.3. WXML 结构

在 wxml 文件中，使用 view 标签将每行文字包裹起来，并应用对应的样式类名。

<view class="line1">第一行文字</view>
<view class="line2">第二行文字</view>
<view class="line3">第三行文字</view>

1.2. 逐行渲染（列表）

在这里插入图片描述

1.2.1. 动态数据绑定更新渲染lineDisplay.js

首先定义一个包含多行文字的数组，每一项代表一行文字。通过 setInterval 或 setTimeout 定时器，逐步更新当前显示的行数，并将新行的内容添加到视图中。可以使用 setData 方法动态修改页面上的数据显示。

// pages/lineDisplay/lineDisplay.js
Page({data: {lines: ["第一行文字", "第二行文字", "第三行文字"], // 文字数组displayedLines: [], // 当前已显示的文字数组currentIndex: 0, // 当前显示的行索引},onLoad: function () {const that = this;const intervalId = setInterval(() => {if (that.data.currentIndex < that.data.lines.length