一图看懂好利来老鼠接奶酪SVG交互|伸长+滑动叠加排版|E2.COOL黑科技SVG编辑器

点击首页,GIF 开始播放并透出下层内容。金色的芝士浪花完全消散后,可见趣味的小老鼠接奶酪特效。并且你可以左右滑动它们,着实妙趣横生。

素材形态

Slice

这一特效依托多组 GIF 布局而成,其主体可采用黑科技编辑器的「点击-播放GIF-伸长」,而切换后的滑动效果通过「浮层」和「半屏容器滑动(逆向)」进行组合实现。

素材准备

素材的特殊之处在于**金色的芝士浪花实际为透明 GIF,**因此可以自然而然露出 GIF 的结束画面(动态背景):

它们的实际结构图层关系如下,随着过场 GIF 的运行会逐步展示底层的背景动态和可滑动的透明小老鼠:

下方展示在黑科技 SVG 编辑器中的核心布局。其中 GIF 最后一帧上传的是过场动态结束时背景 GIF,「浮层」组件则巧妙地将「半屏容器滑动」反向叠加在了背景 GIF 上------这种模版应用策略充分体现操作者的变通能力。GIF 播放时间填写 3.4,无需单位(s)。

相关推荐
白日梦想家6811 天前
第三篇:Node.js 性能优化实战:提升服务并发与稳定性
linux·编辑器·vim
yuankoudaodaokou1 天前
高帧率扫描如何重塑动态三维扫描与思看科技300fps解决方案
python·科技
诺狞猫1 天前
思澈科技-SF32屏幕模组添加
科技·学习·思澈·sifli
灰灰勇闯IT1 天前
Flutter for OpenHarmony:卡片式 UI(Card Widget)设计 —— 构建清晰、优雅的信息容器
flutter·交互
晚霞的不甘1 天前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
晚霞的不甘1 天前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互
小哥Mark1 天前
在鸿蒙应用工程中可以使用哪些Flutter手势交互组件实现点击、双击、长按、拖动、缩放、滑动等多种手势
flutter·交互·harmonyos
万法若空1 天前
Vim常用指令汇编
汇编·编辑器·vim
2501_933907211 天前
如何选择西安优质小程序开发服务与本凡码农合作?
科技·微信小程序·小程序
灰灰勇闯IT1 天前
Flutter for OpenHarmony:进度条与加载指示器 —— 构建流畅、可感知的异步交互体验
flutter·交互