使用多态组件嵌套制作音乐播放器添加音频文件

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

教程内容:

制作一个组件,通过组件的不同状态来呈现播放器磁盘转动的效果

可在播放按钮的交互中添加音频


这个案例需要制作一个大组件嵌套多个小组件


1.制作素材


FBDD8C30-2A3D-43AD-8EC5-0E41D9931998.png

2ECCE8B1-8ED4-474E-BA45-582AEB1212D2.png

制作磁盘组件

默认状态-磁盘旋转角度为0

状态2-磁盘旋转角度为180°


制作音浪组件

默认状态-位移在左侧

状态2-位移在右侧


歌词组件

*制作方法,准备好几行歌词内容,分别绘制两个矩形添加一下白色到透明色的渐变制作成两个遮罩置于上下两侧

用于遮盖歌词

默认状态-显示起始歌词

状态2-显示后面部分的歌词


制作进度条组件

默认状态-指示器在左侧

状态2-指示器在右侧


其余组件制作方法大同小异,将所有组件制作完成后全部选中制作一个大的组件


大组件默认状态-所有小组件的默认状态

大组件的状态2-所有小组件的状态2


2.制作交互


给播放按钮添加一个点击自动动画的交互,

并添加一个音频播放的操作,选择准备好的音频文件

2A872962-8CF7-4624-8120-0ED46CF830D3.png

制作完成

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

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