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

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) {
            
        const newDisplayedLines = [...that.data.displayedLines, that.data.lines[that.data.currentIndex]];
        that.setData({
            
          displayedLines: newDisplayedLines,
          currentIndex: that.data.currentIndex + 1,
        });
      } else {
            
        clearInterval(intervalId); // 清除定时器
      }
    }, 1000); // 每隔1秒显示一行文字
  },
});

1.2.2. 页面结构lineDisplay.wxml

  在 WXML 文件中，通过 wx:for 循环渲染已显示的文字数组 displayedLines，并为每行文字添加适当的样式。

<!-- pages/lineDisplay/lineDisplay.wxml -->
<view>
  <view class="line-layout" wx:for="{
            {displayedLines}}" wx:key="index">
    <view class="line-item">{
            {
            item}}</view>
  </view>
</view>

1.2.2. 样式设置lineDisplay.wxss

  为了增强视觉效果，可以为每行文字添加简单的动画效果，例如淡入效果。实现文字逐行显示的效果，并且每行文字会伴随淡入动画。

/* pages/lineDisplay/lineDisplay.wxss */
.line-layout {
            
  padding: 0 30rpx;
}
.line-item {
            
  opacity: 0; /* 初始透明度为0 */
  animation: fadeIn 1s ease-in forwards; /* 使用fadeIn动画 */
  margin-bottom: 10px;
}
@keyframes fadeIn {
            
  from {
            
    opacity: 0;
  }
  to {
            
    opacity: 1;
  }
}

1.3. 逐字渲染（段落）

  在微信小程序中实现文字逐个字符显示的效果，可以通过定时器逐步更新数据，并结合视图层动态渲染来完成。以下是完整的实现方法：

1.3.1. 数据与逻辑处理

  通过设置一个定时器，每次从原始字符串中截取部分字符并更新到页面显示的数据中。当字符数量达到原始字符串长度时，清除定时器。用了 setInterval 定时器，每次将原始字符串的一部分赋值给 text 并更新到视图。

// pages/charDisplay/charDisplay.js
Page({
            
  data: {
            
    text: "", // 当前显示的文本
    story: "香蕉是一种热带水果，因其丰富的营养价值和多种功效而备受青睐。香蕉富含维生素C、维生素B6、膳食纤维、钾等营养成分，这些成分为身体提供了许多益处。", // 原始字符串
    index: 0, // 当前索引
  },
  onLoad: function () {
            
    const that = this;
    const intervalId = setInterval(() => {
            
      if (that.data.index < that.data.story.length) {
            
        const newText = that.data.story.substring(0, that.data.index + 1);
        that.setData({
            
          text: newText,
          index: that.data.index + 1,
        });
      } else {
            
        clearInterval(intervalId); // 清除定时器
      }
    }, 200); // 每隔200毫秒显示一个字符
  },
});

1.3.2. 页面结构设计

  在 WXML 文件中，直接绑定 text 数据以显示当前已更新的字符串。确保每次更新 text 时，页面能够自动刷新显示新增的字符。

<!-- pages/charDisplay/charDisplay.wxml -->
<view class="char-layout">
  <view class="char-text">{
            {
            text}}</view>
</view>

1.3.3. 样式优化

  为了提升用户体验，可以为每个字符添加淡入动画效果。在 WXSS 文件中定义如下样式：

/* pages/charDisplay/charDisplay.wxss */
.char-layout {
            
  padding: 20px;
}
.char-text {
            
  font-size: 32rpx;
  line-height: 1.5;
  animation: fadeIn 0.5s ease-in forwards; /* 使用fadeIn动画 */
}
@keyframes fadeIn {
            
  from {
            
    opacity: 0;
  }
  to {
            
    opacity: 1;
  }
}

1.4. 逐行逐字渲染（列表-段落）

  在微信小程序中实现列表文字逐行逐个字符显示的效果，可以通过结合定时器与数据更新逻辑来完成。以下是一个完整的解决方案。

1.4.1. 数据与逻辑处理

  通过设置多个定时器，分别控制每一行的字符逐步显示。每行文字的显示逻辑类似于单行文字逐字符显示，但需要为每一行单独管理索引和状态。通过 setInterval 定时器逐一更新每一行的文字内容4。当某一行的文字完全显示后，切换到下一行继续处理。

// pages/listCharDisplay/listCharDisplay.js
Page({
            
  data: {
            
    list: [
      {
             text: "", original: "第一行文字逐字符显示" },
      {
             text: "", original: "第二行文字逐字符显示" },
      {
             text: "", original: "第三行文字逐字符显示" }
    ],
    currentIndex: 0,
  },
  onLoad: function () {
            
    const that = this;
    const intervalId = setInterval(() => {
            
      if (that.data.currentIndex >= that.data.list.length) {
            
        clearInterval(intervalId);
        return;
      }
      const currentRow = that.data.list[that.data.currentIndex];
      const newIndex = currentRow.text.length;
      if (newIndex < currentRow.original.length) {
            
        const newText = currentRow.original.substring(0, newIndex + 1);
        const newList = [...that.data.list];
        newList[that.data.currentIndex].text = newText;
        that.setData({
             list: newList });
      } else {
            
        that.setData({
             currentIndex: that.data.currentIndex + 1 });
      }
    }, 200); // 每隔200毫秒显示一个字符
  },
});

1.4.2. 页面结构设计

  在 WXML 文件中，使用 wx:for 指令遍历列表数据，并动态渲染每一行的文字内容。此部分代码确保每次更新 list 数据时，页面能够自动刷新并显示最新的文字内容。

<!-- pages/listCharDisplay/listCharDisplay.wxml -->
<view class="line-char-layout">
  <block wx:for="{
            {list}}" wx:key="index">
    <view class="line-char-item">{
            {
            item.text}}</view>
  </block>
</view>

1.4.3. 样式优化

  为了提升用户体验，可以为每一行文字添加淡入动画效果。通过 CSS 动画 fadeIn，每一行文字在显示时会有一个平滑的淡入效果，从而增强视觉体验。在 WXSS 文件中定义如下样式：

/* pages/listCharDisplay/listCharDisplay.wxss */
.line-char-layout {
            
  padding: 10rpx  30rpx;
}
.line-char-item {
            
  font-size: 32rpx;
  line-height: 1.5;
  margin-bottom: 10px;
  animation: fadeIn 0.5s ease-in forwards; /* 使用fadeIn动画 */
}
@keyframes fadeIn {
            
  from {
            
    opacity: 0;
  }
  to {
            
    opacity: 1;
  }
}