微信小程序实现故事线指引动画效果

微信小程序实现故事线指引动画效果

1. 整体结构

故事线通过条件渲染实现不同步骤的切换，配合精心设计的动画效果增强新手指引用户体验。

2. 动画效果分析

2.1 步骤1-2的动画

当 stepNum <= 2 且 !loading 时，显示步骤1-2的内容：

<block wx:if="{{stepNum <= 2 && !loading}}">
    <image wx:if="{{stepNum == 2 }}" class="front-img-1666 img-animation-left" src="[图片路径]/storyline-1-1.png" data-step-num="2" bindtap="handleStep"/>
    <image wx:if="{{stepNum == 2 }}" class="step2-img img-animation-left" src="[图片路径]/storyline-1.png" data-step-num="2" bindtap="handleStep"/>
</block>

动画效果：

• 应用了 img-animation-left 类，实现从下方滑入的动画
• 动画持续时间：1秒
• 动画曲线：ease
• 动画填充模式：both（保留最后一帧状态）

CSS实现：

.img-animation-left {
  animation-name: ani-left;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

@keyframes ani-left {
  from {
    transform: translate3d(0, 150%, 0);
  }
}

2.2 步骤3的动画

当 stepNum == 3 时，显示步骤3的内容：

<block wx:if="{{stepNum == 3}}">
    <image class="front-img ani ani-del-{{index<2 ? 1 : index}}" wx:for="{{9}}" src="[图片路径]/storyline-{{index+2}}.png" />
</block>

动画效果：

• 应用了 ani 类，实现淡出动画
• 应用了 ani-del-* 类，实现不同的动画延迟效果
• 动画持续时间：1秒
• 动画曲线：ease
• 动画填充模式：forwards（保留最后一帧状态）

CSS实现：

.ani {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.ani-del-1 { animation-delay: 0.5s; }
.ani-del-2 { animation-delay: 1s; }
.ani-del-3 { animation-delay: 1.5s; }
.ani-del-4 { animation-delay: 2s; }
.ani-del-5 { animation-delay: 2.5s; }
.ani-del-6 { animation-delay: 3s; }
.ani-del-7 { animation-delay: 3.5s; }
.ani-del-8 { animation-delay: 4s; }
.ani-del-9 { animation-delay: 4.5s; }

@keyframes fadeOut {
  to {
    opacity: 0;
    background-color: transparent;
  }
}

3. 动画效果详解

3.1 从下方滑入动画 (img-animation-left)

• 触发时机：当步骤切换到第2步时
• 动画效果：元素从下方150%的位置（完全不可见）向上滑入到原始位置
• 应用场景：用于步骤2的两张图片，营造层次感和动态效果

3.2 序列淡出动画 (ani + ani-del-*)

• 触发时机：当步骤切换到第3步时
• 动画效果：9张图片按顺序依次淡出
• 延迟策略 ：
  • 前2张图片：延迟0.5秒
  • 第3-9张图片：按索引依次延迟1-4.5秒
• 应用场景：通过序列动画展示故事的进展，增强视觉叙事效果

4. 技术实现要点

1. 条件渲染 ：使用 wx:if 控制不同步骤的显示与隐藏
2. 动态类名 ：使用 ani-del-{{index<2 ? 1 : index}} 实现动态延迟效果
3. 事件绑定 ：通过 bindtap="handleStep" 实现步骤切换
4. CSS动画 ：利用 @keyframes 定义动画，通过类名应用到元素上
5. 动画时序 ：通过 animation-delay 控制多个元素的动画顺序

5. 动画效果流程图

步骤1 → 步骤2（两张图片从下方滑入）→ 步骤3（9张图片序列淡出）→ 后续步骤

6. 优化建议

1. 性能优化 ：对于多张图片的动画，可以考虑使用 will-change 属性提升性能
2. 交互反馈：可以在动画过程中添加轻微的缩放效果，增强交互体验
3. 兼容性：确保动画在不同设备上的表现一致
4. 可维护性：可以将动画参数（如持续时间、延迟时间）提取为变量，便于统一管理

7. 总结

在不靠视频实现故事线叙述效果时，纯前端故事线动画通过精心设计的滑入和淡出效果，为用户呈现了一个流畅的视觉叙事过程。特别是步骤3的序列淡出动画，通过不同的延迟时间，创造出层次感和节奏感，增强了故事的表现力。这种动画实现方式既简单又高效，值得在类似场景中借鉴和应用。