00:00
来啊,下面呢,我就有一个呃,常见效果要给大家看一看就叫回到顶部。也就是说这个里面有一个JV看到了吧,啊,它是一,它其实是一个固定布局。能不能懂,就是你在滚动的过程中,它动吗?它不动啊,OK,当我点击它的时候,它就会回到什么底部,好做吗。啊,那要看你做到什么样的程度,你要简单的做和复杂的做不太一样,也就是说你的效果做的好还是不好的问题。如果你简单做。回点又瞬间回到底部和平滑的回到底部,那当然有区别啦,瞬间呢,就是我们现在刚才做的就是瞬间的瞬间滚动。
01:05
冲的一下滚到300,冲的一下滚到200是吧,那平滑滚动什么意思啊,慢慢的滚过去啊,等于说滚还要慢慢的滚好来我们来看一看啊看一看,首先我还是要去把RY给他什么引录进来,接着去写我们的JS是吧?来我要给它是不是加一个什么,是不是点进去呢?啊非常容易井号啊对不对,接着了可立可呗。我们先做简单的叫瞬间滚到底部来滚动,这个好做啊,这个无比的简单,什么意思啊,那我是不是要操作的是我的这个玻璃操作我的这个页面的滚动条啊,对不对?那我要想相当于我是设置个页面滚动条的那个sc top值为多少零,那个还还不好做,找到我们的HTM,或者是我们的什么玻璃调用它的sc top,为什么呢?零。
02:38
是要干什么啊,是来看一下有没有效果啊,先刷一把滚到在这里是吧,走你你说这看起来是平滑的啊啊OK。它是不是很快就过去了,但是你会发现有很多效,这个轨道顶部效果,它是慢慢过去了。
03:03
是吧,啊,人说我看到都是这样过去,那我就没走了,那那我只能说我们现在就要求慢慢过去。这个慢慢过去,它是怎么慢慢的。你想我假设我要从这个位置,从这下面这个位置是不是滚动到这里来,对不对,那怎么样慢慢滚呢?大家知道动画是怎么产生的,就是这个平移动画是怎么产生的,这个也就是说我要从譬如说我从这个位置移到这边,他花了一秒钟,那时间花哪去了?时间花哪去了?时间花哪了?他是匀速的吗?人说哪不是匀速有是匀速运动吗?好,这里面我就说一个,说一个我看到一个新闻特别有意思,说什么呢?说你家里买一个高清电视机啊,你坐在沙发上正在看高清电影啊,动作片非常打的非常非常非常连贯啊,非常高清那个你就感觉那个动作是不是都是连续的,都很流畅,对不对,但是你得想真实的那个,无论是电影还是电视剧,它的画面是一帧一帧播放的。
04:25
对不对,而且中间是有间隔的,那说一个什么事啊,就在说一件事情,说当你在看电影的时候,你旁边啊坐着坐着一个蚊子啊,或者坐那个苍蝇,他也在看电影,但是他看了就不是电影了。啊,他可能看的是幻灯片。就为什么呢?你要回想一下我们小时候那个苍蝇蚊在这里是吧,你是不是准备去去揍他,你是不是觉得我要把色奶镜拿出来啪一下拍过去对不对,你是不是经常拍不到啊,为什么拍不到啊,啊,简单的说就是你太慢,它太快是吧?OK,那这个地方就在说什么呢?就是说不同的动物。
05:21
它单位时间内能接收的信息量是不一样的,就不同动物就有的动物就是思维很缓,缓慢是吧,那他在一秒的时间能接受的信息啊。就是不是很少啊,能理解不就同样人人其实也有,人与人之间也有差别,有的人是反应很灵敏,而有的人是不是反应比较慢,对吧?啊,OK,在说一个什么事呢?你说那个马路上的那个那个那个汽车是真的匀速的吗?是吧,OK,你在你就想是真的匀速的吗?那个动画,动画在执行的时候,就那个电影在放的时候,难道真是连续的放着吗?不是,其实中间有停顿。
06:13
人说我怎么没看出来呢?是吧,那得说,人的肉眼能够识别的时间差是有一定的值,只要你的你的那个停顿的时间在那个值以内,你的看着是完全匀速的,你分辨不出来那个差别。能理解吧?前面你们不做过那个,做过那个就是龙波图吗。重吗?你说我们说我们点一下下一页这个按钮,它是不是连续的啊,平滑的从右边是不是移向左边是不是,而且是不是在移动过程中花了一定的时间,假设500毫秒。那时间都花哪去了?
07:03
时间都跑哪去了?停顿,你不有一个设置了一个in the wall吗?Set in the wall是不是指定了一个间隔时间,那个间隔时间在干嘛呀?在休息吗?也就是说我要让那个让那个图片从一个位置移到另一个位置,我指定它的life的值是吧,那时候你不是指定它的life的值吗?那指定它的life的值,它要花时间才能多过去吗?他要花很长时间才能从你直接代值它,它从譬说我的代入值开始,等于你把它设置为十,它是不是移动,这个移动要花时间吗。可以,基本上说可以不需要,因为那个时间值很小很小的。懂不懂我们的动画其实时间花哪去了,停顿?能不能理解花在评论上面了,那你说我要想让我的滚动条花个啊,500毫秒从下面滚动到上面,你说我该怎么做?
08:14
我该怎么做,先把这个整个距离分成啊很多个段。分成好几段。没问题吧,那我运动的时候我是什么?一段一段一段的运动。能不能理解我从下面这个位置移动到这里,其实是瞬间完成的。能不理解啊,是瞬间完成的,每一个小段的移动都瞬间完成,但是在段与段之间,我会什么?我会休息,我会停顿。能理解吗?所有任何的动画道理都一样,中间有停顿。
09:08
啊,所有任何的动画效果,其实道理都是差不多的啊,他把一个大的变化分解成什么那个小的变化,每一个小的变化它都是瞬间完成的。值在小的变化与小的变化之间,它有什么停顿?就这么个道理。能懂吗?干啥呢?你们以前那不那那那么头不白做了。能不能懂啊,好像是被迫的。好行,刚才分享为什么分这个,因为我们现在要想,哎,我们现在现在实践的效果是不是瞬间的,那我们希望什么啊,平滑的。
10:04
啊滚动啊滚到底部,那这个时候就稍微有点麻烦。会装比较麻烦呢。这里面我们要平滑滚动,就需要得到一些数据才行,我要得到哪些数据了,譬如说我要得到我的总距离。是多少?就是我要滚动多长距离啊,能不能理解,还一个还除了这个距离还有什么啊,大家看啊。啊,滚动的总距离啊,先我把把它标识一下啊,总距离还有什么。还有什么总时间呗,是不是还有什么,还有什么,你想想看,我们是不是刚刚说过了一个动画,它实际效果就是一个大的变化,要分解成什么,很多个小的变化。
11:02
啊,对不对,那个小的变化,就说明我每一个小变化变化多少呢,是不是两种吧,好这个时候啊有两种方法,一种是我可以说间隔时间。什么叫间隔时间啊?就是两个小变化,时间停留多长时间,我有了间隔时间,有了总时间,我能不能求出我要需要动几次,能不能来?或者说我能不能求出我每一次需要动多少?我能不能知道我每一次需要动多少,可不可以,你总次数知道了,你总距离知道了,每一次移动多少不也清楚了吗?是不是这概念啊,好。那有了这三个东西以后,最后我们是不是要反复的运动?你看我们刚刚分成很多小运动嘛,动一下停一下,动一下停一下,动一下停一下对不对,你说用什么呀。
12:03
是不是循环定时器,你这个东西啊,不是靠背的,你先得分析好。啊,看。使用循环定时器不断移动。或者不断滚动吧,这个好一点是吧,大概就这样子吧。要说啊,不断滚动,关键是我什么时候停啊。是不是还有一个是吧,啊还有一个事情干嘛到达顶部啊,我怎么知道到达顶部了呢。到达题目干嘛停,停止谁定时器?无非就是这些道理吧,对不对,那行,那我们来做一做,首先第一步求出总距离。
13:02
打球啊,总距离是不是我当前的top的值?高位来,这个叫距离,因是ten可以吧,等于。把这个拿过来。把这零给他什么去掉可以了吧,总时间我是不是指定一个时间就行。来看等于啊,我假设来一个我我让他明显一点好吧。500什么意思,500毫秒这个中间间隔多长时间啊,我来个特态,因为我是用的是循环定时器嘛,间隔时间这个搞一个多吧,50可以吗。能懂吗?啊,别搞得太小了,没你太小了,其实其实反倒会你导致你有点卡的感觉,因为太频繁了没意义,知道吧,你你想想看,十毫秒十毫变那个间隔时间太短了啊好来有了他们以后,我要算出来一个什么东西。
14:13
叫it什么意思?每一个小的单元移动的距离是多少?怎么算?第10TEN除以什么这一个啊,Time除以。Into a time对不对,能不懂我这个是不是说明了我这一除,这里面除说明我要运行运动多少次啊,这再一除就说明诶我不写错了,写这个啊对,看错了,是不是用我总距离除以这个次数,就是我单元移动的次数,单移动的距离对不对?能懂吧,好,下面的麻雀。
15:03
循环定时器,那我就握一个interval ID等于set interval传一个function。再来一个。这是搞一个时间,时间是多少。间隔时间多少,你比如说50TIME对不对对好了,那下面我该干嘛呢。大哥大,我该我现在是不是应该去不断的去滚动。对不对,滚动的话啊,大家看到啊,我最好先啊先这样吧,先把这个是不是先盯一下。呃,多兰福玻璃吧,我就搞个玻璃好吧,页面,嘿,等于它啊,我这个要用啊。
16:02
是不是好,那我应该不断滚动,怎么滚?什么?多少嘞。多少啊,是不是那滚动到哪去。我现在是不是滚动这么多,那我滚动的位置是哪呢?大家看这一个时刻top指定的是什么,我目标位置的距那个坐标吗?那你想啊,我现在我是去写它吗?不是,是这个distance减去是不是item instance对不对,或者说我这么写啊,我这么写一下,大家看到我这么写。减等于。哎,他们是我滚哪去?滚哪去是不是的位数去,是不是就是我计算出那个最新的一个位置嘛,是吧,好,那总要停下来吧。
17:15
我怎么知道滚动到底部了呢,能不能理解啊,我这个地方大家看在这里啊,在这里。到达顶部,我要停下来,是不是我要判断一下,如果这个distance小于等于几?小点解零,那我应该啊,有没有可能小于零,我有可能小于零,你不但减不就有可能想因为这个计算它有可能出现小数,知道吧,不是一个整的。如果是一个整的话,如果它们之间都是完全整除的话,都整的话,也就是倍数关系的话,那这个量肯定是零。不肯定有一个零的对不对,但是有可能是不是不是相等的呀,那不是等的怎么办,是不是有可能到一个负,譬如说负一。
18:08
能理解吧,那这个时候你要把它干嘛呢?你要让它第ten,你是把它修正一下,这个地方要修正一下。此时说明是不是到达这顶点了,我应该干嘛去停止定时器,其实非常简单,就是清除定时器,可尼尔特传什么特ID走你是不是?前面没请别的。可以吧,啊可以,那不就滚到那赢了吗?还有什么要清楚了,前面在听,为什么前面要听写啊,这个地方也就是说我们这个地方点有可能是不是不断的点是吧?啊,我们先看啊,先看下这个啊,先看下这个再说啊。
19:07
还没想那么多啊,来试一试。走好像有点是不是有点快呀,哎,我们这个是数据的时候不能这么写,取数据的时候不能这么写,你现在啊,他是这样的,他这个地方你这么写读跟大家说,我现在是匹配了两个元素吧,我匹配了两个因素,我读读哪个数据,读第一个数据。是零,读一个数是X,因为现在是,现在是Chrome是什么玻璃,我应该怎么做啊?那我就不能这么写了,我只能是。啊,我只能一个一个整对不对啊,说白了是HTM。这样的吧,OK,这是一个还一个啊,这就我们刚才这个问题啊,一不注意就犯错误了,这里面写什么玻璃。
20:07
这种写法只能用于什么设置对不对啊,这个要搞清楚啊,好,那有我们再来看一下啊,再来看一下现在我不用不用锻炼调试了啊。看见。肯定可以啦。各位可以的啊,这个时候啊,写个500。就应该会有效果。哎,这里面有个把那给他什么看。看懂啊,现在我们就实现了一个这样的一个滚动的效果,其实你没有看到它是不是一顿一顿上去啊,你说老师你这个动画怎么这么钝呢?因为我的这个间隔时间,你的肉眼已经能够区别开来了。
21:09
能理解吧,能理解啊,这是这样一个事情,大家需要去注意啊,嗯。这个程序就写起来稍微要麻烦一点点,但是还不是特别麻烦的,你如果你能写那个轮播图这个东西应该是很能写的。这边轮墨图那难度那要差很远。大家不要说了,我人不早已忘了,忘了,等会儿后面我们又写一遍啊。
我来说两句