00:01
好,那我们继续啊,那上一节课呢,我们把这个静态页面搭建完了啊,那这节课呢,我们去写一下它里边的这个动态的效果啊,来来,让我写好这个项目啊,大家看我这儿呢,首先啊上来我的摇杆是抬起来的。只有在我点击播放的时候走。播放音乐,摇杆落下来,我先把这个音乐静音一下。对吧,然后我点击暂停,它就又抬起来了,哎,这儿呢,有一个过渡旋转的效果。那现在我们要做的是上来,在歌曲未播放的时候,首先你的摇杆应该是抬起来的。哎,首先你的摇摆应该是抬起来了对吧,那抬起来大概抬到这个位置,那也就说我们从现在的位置呢,相对于现在的位置是不是要往起旋转一点呀。哎,这个时候呢,我们能想到啊,我们会选择用C3的什么呀,旋转也是transform去搞定这个事情,对吧,那这个时候啊,打它来到我们的样式里面,我们找到这个摇杆。
01:06
首先啊,我们要去旋转的话也比较简单,我们用一个。对吧?啊,那么旋转的话呢,我们用到这个rotate呗,Rotate啊注意我们要旋转角度,那这个时候呢,首先你要知道啊,我们从这个位置啊,旋转到这个位置。那这是不是逆时针旋转呀,所以啊,我们旋转的角度应该是负值,我这儿呢,直接给大家写了旋转的角度是20度,哎,别忘了把我们旋转的角度单位第一记给这带上来。好的,那现在呢,我们看一下啊过来。哎,那这个时候呢,你会发现除了没学着好啊,露馅了。把这个给转出来了,这丑的一塌糊涂对吧?首先我在这里说一下啊,现在呢,是因为我没有这个完整的带有底座的图片,如果有这个就没有这么麻烦了。没有这么麻烦了,那可能有的小伙伴说,那这开发的时候这样写不太费劲吗?啊放心吧啊真实开发当中,那UI呢,肯定会给你做好这张图,你拿过来就能用,而且这个图的底座应该是个圆的。
02:14
啊,现在呢,我是随便啊上网去找了找,我也没有花太多的时间啊,专门去啊找这个带有完全底座的这个摇杆,所以呢,现在啊,我们能看到这种现象,但就算啊你有这个完整的底座,现在这个也是错的。为什么呢?首先大家要知道啊。啊,我给你再加一个边框,我们来一个包啊,Erps。Solid,然后呢,来一个red,哎,我们看着这大家看的清楚一点。那这是这个摇杆,注意啊,它默认旋转的中心点呢,是中间这个点,也就是说它的旋转中心点呢,是50%,50%。而我们想要的肯定不是这样。不是肯定不是这样,我们想要什么样的,我先把这个旋转给它关掉啊,我们来到这儿看一下。
03:04
首先我们是想让它围绕着这个底座,这个中心点是不是旋转。那这个底座的中心点呢,其实正好是它上面这个边框。这个距离。那你要注意啊,我们旋转默认的起始点零零,是不是就是左上角这。然后我们现在呢,要在这个位置去旋转,那这个时候你要注意啊,我们是X轴的距离是不是要往这边移点2Y轴是不用动的呀。对吧,所以啊,我们需要设置一下这个旋转的中心点线啊,那这个旋转中心点呢,就是transform origin。X轴往右偏移啊,是四乘相数啊,这是我之前测好的弯轴不需要动,所以它应该是零。再说一遍。我们最终想让它旋转的是这个圆球,也是底座的中心点,大概在这个位置啊,这个位置,而这个位置呢,是从起始位置旋转的,起始位置零,零的位置,往右水平方向是不是偏移大概这个距离。
04:09
那么这个距离呢是多少呢?是42PX,然后你看水平方向平移,弯轴不需要动啊,所以弯轴呢还是零。那所以我们最终的旋转中心点是它。然后那下边我们再把这个旋转的角度呢,给它打开啊,我们看一眼,这个时候大家看就好了。哎,没有问题,那这样的话呢,我们还是把这个边框就撤掉了啊撤掉了。好,那起始的摇杆啊,起始这个摇杆的位置呢,我们抬起来了,那么接下来当我们点击播放的时候,摇杆落下,落下其实就是旋转到原来零的位置。点击停止,再抬起来。点击播放,再放下来。那也就是说,我们摇摆的抬起还是落下,是不是取决于是否播放的状态啊?
05:01
一个是播放,一个是停止,对不对啊,一个是暂停,那也就是说它其实在这儿啊,就有两个状态,你看一个是播放。形式暂停。对吧,两个状态,那针对于这种情况呢,我们可以这样去做,来到我们的GS里面。在data中呢,我去初始化一个变量啊,就叫AK,嗯,那这个呢,默认为false,这个呢是用来标识我们的音乐啊是否在播放。是否播放吧,嗯。放上了就不播放对吧,暂停。好的,那有了这个标识,我们可以干嘛呢?啊,我们通过这个标识呢,可以决定我们的摇杆是抬起还是落下。对吧?嗯,那么摇杆要落下的话,首先我们是不是要设置它的那个旋转角度为零啊。而且这个什么时候落下,就是音乐播放的时候,所以呢,针对这个情况呢,我再去给我们摇杆,这呢我写一个动态的class。
06:03
我再写一个class,我先写一个静态的啊,我来一个needle吧。写这样一个class,那么这个class扮演的角色呢?啊,要设置的内容呢?是什么呢?就是它的旋转角度为零度。对为零度,那这样的话呢,因为哎后面要是覆盖前面的啊,我们再看一下是不是落下来。好的啊,没有问题啊,但是啊,这个样式肯定不能写死,你写死了前面的是不是就失效了呀?这个药是什么时候应该加上来?啊,也就什么时候摇杆应该落下呢,那就是我们播放的时候。对吧,什么时候抬起来不播放,所以啊这呢,我可以这样去写,这哥们是个动态的class。在我们小程序里面要写动态的class呢,你就是在class里面呢,加一个双大括号表达式。就可以了,在这个里面呢,我们通过这个is play。
07:02
这个变量。来决定。如果他没处。哎,我们就干嘛呢,我们就用这个动态的class没放呢,我们啥都不用来CT。就可以了。啊,那这个呢。来写完以后我们看一下效果啊。你看默认抬起来,我们打开调试器啊,这呢有这个变量,然后呢,我通过这个啊APP data之后这个单选框,我去修改它的这个值啊走打开落下。走,抬起没有问题。对吧,没有问题,只不过现在这个抬起落下这样太尬了啊,太尬了,应该是有一个缓慢的移动的效果,就是过渡。所以啊,我们在我们当初写needle的时候呢,再给它加一个东西,就是我们要过渡的属性,就transform过渡的时长我们来个一秒。来,再看一眼。走落下走抬起来,哎,是不是轻软一点,哎,没有问题,好的,那摇杆这个啊。
08:06
动画我们就写完了,那么写完了以后回头再看啊,这样呢,用三元表达式可以实现啊,那其实你换一种方式会更简单一点。说白了,什么时候需要后边那个动态class,那不就是它没处的时候吗?也是在播放的时候,用这个动态的class把摇杆放下来,就是旋转为零度就好了。那这个时候呢,我用的是且的关系啊,就是当它为处用它那为放后边压根不走对了吧,这样做也可以啊,那我们看一。好。走哎,也是没问题的,这里注意一个小细节啊,这的class跟前面的你要区分开啊,这是个静态的,所以它不需要加引号了,在因为外面有引号了,而这个呢,现在在双大括号的里面,如果你不加引号,这是个变量。对吧?而我们要写的是一个class。
09:00
累,所以呢,千万要记住要加一个引号。OK,那这样的话呢,啊,摇摆的动画我们就全部说完了,好,这一节课呢,我们先讲到这里。
我来说两句