00:00
好,那我们继续啊,那做完了这个摇摆的动画呢,对吧,那这节课呢,我们来做这个动画啊,就是这个磁盘了,就是当我点击播放的时候,磁盘在转,我点击停止,磁盘就停止转动。而且啊,这个歌曲只要在播放的时候,大家要注意啊,这个磁盘它会一直的在转。哎,会一直转啊,这一点我们要注意,那因为它一直旋转,那这个时候我们想想啊,我们单用这个transform。也是rotate的学者,能不能搞定啊?啊,有同学说设个三百六不就行了吗?你要注意啊,三百六那是转一圈,但是转完一圈它肯定会停啊。我们说了这儿只要音乐播放,这是不是一直转呀。啊,那也有同学说我设的大一点,比方说我设个七千二或者72000。大一点啊,那是不是可以多转几圈,你要注意啊,你大一点的话,它总有转完的时候,而且呢,这个也不符合我们的要求,我们的要求是。
01:01
音乐播放它就转,音乐停止它就停。对吧,所以啊,针对于这个情况呢,我们可以选择用什么用我们C3的动画来实现。啊,用C3的动画来实现。那来跟上面的模式一样啊,那么现在呢,在磁盘的这个下面啊,因为它都在这。对吧,最终磁盘你看啊,不管是磁盘也好,还是里面的图片也好,其实它都在转。都在这,那这样的话呢,我们给外面的包裹性呢,写一个动画的属性。这里呢,我们叫它有个DC啊any吧,嗯,磁盘的动画。首先呢,我们就用到C3这个animation啊,我们先去规定一个动画的属属性名称就叫DC吧,过渡的时间呢,我来个一秒啊,过渡的曲线来个dinner平滑过渡呗。对吧,那么这个动画属性呢,需要搭配搭配什么,我们的key frames去使用。
02:02
在这里呢,首先这需要设的是我们的动画名。而frames里边是干嘛的呢?它呢用来规定我们动画的帧数。对吧?啊,我们要知道啊,我们看到的一个完整的动画,其实是由一帧一帧的静态帧拼接而成的。只不过每一帧和每一帧啊,它的切换也好,斜线也好,特别快。所以呢,我们用户看到的是一个完整的动画。那这里呢,给大家说一下啊。哎,那这个at key frames呢,它用来去设置我们的啊动画帧它呢有两种方式啊,第一种呢,是我们的百分比啊,第一种我先说这个吧,这个是简单的啊啊from to。From to的形式啊,那么第二个呢,那就是我们对应的这个百分比。百分比。那什么时候适合用from to,什么时候用百分比呢?来,那这时候说一下啊,To很简单很明显啊,我们只有两帧,那一个起始针,一个结束针,那这个呢,通常啊适用于啊简单的动画,嗯,只有什么,只有我们的起始针。
03:17
啊和结束针。和结束针。OK,那这样呢?百分比对比着我们去说啊,那这个呢,多用于什么啊,复杂的动画,复杂的动画,也就是说动画啊,通常它不止两帧。那不止两人。那什么是简单动画,什么是复杂动画呢?给大家举个例子啊,比如说我们说北京啊到上海。北京到上海,嗯,假如说你坐飞机去啊,如果是用from to,那就直达。那起始站北京,那到达的站上直达就过去了,哎,如果说那我们用from to的话,它的北京到上海可能是这样的。
04:04
啊,举个例子啊,我们可能先从北京出发。嗯,然后到哪呢,我们去天津啊去天津。然后从天津呢,再转机到啊,啊比如说到深圳吧。最后呢,我们再去上海,也就是说中间的过程是不是比较曲折的呀,哎,这个呢。就是比较复杂的动画。我们可以用百分比。那么百分比它的动画帧组成的是由起始帧是0%,然后呢,到我们的结束帧100%。那么至于说中间有多少针?对吧,啊,可以任意拆分。啊,根据你的需求来啊,这是它的特点。好,知道了这个以后啊,回头看一下我们这个效果,我们现在呢,是点击播放。开始旋转。对吧,一直平滑的在旋转,点击暂停,旋转结束,那这个呢,其实就我们刚才的描述呢,它更适合用from to去做。
05:08
而from呢,起始车呢,其实就是它静态的样子,吐呢就是去旋转多少度呢,旋转360,只不过这个旋转的过程呢,是重复进行的而已,所以啊,这个时候大家看啊,我的from,其实如果你是起始的静态帧,你都可以不用写,而to的话呢,我们写一下啊,那这呢是我们要去学着transform。嗯,要旋转多少度,哎,360度。嗯,起始针你也可以写啊,你如果啊非要想写的话,那这的起始针是多少。年度。旋转到360。哎,那这点呢,大家就能跟得上啊,那现在这个动画类什么时候加,跟我们之前摇杆的这个一模一样,也取决于什么,取决于这个是否播放的状态,所以啊,我把这个呢给它放到这儿。
06:01
啊,只不过对应的这个动画类呢,我们用的是这个DC的an,就是刚才我们写的这个动画。来,我们看一眼行不行?过来首先为处大家看啊,一直转。但是呢,转到一圈三百六就停了。那是肯定不行啊。啊,肯定不行。那如何让它一起转呢?好了,回到我们的样式这啊,Animation这个动画属性里面呢,含有一个参数啊,叫infinite。无限循环。无限大啊,在这里呢,表示动画车一直在重复进行,我们再看。过来。好的,走。啊,那这个时候呢,他就一直转了啊,先停掉吧,看着头都晕。啊,那现在转的特别快是因为什么?因为我们动画的这个时间呢,太短了,所以它转的快啊,比如说我们写的四秒,它就会长一点啊,就会慢一点,来我们看一下。走。啊,这就是一个缓慢旋转的过程。
07:00
啊,没有问题,那一题这就停了。好,我再点旋转,大家看着啊,你会发现一个问题,当我们的a play为two的时候,这两个动画同时就进行了。那。在我的摇杆,你看还没有落到,完全落到磁盘上,它就开始转,那这其实是不对的。不对的。你想我们实际生活中啊,虽然说我也没有见过什么真的那个留声机啊,但是你比如说我们看一些这个以前的谍战片啊,这些啊里边呢啊,动不动就好放一个留声机,对吧。啊,放一个磁盘上去,把那个针放到磁盘上。然后磁盘就开始转。一定得放到磁盘上。否则的话你赚也没用。这个针的作用是什么?就是在读磁盘上的数据嘛,看了就好像我们的机械硬盘一样。对吧,啊,指针落到磁盘上,机械硬盘开始转,然后读取里面存储的数据呗,的原理一模一样啊,所以啊,我们这个磁盘动作呢,应该是在摇杆落到磁盘以后。
08:07
才开始动作。那也就是说我们这个动画什么时候开始啊,要等上边这个动画进行结束。上边的动画记什么时候结束?它到底需要多长时间呢?来看我们的样式。多少一秒钟,所以我们是不是要保证我们当前的动画延迟一秒在进行啊,哎,那这个时候来animation里面呢,有个animation delay就是延迟。哎,规定动画延迟多长时间开始呢?一秒钟,那我们再看一眼。过来。好,走。大家看啊,现在呢,就是摇杆啊,落到磁盘上它才开始动,走再看一遍。啊,没有问题,好的,我们这一停没放,嗯,这就抬起来了。
09:00
哎,那这样的话呢,我们这个磁盘呢。动画呢,也写完了啊,那在这里呢,我们主要是用到C3的什么animation动画,搭配什么a key frames哎去完成的。好的,那这节课呢,我们先讲到这里。
我来说两句