效果

操作流程

创建节点设置属性

节点名称	节点数量
Layer	1
Item	10
SeqImage	1
Button	7

节点名称	Preview显示情况
bg	绿色长方形背景图
ZZ1、ZZ2、Item3	绿色长方形遮罩，遮盖最上方滚动文字(ZZ2遮盖下方)
ssR	ssRender，Logo图片
SeqImage1	用于显示和切换歌词和音乐封面，设置动画效果
Image	音乐封面图片
GeCi	歌词图片
Button0、Button02	位置大小和SeqImage1 相同，用Clicked切换歌词和音乐封面
Right	切换下一首按钮
Left	切换上一首按钮
Center2、Center22	控制暂停和开始播放
JinDu	白色进度条背景
Item5	黑色进度条(不显示)
Kuai	黑色进度块
Mzhuan	ssRLogo右侧圆形音乐图片
Version	不显示，位置大小和ssRender文字相同，用于输入版本信息

Project窗口显示界面：

Preview窗口显示界面：

插入图片设置自定义属性

Resource窗口显示界面：

设置自定义属性，并拖拽到bg节点。

设置事件和绑定

设置Button0的事件

setProperty:{$../SeqImage1/Index} = 0
setProperty:{$./Visible} = 0
setProperty:{$../Button02/Visible} = 1

setProperty:{$../SeqImage1/Index} = 1
setProperty:{$./Visible} = 0
setProperty:{$../Button0/Visible} = 1

这里对Right节点进行操作设置音乐图片切换，音乐进度块位置移动，输出信息(下一首)。

setProperty:{$../JinDu/Item5/Visible} = 0
setProperty:{$../bg/SUM} = 0
setProperty:{$../Center2/Visible} = 0
setProperty:{$../Center22/Visible} = 1
setProperty:{$../SeqImage1/Image/Source} = "11.png"
setProperty:{$../SeqImage1/GeCi/Source} = "22.png"
setProperty:{$../SeqImage1/GeCi/Y} = 0
writeLog:"下一首"
writeLog:"当前播放：羽泉-奔跑"
setProperty:{$../Kuai/X} = 30

然后我们再对Left节点进行Clicked事件的设置，几乎和Right节点相同，只是具体数值变化一下。
注意：这里Source属性的设置运用了两种方法，但实现的效果是一致的(33+“.png”和"33.png"当前的效果是一致的，这里 + 做连接符)。

setProperty:{$../JinDu/Item5/Visible} = 0
setProperty:{$../bg/SUM} = 0
setProperty:{$../Center2/Visible} = 0
setProperty:{$../Center22/Visible} = 1
setProperty:{$../SeqImage1/Image/Source} = 33+".png"
setProperty:{$../SeqImage1/GeCi/Source} = "44.png"
setProperty:{$../SeqImage1/GeCi/Y} = 0
writeLog:"上一首"
writeLog:"当前播放：周杰伦-算什么男人"
setProperty:{$../Kuai/X} = 30

这里对Center2节点进行设置，这个节点作为暂停按钮，当我们点击播放按钮后在Preview窗口中会出现暂停按钮，播放按钮消失，并且控制节点的移动(歌词暂停，音乐Logo暂停)。

setProperty:{$../bg/SUM} = 0
setProperty:{$./Visible} = 0
setProperty:{$../Center22/Visible} = 1
writeLog:"暂停"
setProperty:{$../SeqImage1/GeCi/Y} = {$../SeqImage1/GeCi/Y} - 0
setProperty:{$../Kuai/X} = {$../Kuai/X} - 0

同样我们这里设置播放按钮，和暂停按钮相似的操作，控制节点变化(歌词移动，音乐LOGO旋转……)。

setProperty:{$../bg/SUM} = 1
setProperty:{$./Visible} = 0
setProperty:{$../Center2/Visible} = 1
writeLog:"播放"
setProperty:{$../JinDu/Item5/Visible} = 1

调节Version位置覆盖在左上角ssRender文字上，鼠标在Preview窗口中点击后输出版本信息。

设置绑定节点绑定，让黑色进度块在自定义属性sum=1的时候开始移动每次+1

var a = {$../bg/SUM}
( a == 1):{$./X} = {$./X} + 1
( a == 0):{$./X} = {$./X}

设置音乐LOGO的Rotation属性，让它旋转。

var a = {$../bg/SUM}
(a !=0 ):{$./Rotation} + 1
(a ==0 ):0

小结：

综合前几篇文章的应用，制作一款音乐播放器。本次工程需要理清结构，明确绑定和事件设置在什么位置，最重要的一点要了解编辑器中表达式的格式如何书写，实现功能上需要几个事件相互配合，也不能忘记自定义属性我们创建它的意义；细节方面就是要注意在做绑定和事件时一定看好当前选中的节点是谁，时刻看好Project窗口的节点和Properties窗口中的属性。

ssRender引擎制作一个音乐播放器相关推荐

使用小程序制作一个音乐播放器
此文主要通过小程序制作一个音乐播放器,实现轮播.搜索.播放.快进.暂停.上一曲.下一曲等功能. 一.创建小程序二.设计页面三.接口渲染一.创建小程序访问微信公众平台,点击账号注册. 选择小程序 ...
基于C#制作一个音乐播放器
此文主要基于C#制作音乐播放器,可实现导入本地歌曲.音乐播放.音量设置.歌词显示等. 实现流程 1.1.创建项目 1.2.准备素材 1.3.功能开发实现流程 1.1.创建项目打开Visual St ...
听音乐不过瘾？自制一个音乐播放器！| 原力计划
作者 | 灰小猿责编 | 夕颜出品 | CSDN博客最近在学习C#的GUI编程时想着自制一个播放器,说干就干. 其实C#除了在游戏开发上具有显著优势以外,在winform交互页面设计和web网站 ...
html音乐播放器利用css和js知识来创建一个音乐播放器（虽然简陋，但是逻辑很容易懂，适合初学者）
作为初学者,制作一个网页播放器来提高我们编写代码水平很有用这是css部分,很简单,随便信息样式就行 .musicDiv{width: 250px;height: 70px;background-co ...
听音乐不过瘾？自制一个音乐播放器！【附带函数源码】
C#的音乐播放器是基于C#窗体程序而设计开发,是学习C#winform开发的一个较好的实战项目.本文讲解了音乐播放器的基本控件的函数编写及开发思路函数目录打开音乐文件控件函数双击音乐触发播放属性 ...
基于React开发一个音乐播放器
同时支持 Mac 与 Windows 系统. 下载地址掘金链接项目使用 electron 作为外壳,webpack 作为打包工具,核心技术包括 React + Redux + React-rout ...
用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好.趁没事先写个. 思路一个音乐播放器该有的东西: 封面,歌名,专辑,作者控制器(上一首,下一首, ...
利用PyQt5制作本地音乐播放器
介绍本文是对之前的音乐播放器的一些改进和功能实现.只写了有变化的部分,具体部分请看上一篇博客. [利用PyQt5和QSS制作本地音乐播放器(初稿)](https://blog.csdn.net/we ...
如何使用uni-app做一个音乐播放器
如何使用uni-app做一个音乐播放器 uni-app提供给我们非常棒的API,可以做出很好看的自定义样式的音乐播放器好的编译器可以让我们的项目事半功倍,HBuilderX可以很方便的创建uni-a ...

ssRender引擎制作一个音乐播放器

效果

操作流程

创建节点设置属性

Project窗口显示界面：

Preview窗口显示界面：

插入图片设置自定义属性

Resource窗口显示界面：

设置事件和绑定

小结：

ssRender引擎制作一个音乐播放器相关推荐

最新文章

热门文章

ssRender引擎 制作一个音乐播放器

效果

操作流程

创建节点设置属性

Project窗口显示界面：

Preview窗口显示界面：

插入图片设置自定义属性

Resource窗口显示界面：

设置事件和绑定

小结：

ssRender引擎 制作一个音乐播放器相关推荐

最新文章

热门文章

ssRender引擎制作一个音乐播放器

ssRender引擎制作一个音乐播放器相关推荐