版本要求:
这个教程需要用到的Adobe XD 45版本以上的功能——添加Lottie文件和视频文件
主要通过制作多态组件来实现功能。
跟着下面的步骤开始制作吧!
1.制作播放的视频
绘制一个矩形,直接将视频素材拖入
绘制一个透明的矩形蒙版放置在视频上层,并绘制一个播放按钮。
将这两个图层与底部的视频打组制作组件。
给这个组件添加三个状态
默认状态
悬停状态
状态3——设置视频为自动播放
2.制作爱心按钮
绘制一个白色的圆形,添加外阴影;使用三角形工具绘制一个三角形,边数参数输入<3得到一个爱心图形,填充灰色。
选中两个图层打组并点击“+”制作组件。
给这个组件添加一个切换状态,在切换状态选中组件并绘制一个矩形,这个矩形用来播放将要拖入的彩带Lottie文件,大小自由定义。
点击彩带Lottie文件,将配置更改为自动播放且不循环。
3.添加交互
切换到原型菜单
给视频组件默认状态添加一个点击交互链接到状态3
切换到状态3,选中视频图层添加一个播放结束的触发动作,选择过渡到默认状态。
4.制作完成
点击前往查看→观看视频教程获取源文件