最终效果展示

逐步教程

这个案例主要使用到了e2编辑器的以下组件

  • 常规组件：相对位移-消失、单图擦除、任意点放大消失
  • 高级组件：零高容器、零高图片、占位（默认透明）

  1. 材料准备

    首先使用ChatGPT 4o和即梦AI进行图片的创作，结合PS工具最终导出成切片的多图

    image-20250507224336867

  2. 添加零高容器、零高图片、占位组件

    image-20250507224637539

    • 零高图片选择所有动画的最后一张固定尾图
    • 零高容器注意要调整成（穿透+强制优先级模式）
    • 占位设置为切片图片的宽度高度

  3. 配置零高容器组件

    image-20250507224922750

    • 背景图片下方是变化前的图片
    • 背景图片上方是变化后的图片
    • 移动元素是在画面中移动的元素
    • 初始位置x、y轴和结束位置x、y轴是移动元素前后的坐标位置
      • x，y是相对于屏幕左上角，横轴为x，纵轴为y得到的，可以在ps中使用标尺功能测量得到
    • 相对位移组件可以设置自定义属性调整动画速度
    • 零高容器组件设置自定义属性调整margin边距为0，防止出现堆叠偏移

  4. 重复以上步骤得到大致效果

    image-20250507225329782

  5. 两个其他效果的制作

    1. 开始的点击放大

      image-20250507225424345

      需要根据实际情况微调缩放点的坐标和放大倍数，达到最佳效果

    2. 中间月球部分的切换

      image-20250507225433601

      仅设置切换后的下一张图片即可