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

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