动态渐变文字组件交互动效制作

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

版本要求:

这个教程需要用到的Adobe XD 45版本以上的功能——添加Lottie文件

主要通过一个透明的Lottie文件来制作交互

只需要制作1个画板


制作组件


输入需要的文字,选择转换为路径,填充渐变色

加入一个透明的Lottie文件

打组制作组件

制作2个组件状态分别调整好渐变色

13D08DC7-225B-4B8F-8272-0840999E262E.png

FB550BEF-57F4-4EF8-A4AE-5918218EDBB3.png

3A795F31-FDCC-400C-8301-EB3DFD191958.png


制作交互


切换到原型面板

选中默认状态-选中组件中的Lottie文件

添加时间交互和播放结束交互

84DCAF5B-13BD-4DE1-B36C-1D8BD69878BF.png

9EB251C7-C80C-4066-9F72-7D49B4AEAEBB.png

这里的动画我们选择过渡溶解时间为2秒

切换到状态2、状态3制作同样的交互

完成组件制作后放置到界面中

完成效果


点击前往查看→查看视频教程获取源文件

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作