← 基础动效 · 高级动效 →

复杂交互

每个格子都是个小手机,直接上手玩。下面「怎么玩」写了手势。

游乐园约会
冬日温泉
糖炒栗子
同居守则
共享元素展开shared element / hero
怎么玩:点卡片,再点一下收回
点卡片原地放大成详情页,不是新页面跳出来
左滑出按钮swipe actions
怎么玩:把一行往左拖,点删除
左滑露出删除和置顶,删了这行收起来
下拉刷新pull to refresh
怎么玩:按住列表往下拉,拉够了松手
下拉刷新,拉的时候圈跟着转
今天想吃什么
随便
那我猜了
嘻嘻
长按菜单context menu
怎么玩:按住任意一个气泡别松
长按气泡浮起来,背景虚掉,弹出菜单
拖拽排序drag to reorder
怎么玩:按住右边 ≡ 上下拖
拖着排序,别的自己让开
卡片滑走swipe cards
怎么玩:左右甩卡片
像探探那样左右甩卡,甩的时候歪着
后面的页面
可拖抽屉bottom sheet · snap
怎么玩:上下拖面板,会停在三档
底部面板能拖,停在半屏和全屏两档
聊天
聊天
大标题收缩large title collapse
怎么玩:在里面往上滑
iOS 那种大标题,滚上去缩到顶栏
第1条 被子
第2条 闹钟
第3条 衣服
第4条 出门
第5条 吃醋
轮播吸附carousel snap
怎么玩:左右滑
左右滑卡片,两边露一点,中间那张大
♥
双击点赞double tap
怎么玩:在图上快速点两下
双击图片,点哪儿哪儿冒大爱心
3:12
晚安要说到睡着Moon · 正在播放
胶囊展开morphing container
怎么玩:点黑胶囊
像灵动岛,小胶囊弹开变成大卡片
滑动来确认
›
滑动确认slide to confirm
怎么玩:把圆点拖到底
滑块拖到头才算确认,没到底弹回去
滚动出现scroll reveal
怎么玩:在里面往下滑
往下滚的时候,内容一条条浮上来
消息
Moon
猫猫
点我进去
‹ Moon
从左边缘往右拉
好
侧滑返回edge swipe back
怎么玩:从左边那道蓝边往右拉
从左边缘拉能返回,后面那页跟着露出来

说复杂交互的套路:「在哪儿」+「手怎么动」+「东西怎么跟着变」+「松手以后去哪」。
比如:「在聊天列表,按住一个会话,它浮起来、背景虚掉,弹菜单;松手菜单留着,点空白收回。」
常用的几个词:跟手(东西跟着手指走)· 吸附 / 档位(松手停在固定几个位置)· 阻尼(越拉越沉)· 甩(看松手那一下的速度)· 弹回(没到位就回原处)。