作为一款年纪轻轻的设计工具,Adobe XD 的动效系统较专业动效工具略显简陋

但是俗话说的好,做再牛逼的动效也得需要开发能写的出来才算数,啥?你说没有开发写不出来的动效?(程序员哥哥的板砖在路上~)

话糙理不糙,那么做好一款应用的基础交互动效就尤为重要了。so,以下整理了一些使用 XD 实现的基础的交互动效

1、动效的实现方法是多样的,不要拘泥于现成的参考

2、仔细研究就可以掌握各种缓动词汇所代表的含义,掌握好了再去动手事半功倍

3、学会使用时间触发来弥补整个 XD 动效系统中的不足(图层顺序,颜色切换)

4、学会利用时间差让动效更完美

5、开始动手前,脑子里得有个动效拆解过程,理清原理先拆解,再组合起来

6、如果你有更骚的实现方法,欢迎一起探讨 (Q群464674996)

7、文末提供整套源文件

8、访问我的 站点

华丽的分割线,以下是正文

1、聊天信息置顶、删除、Toast

Adobe XD 基础动效大全-www.xdccpro.com

2、聊天对话

Adobe XD 基础动效大全-www.xdccpro.com

3、应用切换

Adobe XD 基础动效大全-www.xdccpro.com

4、相册

Adobe XD 基础动效大全-www.xdccpro.com

5、朋友圈下拉刷新

Adobe XD 基础动效大全-www.xdccpro.com

6、点赞

Adobe XD 基础动效大全-www.xdccpro.com

7、轮播图样式一

Adobe XD 基础动效大全-www.xdccpro.com

8、轮播图样式二

Adobe XD 基础动效大全-www.xdccpro.com

9、扫描

Adobe XD 基础动效大全-www.xdccpro.com

10、下拉菜单

Adobe XD 基础动效大全-www.xdccpro.com

11、列表-详情

Adobe XD 基础动效大全-www.xdccpro.com

12、滑动列表

Adobe XD 基础动效大全-www.xdccpro.com

13、猫爪菜单

Adobe XD 基础动效大全-www.xdccpro.com

14、下拉刷新样式二

Adobe XD 基础动效大全-www.xdccpro.com

15、Switch开关、滑杆

Adobe XD 基础动效大全-www.xdccpro.com

16、小菊花加载

Adobe XD 基础动效大全-www.xdccpro.com

17、动态时钟

Adobe XD 基础动效大全-www.xdccpro.com

18、下拉刷新样式三

Adobe XD 基础动效大全-www.xdccpro.com

19、汉堡菜单按钮形变

Adobe XD 基础动效大全-www.xdccpro.com

20、加载动效二

Adobe XD 基础动效大全-www.xdccpro.com

21、加载动效三

Adobe XD 基础动效大全-www.xdccpro.com

下载方法:关注公众号 biliux(一只小盒),回复 9527 获取下载链接