UI设计中的动效：看看墨刀大神们是怎么炫技的
文：墨墨姐
1
故事要从弥漫在社交圈的猪小妹佩奇开始讲起…
作为一只来自大不列颠的粉红色“吹风机”，风力十八级，不仅席卷到我们的朋友圈微博、某手、某音、某呼… 前段时间还一鼓作气吹到了墨刀讨论区…
先是“小龙”同学率先po了一张墨刀鼠绘佩奇，墨墨姐下巴惊掉。
留言区瞬间变“社会”。
但素很快，有“轮子丸”同学来叫板。
墨刀办公室一片沸腾。
此时谁料“小龙”同学不服，要搬出“小虎”。
“愿望是击败小猪佩奇喽！”
于是……
墨墨姐想说，小龙，你真的证明了…
我们会期待更多作品的哈。😊
墨墨姐在此打个call：画佩奇画小虎只是小龙的“会友”之作，人家还是有分享专业交互原型的，可以去讨论区查看哦。
02
当然，除了这片洋溢的粉红色，在墨刀讨论区更有好几位大神们分享出了自己的实力作品。
让墨刀小白们觉得，原来还能这么玩？！
“周祚栋” 大使的交互系列作品
这个系列在刀友的鼓励下已经发了三期。
第一期包含一些导航图标转换、音量变化、进度条等微交互。
第二期另外增加首页交互，嵌入了表单，增加了打赏入口。
第三期除了主页的九宫格翻折动效，还汇总了9种交互效果，比如微信朋友圈点赞和评论、悬浮按钮等。
“互谋”同学的“浪”系列作品
这个【“浪”系列】是墨墨姐起的名字，呃，因为……
【稳住，别浪】篇有12种微交互组合，包括进度条、音乐播放暂停、开关、下载成功、下拉刷新等等，超级实用。
【浪得慌】篇包含标签导航的左滑右滑，以及上拉下拉的页面动效。
【太浪了】篇则有常见的卡片左滑右滑效果，以及下拉和上滑时卡片为适配页面变换尺寸大小。
“小romeo”的【ae地图展示】
这个动效是临摹的原作者CPH4 用AE做的作品。
此效果全程也可以用墨刀实现。具体怎样操作？小romeo 贴心准备了详细的教程，点此可以查看原型和教程哦！
“大锤食漆” 的【NIKE SNKRS】
这个作品主要有卡片左右滑动效果，以及底部小图的突出和还原效果。
“大锤食漆”也贴心提供了教程，墨墨姐表示，写的很详细，学到了！点此可以一并查看教程和原型！
03
墨刀讨论区还有很多大神的优秀作品，因为文章篇幅有限这次没有收录，但是以后墨墨姐会不定期收集更多作品给大家分享。
如果你还想看更多的原型、教程或者产品设计有关的文章，欢迎移步墨刀讨论区。
如果你有作品或者经验想分享，发在讨论区，也许下一个受刀友们膜拜的就是你哦！
