00:00
好,下面我们去说另外一个东西,叫什么呢?自定义动画。其实你想啊,它内置动画是不是改变它指定的那几个属性,那其实按说来说,别的属性是不是也可以发生改变了,哎,其实也可以,那它这里面呢,也去封装了一些方法,尤其是这第一个。什么意思?Iate启动动画,启动动画这里面有些有一个,第一个叫参数,这是一个对象,这个对象就是说你哪些属性要发生改变。改变为什么值?啊OK,那后面呢,我们就暂时先不管它了啊,这个应该你应该也能知道是什么对不对,其实这个这是属于是跟开始是一个意思啊,重点我们是研究它啊好来我们来写一写啊,写了才能知道你你有感觉,你不写的话没什么感觉。好,这里面呢,我有一个div啊,OK,有一个div啊,Class叫div OK,有一个文本啊,我本身是不是有一个宽高对不对,也有拓值,也有什么left值。
01:17
看着啊,我当前这个div是有宽高,有拓值和的值的。那下面呢,我们要去做一些做一些操作来,我这里也有几个按钮,其实呢,搞法还是跟刚才一样的,先来去得到那个div,我们操作的目标就是它。美女们,下面我是要给这里面所有的四个按钮是不是分别加点钉钉啊,搞法还是一样啊。来,我把这个里面呢,一个一个来写一下。先把这个里面呢,先写了再说啊井号第呃不是B填一点看例方向一共有。
02:06
四个。嗯,放了没好,我们先来看第一个啊,第一个呢,要做这样一个事情。我们来看一下。啊,现在我们来一下div解,首先肯定要调哪个方法anim,它里面要传入的就是一个你的哪些属性发生变化,指是多少,看看啊什么意思,宽度和高度都扩展,为什么,那你就指定。宽度多少,200这个地方你说一下,它可以不用加单位。这就是结块的好处,原生的是必须加单位的吧,说白了他帮你加单位能懂吧,那我能不能自已加单位?那当然也可以,那你就得这么想。
03:04
是吧,你就得这么写了,这不一个意思嘛,那我何必这么写呢?是吧,再来一个什么。是什么he啊,这个后面可以有逗号,人能到吧,可以,但是我一般不写啊。好,那也就是说开始的宽度是多少。是不是都是100,接着宽高是不是在它400毫秒之内变成200和200。能不懂?好,我们来看一下,一看你就能明白了。刷一把走你。有人说太快了是吧,没有那种感觉,那怎么办?
04:01
能不能懂能懂好,现在这个操作是不是它那个宽和高是同时变化的,哎,我有一种需求,我想宽先变化,宽变成200,宽变完了以后呢,再变高。跟我现在的效果一样吗?它不一样,那实际上现在第二种需求是两个动画,知道不是两个动画,那也就是说什么意思呢?div.anim。首先你只是去变随宽度只是变到200,这是不是动画的目标位置的一个样式属性啊,好,接着我们说过了,它返回来依然还随这块对象,我可以干嘛呢?我可以继续函数链调用或者方法链调用。
05:07
看到吧,啊OK,再写个什么200。啊,而且你如果有时候你想指定时间,那你就指定呗。这个时间一定要一样嘛,不一定你想成立多少就多少,对不对,好来看一下啊,看一下轴。哼。是不是可控性很强啊,啊看。好了,这次说的是啊,我去扩展它的一个宽高的一个尺寸,那下面啊,我们下面的需求,下面是要想办法让它移动用动画嘛,除了大小变化,是不是还可能移动啊。来。
06:03
来,首先我们说的是移动到什么500。这说的是啥?耐的是不是500 top是什么?100要移动是不是改变耐的字数top值来写吧。一点什么an哪一个,这个先写个时间啊,时间稍微长一点,会能够稍微看起来效果好一点,好,这里面写什么life的值为多少,500,那top值呢,100,你看它原来是多少啊。本身是什么,300和50,那他向哪个方向移动,向右移动。耐的向右没有是不是向右top向哪边移动,向下是不是右下角移动。
07:05
对不对啊,记住了是向右下移动对不对。可以吧,我们来试一试啊。啊啊BT啊,没改啊,把这也改了,免得等会搞错了是吧,来试试,试一下就知道了,看啥啊,走有没有动,是不是都有动看着吗。其实你想到这个事,我们就想起我们那翻页是不是也可以这么做,也可以用动画来做我们那个翻页,我们翻页不水可以移动吗?是不是我又计算这个计算那个,我能不能用动画,动画是不是能省电事啊,我有了动画我还要电视器吗。
08:01
我还要循环定时器吗?不是它不在控制嘛,其实它内部也是在循环,不断的变化,不断的在用,知道不,说白了,它里面也是用定时器来不断的在变化的。但是我们使用者来说,用动画是不是就简单一点啊,啊后面可以想想怎么样把我们那个代码改成动画来去做啊,OK,好来啊,这是这个来,我们也可以假设我们要现在向右下移动是吧,我们能不能向左上移动呢?写任何方向都可以,什么方向是不是有一个差,有一个相对的值啊,啊有个相对值来我们搞第二个啊,这现在搞的,现在做的是第一个。做第一个,我们现在来做第二个。其实很简单,就是把这个copy一下。现在我们想向什么呢?左上移动啊,大家看到啊,Life值用为什么100这个贝拉是本来他的是什么,本来是300的知道吧,他本来是多少50。
09:17
是不是在左上移动。啊,至于向哪个方向移动,是不是他们两个差值来决定的。能理解吧,来试一试。哎,不是这个看不到,是不是左上移动。能看到吧,来,无论是右下移动,左上移动还是什么移动,现在我们是不是指定了移动到指定的位置这样一个概念,移动到指定的位置。这不都是都是写的是指定的位置吗?是不是,那还有一种移动,它不是指定移动到哪里。
10:00
它是指的什么呢?移动多少?什么意思?移动指定什么呢?指定移动的距离。搞法就不太一样了,这个地方该怎么做,看他我指定移动的距离,耐的的距离是100啊,Top的距离是50。那我还能像这么想吗?大家看啊,我现在。怎么写一下不要这个啊,我能不能就写100。是吧,50是吗。是不是不是啊,这明显不对,这一个指定的是目标位置的坐标是不是。而我现在的要求是什么?你移动的距离是这么多,那怎么办?是不是要根据当前的位置的left值再加上这个值啊,是不是,但是它提供了更好的语法啊,你写一个字符串,你写个加等于100。
11:18
这个看你不能看他不懂吗?家的也不在原有的基础上,再以五十一百吗?其实你你不用这个语法你也能算,只是你要去取那个当前的位置是不是,那是不是麻烦一点,你用他这个语法,我还要自己去取吗?说我自己不到呢,他不行道到你能到不到。能不能懂我啊,这挺方便的啊,来我们看下这个应该是向右下移动是吧。对不对啊,OK,大家自己到时候可以看一下,一个是50,一个是100啊,那我像啊,那好,这个现在我们是不是做了第一个。
12:10
这个一样搞,把类似的。我们现在搞这个,我们现在移动的只是负的。是吧,那我应该怎么办呢?觉得大家应该想没想到。OK,这个写什么?减等于,减等于只是这个,一个是100,一个是什么20,我能把这个单引号去掉吗?多大呢,那样那样的话就不对了,你的单行去掉,你又不是数值对不对,好来看一下。懂了。对吧,对的啊,还挺厉害的。好来下面一个啊,他这我们前面研究的是怎么样的动,是不是下面还有一个有的时候可能需要什么呢,停止动画。
13:09
那停止动画用什么呢?停止。什么东西是不是stop呀,让那个动画给他什么停止下来,来试一试。啊,试一下啊,我们让那个动画停止下来,就是它div点什么多。是吧,好,那我们就来看一下,看看它到底能不能停呗,呃,我们等就等他为例,好吧,把它时间搞长一点。3000。看本来啊,它是慢慢过去的,对不对是吧,时运时间很长,我完全有机会,是不是点了来试一试。
14:04
懂。啊,在点谁呀,点他吗。啊,一样的哎,他现在是不是有一个值板,有一个在在现有的位置在进行进行计算的,能看懂吧,啊OK,它是停在这个中间的吧,啊停在这当前位置刚好你点的这个位置,那你再点的话,是不是在现有的位置再进行计算累加呗。啊。啊,其实这个stop里面还可以传参数了,我们暂时就不研究它了啊,它里面还可以传参数,还有一些细微的区别,我们暂时就先别研究这么多了。大概还好吧,这个东西挺好用的。那我们最终呢来,我们最终去做这样一个效果,我们一起搞了得了。
15:04
哎,我把那个效果,那个做好的效果给他演示一下,非常简单,两下搞定了。啊,这是不是那种什么,是不是导航的菜单效果,当你的鼠标一放上去,它的那个。下一级的菜单是不是慢慢显示出来,当你离开的时候呢。他们就收起来呀,是带动画的吧,那你说我应该用什么方法去搞这个动画。什么方法,通过这个什么方法来形容这个动画,是不是力的大是阿尔法就可以,是不是,这不就是一个高度的问题吗?比如说老师我还想去搞一下那个,搞一下透明度可不可以也可以对吧,这个没什么太大问题,能看到吧啊,但是这个没有。
16:10
这个为什么没有呢?因为他没有下一集。什么意思?大家看这最外面呢,是ul是吧,里面呢,是不是有很多ii啊。啊,但是呢,有的AI。下面有ul,这就下一句了。看到没有,那有的是有吗?没有没有,我能我能我能去整那个动画吗?不能,那对不对,好,那现在呢,我们要去实现这个效果呀。来,首先我要把谁导进来?写宽呗,是吧,接着我要去写一些代码,这个代码两行就搞定啊,来一个一,主要是这个地方,首先我要知道给谁去加事件呢。
17:08
首先我要知道是给这个ul下面的ii去加实验,加一路移出的事件,对不对?好,那我找ul下面ii,首先我还是告诉大家先跟据A走。找让他两为一个复习是吧,加上什么它接着它下面有一个什么,有什么ULUL下面有什么ii,但是必须要求这个I有什么,是不是有ul呀,对不对,那我怎么判断它有没有什么牌子叫什么has孩什么东西ul,诶不用不用不用啊加多加了一个就这么写的是吧,给他加一路移出怎么办,一路一出的监听怎么加吼我嘛。
18:08
是不是第一个方形代表的是一路的阶梯,第二个方形代表什么?移出移入的时候我要干嘛,我是不是要去展开呀。是不是啊,OK,动画展开能不懂啊,开展开,而这一个是什么动画收缩就带动画的收缩嘛,等等吧,好来,那现在我去将谁展开收缩呀,是不是我当前发生事件的这个ii下面的什么ul啊,对不对,那怎么办?我要找到当前发生事件的ii上面的URL怎么找?首先是包装一下this,这样就有接块对象,是不是有了接块对象,我是不是能轻松找到他的那个U啊,那个孩子啊。
19:13
我要找到子元素用什么查找子元素求准传什么ul是不是好,那我现在啊,我现在因为他的孩子不还有A吗?你找A吗?找不找A,我找A主要找什么ul,我给他做什么事情,让他展开用什么?是力达down还是up down向下吗?看懂话,那你说下面怎么做,咔嚓一下给它搞过来,接着干嘛呢?啊,是不是有点太简单,你说不可能这么简单了。
20:04
来试一下是吧,可不可以,你看可以吧啊,但是有的时候吧,就是你看着啊。什么意思,我这个世界我啊我我你看我没动了,为啥?因为你你这个事件是切换太快,他你一直在去做,他那个时间,譬如说我在我在200毫秒以内,我是不是触发了N次,他是排队一个一的做,你应该怎么做啊,你应该先调用一个方法度。再去开始,这样就不会出现班车那种心理了。这个就是将未完成那些所有的都给它什么干掉。
21:05
这样的话,他们就不会出现刚才的这个问题了,能懂不?来看一下。它会出现正常的问题吗?是不会了啊,OK,你怎么切换它最终都不会出现那种情形了,不会说我我都没动了,还在那在那晃,那都看见,多恐怖啊。你看没多少,没写几号。还是很爽的啊,至少我是这么觉得啊,如果你不这么觉得,那你也是境界比较高啊。啊,这样呢,我们就实现了这样一个常非常常见的一个导航菜单的一个展开和收缩的一个效果,嗯。好。
我来说两句