透明Lottie时间触发器banner轮播图组件制作

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

版本要求:

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

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

只需要制作1个画板


跟着下面的步骤开始制作吧!


制作素材

DF73EA3A-9317-45D9-9ED6-1E1DA80DED26.png

准备3张轮播图素材和一个轮播指示器,还有一个透明的Lottie文件

将素材排列好打组,并复制一下第一张轮播图好制作循环

将所有素材打组并制作组件

B90651DA-7153-42AB-A61C-00C7EAC9B909.png

87A9BC86-71D5-4CB0-B920-741F9A65642E.png


添加3个新的组件状态,分别为2、3、4

2状态为第2张轮播图,并制作好指示器

3状态为第3张轮播图,并制作好指示器

4状态为第4张轮播图(与第一张相同)

13BFCC73-4629-4169-8201-84BCA4824954.png


添加交互


选中默认状态,选中组内的透明Lottie文件添加交互

(这个案例所有的交互都添加在这个Lottie文件上)

添加一个时间交互和播放结束-状态2-自动动画-对齐2秒

5C9197D6-DF74-4607-ADE1-3BBCE32F8B3C.png

8A63074E-8BC0-4D64-B93D-E7426339CD02.png

以此类推制作2、3两个状态的交互

第4状态交互为时间交互和播放结束-默认状态-过渡

EFC641F9-3F9D-4C11-B623-F226A055A321.png

这样就形成了一个循环

以上交互已经制作完成


整理

切换到默认状态在素材组前后各添加素材图完成循环模拟,这两张图不需要添加交互,案例完成

BD413549-9ADA-450B-B1D6-60DF7EEDA679.png

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

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