00:00
来接着我们上节课来讲,上节课呢,咱们就是快速的把这三个静态页面是不是搭建好了。我先和他说一下,我在这我去定一个类,因为它里面是不是有那个定位啊,我随便我就定一个类啊,其实这个类我现在要不要都行。我就整个一。是不是提高他的层级,我把这个给了,先给第一个,为什么给他?我现在有这么一个想法,我是想让哪个div显示在页面,我把这个层级给他,为的是提高他的身份。其实我不要他都没关系,是因为我其他看不到的,我是不是用害的把它隐藏掉啊,但是我定完这个,最后我要和你们要啊。最后你们要想这个东西了。我先放到这儿,因为上来你看我一刷新,现在不是第一个页面在显示吗?行,我就给了他,那这节课呢,我们主要是来整。整他现在C3的动画。把这些收起来,然后呢,在这儿我再去定一个,比如这次叫点CS,专门写我们的动画的。
01:08
那么回过头来,我是不是应该先在这儿引入啊?好,来引入了以后开始写。写之前呢,还得先看文档。呃,找我的开发文档W。应该是哪个,就他吧。直接到C3,因为之前大家学过,上来是不是找这个动画。那么在这个里边,哎,其实先看到他了,I keep这个应该也学过吧。你看下面这这两个,一个叫an,一个叫,这两个是不需要配合去使用。Animation是干嘛的?这不在这儿吗?安里面有很多的属性,它规定了动画的一些呃,必须的属性,比如说我动画过度的曲线啊。
02:06
动画的时间呀,动画的名字呀,是不是都是animation去设定啊,而SK frames里边去设定是动画如何去衔接?有多少针,是不是用is去确定啊?那我们都知道一个动画也是我们平时看到的动画是由多帧去组合而成的,它不是一个完整的整体,能懂吧,啊,是由多帧衔接而成的。那SK有两种用法。一种呢,是这种。From to的还有一种是什么,知道吗?有的同学说了百分比。用过吧,啊,那我问一下什么时候用from to,什么时候用百分比呢。
03:00
单一的动画用from to也就只有一个平滑的过渡。用什么动画,用看着这个看我这个背景色啊。哎,这看这个吧,我一划。你看过两个背景色衔接的时候有什么额外的动画吗?没有就把这些图片忽略掉啊,来,走你。这是不是只是一个平滑的过渡啊,从一个位置到另外一个位置,这样的话就能用from to,而用百分比的时候,多半是我要拆成很多针。就动画有一些复杂的过渡,最起码它不是两帧。什么时候用对着这个语言看。看到没有这个绿的圆嘛。那这个能用from to吗?这很明显不能用to了,它必须得用百分比去拆啊,至于说拆几针的话,你自己说了算啊。知道了这些以后,我们。来来到这个这。
04:03
我们上来先去定义四个方向的大的动画啊。什么叫四个方向的动画?大家看一下,就拿这个为例。我外面还是看div,我这样上下滑动的话,他是不有向上或者向下的动画。能懂我的意思吗?你就盯着这个这个当前的背景色看,我一旦向上去滑动。他是不是要往上走啊。那假如说我叫他move,这不是移动吗?Move他是不是要去上边,那你可以说move to。Top。对不对,是不是要往上走,他往上走的同时再看一遍,下面是不是要有一个进程的。进场的,这那我们就可以说是move,他是不是从下边来的,你可以说move from。Bottom。我的意思吗?那左右也是一样的,我当前这个往左滑走你。
05:04
刚刚这个出去的,他是去哪了?他是不是往左边走,那我们可以说是摸啊。出。是不,而右边这个进场的。我为什么用to from呢?你出去那个你我是从当前的位置出去吧,我只需要知道我要去的目的地是哪,是不是就OK了,而马上进场那个他是从外边进入到我当前的区域,那么你得告诉我你从哪来的。你说你看右边这个是不是进场,你得告诉我你是move。应该是right吧,能懂吗?啊,那我们就定义这些大类,定义这些大类。来先整一个,比如说我这个统一都叫一个点PT,到前面是命名规范,那么后面我先起一个比,就叫move to top,我们先向上去滑动这一下啊,Move top是这样走吧。
06:03
刚刚那个页面是不是往上去走了,好,Move在这个里边。我们得用它的animation animation里面通常有哪些东西呢?首先第一个必不可少的是你的动画名吧,就根据我现在的命名规范,后边这是不是标识我的去向,我就拿这个为我的动画名,那么接下来我设0.6秒,这是规定它动画过渡的时间。能懂不?那这个是干嘛的?动画曲线,这是平滑过渡对不对,这个呢。Boss是不是没用过?用过吧。Animation这一块,大家看最后这是不是有这个属性。点进来看一下。这个属性规定动画在播放前后,其动画效果是否可见,它属性是不是有这些啊?而最常用的就是boss boss是向前向向后填充的模式,都应被应用什么意思?比如说我动画一共有24帧,它就是说动画在刚开始的时候,第一帧要不要看见。
07:16
动画结束的时候,最后一张要不要看见,那我们通常用boss是不是就可以?啊。你们这些好像也忘了。这个用的少,但是只要你们用用boss就够了,能了吧,嗯。好,那animation写完了,这个是move to top的也是这是一个出场的动画,那么出去那个页面我们有了,是不是下面马上要有个进场的。进场的,按照刚才的规律,我应该是怎么去定义呢。PT。干。P杠配杠,这应该怎么写?哎,你是不是要进场,你得告诉我你从哪来吧,他是不是应该从下边。
08:00
那这个名字我应该是取他能懂吧,如果说你们开发的时候代码也是这样写的话,就是给别人印象好啊。呃,找一下我的音色。然后这边我得把这个打开0.6秒,然后呢,再来个,那其他的我就都一样了,这是不是就是向上滑动那一下。嗯,那这给大家写一下啊,这是。向上滑动,那么与它正好对应的应该是向下滑动。向下滑动是什么意思啊,我这卡一滑,那滑之前这个页面他是不是要往下走,往下走也是你得告诉我你去哪,你是move吐哪。是吧,应该是。包呀啊同理,不要忘了把里边这个是不换掉啊,那这个from这就不用说了,与它是对立面,是不是就是top。你那这样的话,上下滑动这两个类我们就有了,而且动画的时间我都规定是六秒吧,这少一个东西。
09:04
应该是。对不对。那这应该也少一点,嗯。上下的有了,再来一个吧。复制一份,你上下滑动,左右是不是也能滑动。整一个向左滑动好,向左滑动。你向哪滑动,其实我刚开始那就是要去哪。向左这单词水平也差一点啊,这应该是left好。那复制一份。把这个放到这儿,那么这个与它对应的应该是。我这个。好。复制一份放到这儿,那接下来与它对立的其实就是向右了。香油滑豆move right。
10:01
啊,来把这个名字整过来,那么就是。过来。那现在我上下左右是不animation都写完了,我问大家这样的话,这个动画能不能去执行。你是不是还要配合上一个这个家伙,At k frames啊at k frames。你看我敲完回车,它的光标是不是自动停在这了,那是因为这要放一个东西,放什么很好,你放动画面,而且不能随便写,你必须要和你上面这个是不是要对应。我们先在上面呢,Move to top。那么在这。我们应该用from to还是用百分比?我就是做外边那个,这是不是用from to就OK了。啊。关键是怎么写。他这个动画是不是只是水平内垂直方向有个位移啊。
11:03
这能懂吧?关键是你是在里面写,还是在吐血。还是说都写?From to的意思就是说动画从这是不是衔接到这儿。那咱们分享啊,我是move to top,我要出去这一张,就拿这一张为例,我马上一划,它是不是要出去,那滑之前它是不是就是在我原本这个当前的位置啊。那他应该是往出走,我只需要知道他去哪。对不对,你说我from这用不用写,这儿不用写,这就是你当前的位置。能懂吧,就动画起始之前那个位置吗,也是。那兔这儿。首先我们得用谁啊?这些都transform,然后那位移的话,这个位置吧,因为你是垂直方向的位移嘛。位移多少呢?
12:02
我们现在想做的是当前这个div是不是往上跑,跑到哪就够了。是不是他整个板块移到我这个头上就够了,我直到看不见你就够了吗?也说我滑动之前我的底部打个比方在这儿。我一直要它往上移,这个底部要移到这儿。懂我的意思吗?那他偏移量是多少?不就是当前的100%高度吗?能懂吗?关键是正值还是负值啊。你们班这个记得挺清楚的。是的,之前有好几个班同学,他们老是这个分不清楚这个正职副职,最简单的是我教他们是这样的,你比如说你当前这是不是有市口或是口,也就你记住了,朝着市口方向的都是负值。就能,这不是坐标吗?你比如这不是坐标吗?这是不是朝着是口的,也是我往上和往左是复制,那么与他背道而驰,这边还有这边是不是都是正直啊,哎,这样就好记一点啊,那么往上的话,它是朝着顺口这一块,所以我这应该负100%就够了,能不能听懂。
13:19
那与他。还有一个这是木兔,那马上要进场那个。Move from。我大小姐已经失灵了啊。From没问题吧,那在哪写?还是根据我们刚才的分析,我最终是当前市口的位置。是吧,就是我本来我要显示的位置啊,而你马上要进场,你是不是得告诉我你从哪来,所以我应该写在哪?你来自于哪,有同学差异,这为什么不用写?其实你这能写。
14:02
我告诉你写成什么。这是零,你觉得有意义吗?就是移到你当前的位置嘛,所以我们通常来说这样的话,你是可以不用去写的,那这个时候from他应该告诉我从哪来,它在我的下边,是不是应该是正值啊。好,这是一个方向的,来复制一份。那接下来我应该是木包和他是不是反向操作。把这个换掉。反向操作的话,有没有换。不用,你看到这个兔,我为什么起这个名字啊,这是兔的,这就是兔,这是from。这就from。走不,那这个时候我这儿首先我从下边来是不是应该正直。From top。哎,From top,那这个时候从上边来是不是应该是负值,那其实这样的话上下的动画就OK啦。与它对应的,我们还得整。
15:02
来吧,吐血这一个。但是这个时候有个东西要换。它因为你现在是水平滑动对不对,它是以S轴方向吧,那这往左是正直还是负值啊,那这个from。Right right的话把这个换一下就行了。哦,还有这儿是不是也得换,嗯,行。复制一份。最后一个了啊,Move to right。去右边,然后from。没问题吧,那这样的话我四个动画类就有了,为什么我要先定义他呢,大家看一下。我刷新一下。动画类有了以后你盯着图片看,先看这个图片,上海人。
16:01
有没有发现他有他的动画轨迹是什么样的?哎,我原本动画过渡完了,我图片是不是就在这儿,那么他在动画开始是不是从上往下掉啊,从哪掉,你仔细看你会发现它是从上面下来的,你这样想想看,我刚才定义的这个动画是不是它就能用啊。再看一遍啊。是不是从上面下来了,用哪个。先来想,你的参照物是谁?我们的参照物是我当前视口里面所有的东西,那么这个是不是它最终的目的啊?那你得告诉我,你从哪才能到我这个位置吧。用哪个move。母兔是出去了,这是你的参照物,市口以外的你告诉他我要去哪,而从市口以外进来到当前的市口,你是不是得告诉你来自于哪里,所以我这应该是move,很好from,而且你要看到它是不是从上面掉下来的,所以我应该是move from谁top,那这样的话,我这个类是不是定义完了,刚刚。
17:11
给他我们先来测一个啊,这应该是PT杠。Page-move,然后from。是不是就是他?看一下啊。走,你。不就好了吗?我问一下大家,他这个从上往下掉,掉了多长时间啊。哎,这个调多长时间,是不是由我们来设,我们这是不是统一都是0.6秒啊,首先这个动画有了,虽然说其他的不动作你看起来还有点怪异啊,那我们再来看第二张,盯着这个最靠谱互联网公司。走,你。你们我之前讲的懂不懂就看这个了,我用哪个类。
18:02
Move。呃,首先它是从当前的位置出去,还是从外边进来,外边进来那我们是不是应该知道它来自于哪里,先确认from是不是从左边进来的,也就我们现在用应该用一个类叫。在这PT杠杠from来看一下。走,你这是不是就好看多了,然后就下面这个箭头了。我问一下啊,这个箭头能不能用我刚才定义的四个方向的动画。能不能你得看他的这个动,他这个动画是单一的平滑过渡,是两帧还是不止两帧。那你们说这几折?其实能看出来这种的话。
19:00
对,就三针,为什么是三针?我给你卡一下啊,看着啊。哎,没卡住。走,你。动画开始是不是在这儿?咔,往上到这儿还稍微停顿了一下下,再往上到这儿是不是又消失?其他的他一直都是因为他这个动画一直在重复而已。对不对,那这样的话不就是其实针中间针还有结束针吗?不就是三针吗?除了它是不是有一个垂直方向的位移,还有一个是透明度的变化。你看一下,这很明显有透明度的变化。那这样的话,既然它是三针了,我们根本不能用这个from to了,也说靠不上这四个类了,那咋办?我们得自己再去定一个。街头的动画。点一个PT杠。配件,比如说叫个木I up up就是他图片那个名字吗。
20:00
首先先来写,没问题吧,就来六秒,哎,我得先整一个什么动画的名字,来一个I up,然后呢,0.6秒,呃,平滑过渡。后填充,哎,那这些写好了,是不是对应的要有个啊,来个move I up。那这一次你不能用from to了,只能是用百分比讲一个他,哎,后边是它,因为有三针,其实你可以先把这些写好。多少帧,其实就是零到100之间,看你拆成多少份,讲过吧,这个啊,那在0%,这首先我先写一下。首先他是不是有个位移。这没问题吧,他是垂直方向的位移吧。你想?如果说没有动画的话,你跟我这个对比,我这个箭头是不是在这儿是不动的,它是不是从下边上来的。最终是不是到了上面消失?
21:01
能懂吧,那这样的话,他刚开始在哪。是在我的箭头静止位置的下边。能懂不?中间针不就是这个针吗,再往上一针,那也就是他刚开始应该是从我箭头下边多少距离,其实就是箭头那个高度,也是我们整一个。100%。不懂吗?我再给你卡一下啊,你看啊来卡住它。刚开始是不是在这儿。这其实就往下降一个身位,降到它下面不就行了吗?往上移,同样我移到他头顶就够了。来放开它是不是往上差不多。能懂不和刚才那些是一样的,就是他刚开始是不在下边。在下边,然后这是它原始的位置吧,只是我们要确定它的位置,然后往中间增走怎么走。
22:03
这其实我问你,我这个删了行不行。删了一些,这就是刚才为什么我from to不写,有一个不写都可以。那还有一针呢。是不是放到这儿。走到我头顶上啊,就你只要站在我上面那个位置,是不是为负值啊,但是还不够。除了位移还有什么?刚开始为零,这想都不用想。走到中间一帧,是不是最亮为一,那到这儿。是不是又是零,那接下来我们来看一下,把这个给了小箭头。你。刷新。看到没有?是不是他动作了,动作了,但是只有一次,那是因为你少了一个循环。在我们animation,这还有一个属性,不知道大家记不记得叫英菲,英菲尼迪。
23:06
就这个吧。来刷新一下看着啊,什么意思啊。无限的吧,意思无限循环嘛,那这个时候来。走,你还不行,这个太快了,太快是什么意思啊,这个时间是不是太短了,给我的时间短了,所以你的工期短了,我得加把劲干活。1.5秒差不多。通的太快了。那这样的话是不是温柔一点?Stop。这能不能懂,其实跟我这个是一样的,至于说这个时间。整多少是不是我们来确定啊。嗯,第一个其实这个CSS我们就整完了。现在来讲第二个,第二个比较复杂。第二个我得先让第一个页面是不是隐藏掉。看第二个。哎,就在这刷心眼走你。第二个一共是几张了,1234567张嘛,七张,但是有一个这不是箭头吗?那其实我是不是应该先把这个类给了他啊,那其他的先来看第一个。
24:11
第一个图片告诉大家是谁啊?性感表现代码。盯着他看,我再来动作一次,看着啊,走你。这类熟悉吗?他是怎么动作的星座?大概从这个位置是不是往上移,那这个是不是就是平滑的往上走。用哪个类?什么?你们说兔是为什么?你再看看我最终的动画静止是不是在这儿,那也是,我相当于这个,这是我的参照物吧,我得确认他动画之前是从哪给我过来的吧。那如果说用to,我告诉你是什么,是我刚开始在这儿,最后我要出去,或者是去别的位置。
25:03
懂吗?那这样的话我应该是。From。来。Move。P-from来,就是他来盯着我们看,走你。就好了,第二是哪是这个圆。这个。这不是这个圆吗?但这个圆你。能用我们的四个方向的类吗?这很明显,这有往返的,有折返跑吧,那这样的话我们得单独去定一个。来这一把定义圆的动画。点一个PT杠。配置与cycle。来这一个他。
26:01
先把基本的写一写。这个名字是不是就是他?这个动画肯定是不止0.6秒了。能懂吧,他是不是有折返跑?那我上来就给他整一个他吧。好了,把这些基本的写好了来登场,那接下来我呢,先把这个动画的名字整过来,这想都不用想,是用百分比。对不对,关键是多少针。这个估计用肉也是不太好看了。是吧,大概也就那么4567针。咱们先五折吧。差不多。那第一针我们一针一针来写,第一针首先它有一个位移,这个垂直方向的位移,这不用说吧,还有其实还有一个还有什么变化。没有发现有其他的变化。
27:03
刚开始是不是有点模糊啊,也是有个透明度的变化,那这个时候我应该是先写一个translate。后边再带一个,对在这带没问题吧,刚开始小一点就0.3吧,关键是考虑这怎么写。呃,分析一下它是从哪儿,它的走向是什么样的。是不是从上往下掉,而且这个不太好看,他的位置不是100%在头上。你再看一遍。大概的位置是在这一块。等会儿啊,我看应该是这一块。这样的。能懂不也是不是在他头顶,也是不是100%在上面,那你可以取一个80%,嗯。好在上边用正值负值。
28:00
还正直。上面不是负的吗?啊,上面是副制付80%嘛,然后来加一针,比如说30%这一针。把这件拿过来。那接下来在这儿。首先30%这一针,你可以是先不用让他外位移,先给他整一个东西。现在透明度干嘛?先亮一点,然后再往下再整一整,那这个时候就要正儿八经的让它去干嘛往下掉啊,或者这个掉一点吧。那直接让他掉就掉到哪了。看着啊。走,你。是先大概掉到这个位置,那懂吧,也是比我本身的位置往下走了一点,那这个位置这就不能用复制了。大概是多少?30吧。咱们一会儿再调啊,一会儿再调那30这一针完了来再来一针。60。
29:01
30%,他是不是掉到下面又往往上走了一点。走,你又好像走到上面。负值了吧,但你这样的话估计可能会出问题啊,这个30有点掉的多了啊。掉10%吧,那往上走的话,比如说来个负百分之。多少呀,二十二十吧,因为下面还有一针,这不还有两针吗?还有两针的话,这整一个比方说75。这差不多吧,哥的。其实。啊,那这个时候你应该是再让他往下走一点。那这个透明度就让它全亮了吧。那再往下一针,最后一针,最后一针的话,就是说首先这个肯定是零了,写不写他都行啊,那这个透明度呢。一。懂啊,我都有点虚啊,写的啥玩意儿?来咱们看一下吧,到底是个什么样的,看咱们的啊刷新。
30:02
还行还行。差不多吧。啊,大家哪边感觉需要调一下,最后一针,其实好像太慢了。是是是这样吗?你看这太慢了,太慢了,你说是因为什么?改成90。往大调一点吧。大概是85。找你。这个了吧,那也就说我这得反向去调。还有一个就是把这个我告诉你,他慢是他挨的近,不是活动的范围小吗?也说你逼逼他一把,让他的工期加紧一点。移动的距离大一点。是不是就快了一点,这个你们下来自己玩玩,随便怎么整。
31:01
就这意思。那接下来我们再往下看,还有什么,接下来就是看这个东西,这也不知道是个书还是什么。啊,先做这个小儿的也行啊,来,盯着小儿看小儿太简单了。来找一把,小儿是这个的。PT。杠配杠move什么,哎,他是从左边出来的。刷新没问题吧,接下来还有是这个家伙。还有这个。哎,我的箭头呢。啊,在这卡住了啊,还有这个这两个小点点看到没有,这三个的动画告诉大家是一样的,一模一样的,你看一下。盯着看。看哪个最明显,看他最明显。再看一遍。
32:03
是不是从一个小的倍数一直慢慢往上放,放大到我当前的位置啊,哎,那这样的话,我们来定一个缩放的动画。点PP。发用什么呀,木吗?就是吧,往大放好来,那么这个名字呢,我用它时间呢,大概0.5秒。啊。然后爱先把这个叫拿过来。这一次又分。嗯。其实它就是一个平平滑的一直往那放的过程吧,没有什么曲折的过程,那我其实可以用from to来整在写,在to写。
33:03
按理说写这么多应该能懂了,哎,你想最终我这参照物是不是最终放大到这个目的啊,你说你得告诉我你从什么倍数来放大吧,所以我们应该是在里面写放大有什么缩放。这个知道吧,里边是不体现你的倍数啊,比方0.4。一个两个三个,他们三个的动画是一样的啊。走,你。这不就好了,嗯,好了。再往小缩一点。这这都没关系啊,你随便你整成多少,0.2就0.2来。其实你肉眼是看不出来有多大区别,安慰一下自己。那我们来看第三个。这个就太简单了。除了借头的这个我先拿过去。
34:00
哎,把箭头的是不是给了他,那这三个动画其实是一样的,就是一个翻转的动画。再来看一把。是不是翻转一下,翻转一下来最后一个动画了。DRPT,杠杠,呃,我记得这起的这个类叫汤。好把这个敲一下,这少一个。啊,动画名字有了,接下来零点就0.6秒吧。Is。动画名字拿过来。用还是百分比。困了,天呐,坚持一下,咱们最后一个这个了,百米你困成这样了,还能响应我挺好的from to啊,它就简单一个翻转啊,还一样的道理,还是在from里面写,因为最终参照的是我最终翻转完的这个效果吧。
35:17
Transform。然后呢,翻转用什么。是说咱们不是刚用的吗。这个没学过啊,RO它是不是也垂直方向去翻转,那这个里面你是要写你翻转的角度吧。我就写90够不够。别忘了这个东西是它的单位,这连起来才叫90度吧。嗯,这个应该是给大家讲过的啊。整过来看一下。
36:02
我是不是没把这个。给了他。走,你。是不是就能翻转了,呃,你们还记不记得有一个翻转,其实我可以规定他那翻转的那个。Transform。只翻转的那个轴中心点,我可以去设一个50%,还有50%。没问题吧,那这样的话就翻转也做完了,哎。这是我们C3的一些东西啊,带大家回顾一下,我先把这个视频停一下。
我来说两句