*思路分析

为什么要选择这个效果呢？

我们想要让用户「沉浸」在内容中，尽量不被额外的交互动作打扰，而滑动是基础的交互动作，没有学习成本，老少咸宜。但如果只是「滑动」又会显得太常规、太单调。

结合本文主题，我们想要给孩子们点亮「希望」那用「上色」来呈现就很合适，但如果就这样直愣愣地展示，未免太过直白。所以我们决定先把上色内容「藏」起来，放进「展开」中，缓缓递进丰富整篇内容的层次，让用户与文章交互的每一步都「意料之外」但「情理之中」

基于此我们就能确定需要使用什么效果「点击展开」+「双层滑动」，确定好大方向后我们再根据个人喜好选择具体的效果。本文选择的是「点击回缩展开(全屏)（自定义触发））Id：110」「双层滑动+底层固定顶层上下滑动Id：201」

2.进入SVG编辑器页面后，在左侧选择「SVG效果」，并在其搜索框中搜索「点击回缩展开（全屏）（自定义触发）」组件ID：110。

在使用组件的时候，一定要看清楚素材要求、素材要求、素材要求。

按照需求添加首图，调整展开动画时长。

点击「编辑展开内容」添加「双层滑动+底层固定顶层上下滑动」组件Id：201

我们上传背景图并按顺序添加滑动图即可，记得看素材要求。