版本要求:
这个教程需要用到的Adobe XD 45版本以上的功能——添加Lottie文件
主要通过一个透明的Lottie文件来制作banner轮播图交互
只需要制作1个画板
跟着下面的步骤开始制作吧!
制作素材
准备3张轮播图素材和一个轮播指示器,还有一个透明的Lottie文件
将素材排列好打组,并复制一下第一张轮播图好制作循环
将所有素材打组并制作组件
添加3个新的组件状态,分别为2、3、4
2状态为第2张轮播图,并制作好指示器
3状态为第3张轮播图,并制作好指示器
4状态为第4张轮播图(与第一张相同)
添加交互
选中默认状态,选中组内的透明Lottie文件添加交互
(这个案例所有的交互都添加在这个Lottie文件上)
添加一个时间交互和播放结束-状态2-自动动画-对齐2秒
以此类推制作2、3两个状态的交互
第4状态交互为时间交互和播放结束-默认状态-过渡
这样就形成了一个循环
以上交互已经制作完成
整理
切换到默认状态在素材组前后各添加素材图完成循环模拟,这两张图不需要添加交互,案例完成
点击上方前往查看→查看视频教程获取源文件