js实现动画移动效果

大家好，上个视频我们用 css 简单实现了这个无缝滚动图片轮播的布局，但是现在这些图片还是动不了的，按这两个按钮也不行啊。这个视频我们就结合 gs， 让这几个图片可以轮播运动起来，并且可以通过这两个按钮来切换轮播的方向。 先给大家来分析一下思路，现在大家看到有四个红色的小方块代表我们用来轮拨的四张图片，黑色的方框就代表轮 显示的区域。每次呢，我们只可以看得到这个方框里面的这一张，其他几张被溢出隐藏掉了，我们就看不到了。我们要让图片在水平方向拨起来，是不是就 这几张图片往左或者往右来移动，对吧？但是我们只有四张图片，我们这个呆萌是只往一个方向来 轮拨的，要么往左，要么往右，比方说现在从第一张开始向左轮拨，哈，我模拟一下这个轮拨的过程，这个图片呢在滑动，我让他滑到第四张， 好，现在已经是滑到最后一张了，那图片要继续往左边轮播，但是后面没有图片了，我们滑到最后一张，接下来应该又从第一张开始轮播，循环这个过程，对吧？那应该怎么处理呢？这里先恢复到第一张照片， 直接跟大家来说方法啊。首先我要让这几张照片复制一份， 这样我们的图片就有八张了。接着我让这八张图片和刚才一样，也是往左边开始轮播， 先让他轮播到第四张，这个时候如果继续往左边轮播，现在我们就有图片可以跟上去了，对吧？ 不过重点也是这里了，当我们进入了新的第一张照片之后，如果继续往左边轮播的话，我们就不接着再往左边移动这些照片了。这个时候我通过 gs 迅速把前面的第一张给他拉回来， 当然这一个过程程序来做的话，是非常非常快的，我们是看不出来的，这个时候图片就可以接着往左边来轮播了。你看，当他播到下一个第一张的时候， 如果他继续还要往左边来轮拨呢，我们同样迅速把前面的第一张呢给他拉回来。这里大家要知道，我手动示范拉给大家看，大家看得到我 拉的过程，但是这一部分程序来做，他是瞬间完成的，大家是完全看不出来的。看起来这两张照片机呢，就是同一张啊，所以可以在视觉效果上面呢，实现无缝滚动。刚才说的是往左边来轮播的，那如果要往右边轮播呢， 其实是一样的哈，像现在再往右边移动的话，第一张图片他的前面，也就是那左边已经没有图片了，所以这个时候呢，我迅速把另外一个图片一给他拉过来， 这里我们虽然换了一个图片一，但是大家看不出来，对吧？我就是希望大家看不出来，不过这个时候我已经可以开始往右边来轮播了，因为呢，在他的左边已经有图片了啊，一直轮播到这个第一章的时候呢，同样我 再把前面的地毡呢给他拉回来，一直重复这一个动作，就可以完成一个向右边的轮拨了。 细心的同学应该有发现哈，就是呢，无论向左轮拨还是向右轮拨，好像都没有后面这三张图片什么事，对吧？ 他们好像根本就没有参与进来，那为什么还需要他们呢？这里其实是为了好计算，因为是直接把前面复制一份的，到复制的第一张这里哈，刚好是这八张图片的 终点位置，对吧，也就是那宽度的二分之一哈，无论我们有多少张轮播图，直接复制一份的话，这里呢都是二分之一的位置，这样子呢，就比较好计算。后面几张图片呢，确实没有参与轮播，这样子做呢，就是为了计算方便好轮 播的思路呢，大概就这样了，我们来看代码，我们要控制图片轮播起来，实际上呢，是修改 idv made 的这个点，他的位置这里我们可以通过定位来做哈，不断修改他的 left 就可以了。所以我们这里要对他的负极这个点啊，对他开启一个相对定位，然后呢，再对他开启 绝对定位，来到 sss 部分负极这个地，给他开启一个相对定位，再给他设置一个绝对定位， 给他一个 left 为零。等一下呢，通过 js 来修改这个 life， 就可以让他产生一个运动的效果。好，来看一下 js 代码，这里我提前获取到几个对象了，欧美就是我们控制运动的这个 d 的对象，欧玛斯呢，就是这两个遮罩的复元素的对象哈， 要呢，就用来控制鼠标移进移出，轮播的暂停和播放，还有就是图片的一个对象的速度。最后面这里呢，就是两个按钮， 根据我们刚才分析的，我们先让这几张图片呢复制一份哈，就从四张变成八张，直接对这一个欧美这个对象呢，让他的英呢 h 加等于他自己就可以了，还要声明一个控制速度和方向的变量哈，就叫 speed， 这个值越大，轮波的速度呢就越快，这个值为正的话，轮波呢，他的方向就向右来，轮波为负的话就向左，这个呢，等一下再来说初始值，我们设置为五， 然后来写一个控制轮波运动的函数。刚才说了，我们要让欧美这个对象运动起来呢，其实就是修改他定位里面的 left 词， 这个值，我就让他当前的 left 值，也就是呢， offset life 加上一个 speed， 再给他加个单位，再重新复制回去给他的话，那他的 left 就不断的发生变化，发生改变，他就可以运动起来了，对吧？再给他开个定时器， 让母粉呢不断执行起来啊，每隔三十毫秒执行一次，现在这几个图片应该就可以运动起来了。我们做测试的时候呢，让他速度快一点吧。回复的一开始呢，让他往左边来运动哈，来看一下效果，刷新 现在这些图片呢，就可以运动起来了。不过因为我们复制了一份哈，实际上呢是有八张图片在这里的，但是如果当他八张图片全部轮播完，后面就没有图片接上来了，对吧？现在呢，就没有图片了， 所以我们就要想办法把第一张图片呢给他迅速拉回来，做一个障眼法。所以我们就要来判断一下，先来判断往左的情况，往左的话，他的 offset 呢，是不是越来越小，对吧？当然他往左呢，这个值就为负的，他绝对值上来说呢，是越来越大的，但是呢， 他竖直上来说呢，他就是越来越小了，小于多少呢？是不是小于他自身宽度的一半呢？这里是负的 to upset me 再除以二。 再给大家来分析一下哈，也就是呢，他往左的情况呢，让他往左来轮拨，一直拨到下一个一的时候，这里，这里是不是就刚好是他宽度的一半，对吧？他要是再继续往左边移动呢？哎，他就会小于他自身宽度的一半了。当然绝对值上来说呢，是大于 啊，但是数值上来说呢，就是小于的，所以呢，就是现在的这一个条件，这个时候我们就要把他拉回到一开始第一张照片的位置，对吧？所以这里呢，就让他等于零， 然后就是向右轮拨的情况，这里呢也要给他判断一下啊，同样给大家来分析一下，当他向右边运动，他的 left 值是不是越来越大，对吧？ 当运动到第一张照片的时候呢，哎，他的 left 值马上就会大于等于零。 left 值是哪一段的距离，这个大家应该清楚哈，属于定位的知识，这里没有详细跟大家说，简单给大家来画一下。 left 值呢，就是这个底，他的左边缘 距离它复元数的左边圆，对吧？也就是呢，这两条黑线之间的距离呢，就是这个 left 值， 当这两条黑线重叠起来呢，他的 left 值就等于零了，在左边呢，小于零，在右边是大于零的，重叠起来呢，就为零。这个时候呢，就刚好显示第一张照片，对吧？当他向右边来轮廓运动， 运动到第一张图片的时候呢，他的 left 值为零，但是呢，这个时候他左边已经没有图片了，如果他继续往右边来运动，他的 left 值就要大于零了啊， 就在他马上要大于零的时候呢，我迅速把下面这一个第一张给他拉回来，做一个障眼法，这样这个图片他的左边就有其他图片了，就可以正常来往右边进行轮播了。思路呢，就是这样子，所以这里的判断就是，当他的 offsile， 当他大于零，就让他的 left 值回到宽度二分之一的位置，对吧？ 就等于这一个啊，再给他加上个单位，现在应该就可以实现图片的无缝滚动了。我们来看一下还会不会出现刚才全部图片都轮播完，没有图片的情况。等一下啊， 一共八张图片， 哎，现在呢，应该就可以了，对吧？一直都有图片在轮播，只不过现在只可以往一个方向来轮播。先给 omas 添加一个事件粘贴， 当把鼠标移进去的时候，给它清理一下定时器，让轮拨呢，可以暂停下来。当鼠标移出去呢，再重新执行一下这个定时器，这里呢就改成 mouse off， 把这里 执行定时器，这里呢复制一下，好看一下效果，这里呢刷新把鼠标移进去，哎，这个轮播暂停了，对吧？移出去，他又接着播放了，没有问题。 最后还有通过控制两个按钮来切换轮毂的方向，这个呢就比较简单了，首先是左边这个按钮，也就是第零个，当他被点击的时候呢， 要是比这个值呢，变成负的就可以了。还有就是右边这个按钮，第一个当他被点击的时候呢，这个值为正的，来看一下效果。刷新 把鼠标移进去，暂停播放了，我们试一下切换方向哈，点右边，哎，这个方向呢，可以切换过来了，没有问题哈。如果想给轮播的 图片之间加点间距的话，我们可以找到没这个点，给他添加一个该属性就可以了，给他十个像素，这样子他里面的元素就会有十个像素的间隙了。好，来看一下最后的效果啊，刷新 哎，元素之间呢，有一定的间隙。把鼠标呢移进来，他暂停播放了，移出去，他接着播放，通过这个按钮呢，切换轮播的方向。好，没有问题，感谢大家的收看。

那么现在呢，我们要考虑的问题就是动画了，他现在呢，是瞬间过去了，对吧？瞬间到了这个滚动高度的，我不希望瞬间，我需要慢慢过去，你这样写的话肯定是瞬间过去了，那怎么样慢慢过去呢？ 慢慢过去就是动画，那动画的本质是什么呢？就是我不要让他一下达到这个位置，我想一点一点的改变，最终到这个位置就是动画 啊。一开始呢，大家学习这个用 gs 实现动画的时候呢，可能不是很适应啊，写多了，反正估计都是这样子写。那么你要实现动画，你就要知道两个值，最开始的值和最终的值，这是最终的值，我们算出来了，对吧？那么开始的值呢？ 开设是不是在他没有加之前来进行计算？科一，这个是诚意，拜托孩子，对吧？ 开始的滚动高度要最开始是这么个高的，然后呢？加一之后到了下一项，下一项的滚动高度是这个，那么也就说我们这里呢，要做的事情就是从 from 到去，我们就要做这么一件事，好看一下， 从零到三十要变化，然后从三十到六十进行变化，从六十到九十进行变化，从九十到一百二十进行变化，明白的意思吧？是不是我们要做这么一件事，让 nice 的滚动高度 从 from 慢慢变为去，他不是说一下子变过去，那什么叫做慢慢变为呢？ 在程序里边这个东西就是计时器，什么叫做慢慢变为？是指的是在一段时间内一点点的进行变化，或者说的再明确一点，一段时间内每 每隔一小段时间变化一点，是不就是意思些，每隔一段时间去做一些变化，最终 便完成整个变化，那么这里边需要几个信息哈，你第一次写到这种结实动画，可能不是很适应，慢慢去，适应不着，不用怕， 一个是总时间，对吧？总时间呢？就是 total d r v 型总时间呢？我这里可以设置一下啊，比方说是我要在五百毫秒内，另外一个需要知道的信息呢，就是每隔一小段时间， 然后你总时间五百毫秒内完成这个变化，从那个零到三十。如果说每个小段间隔时间有一百，那你看啊，总时间是五百，间隔时间，间隔时间你可能一百毫秒，那么是不是只变化五次，五次就要到达到达这个位置，对吧？那动画就很 不是很平滑，你跑一百米需要十秒钟，那个相机呢？每两秒钟拍照一次，所以每一次拍照的位置都差别很大，对吧？就感觉有跳跃，所以我们一般来说这个间隔时间越短，他动画就越平滑，所以我们这里的一个间隔时间哈。间隔时间呢，我们用还是用 dav 型吧， 因为我们这里边这个函数里边用不到外面那个边微信，所以说重名的话，他就用里边的边微信了。呃，这边这个时间我给他取个十吗？或者十五啊？写小一点， 就是变化的间隔时间，总时间反正在五百五百毫秒以内完成，完成整个变化，然后每一次变化呢，间隔时间是十五，那么这样通过这两个值是不是可以算出变化的次数 就可以算出来？你想你想吗？我去写写十吗？比方说一共也需要五百毫，五百秒，每十毫秒变化一 次，那么变化的次数是不是五百除以十？要变化五十次，对吧？那么我们把可以把变化的次数算出来，就偷偷点微信，除异点微信，这是变化的次数。好，那么现在就明确了，就是要在五百毫秒内从它变到它变化这么多次，那么每一次变化多少？是不是可以算出来？ 举例子哈，你要从三十变到六十，一共变化十十次，每次变化多少？ 是不是六十减三十多少？三十除以十，每次变化是不是三个相区？ 所以说这里呢，每一次变化我们用电视就可以得到服装 to 减服装，你会发现啊，以后这些情况翻来覆去都是这个东西，都是这种写法，总时间间隔，时间次数，每一次变化的量，然后除以， 对吧？看似每次变化的量。好了，这几个东西准备好了，你就可以写了。写什么呢？就写你的这这题知道不？每隔多少时间变化一下，就每个，每隔第二。微信每隔这么多时间变化一下， 每次怎么变化呢？从他变到他，是不是他的值要加上这个间隔？比方说啊，你从六十 变到九十，每次变化每次变化是三啊，每次变化三，那么怎么变？是不是一开始变六十三，然后变六十六，然后变六十九，然后变七十二，对不对？是不是就这样变吧，还用怎么变吧？ 所以说你要从哪里加？从服装加上得是不断的去改变这个服装，每隔一段时间去从他加上他， 对吧？那么这个有没有结束了？肯定有结束啊，不然这个计时器永远就运行下去了，什么时候结束？是不是加到大于等于九十？到了目标了，对吧？是不是就结束了？说这里的判断一下，如果 from 大于等于的什么？ to 就到达目标了，到达目标值了 就结束了，怎么结束？是不是就停止进十七啊？可丽叶你可否开门啊？就是这两个背量是有区别的哈？停止进十七或者开门 id 吗？就是你不用再变了啊，一到达目标就不用再变。好，我们这里输出一下服装，你看一下， 你看变化，第一次啦，第二次你看变到六十啊，小数据算不精确，很正常的。再变化到一百二十，再变化到一百五十，对吧？是不断的进行变化，那么我们现在要做的事情就是 不断的把这些纸每一次变化了一点点，我就把这个纸设置到哪？设置到列表的 啊？你看现在就已经有效果了， 对吧？如果他觉得他滚动不够快怎么办？那你就改这个呗，你是不是会很容易调整？改这个呗，然后我只要你三百毫秒的完成变动，他就变快了，对吧？就非常容易调整 好。那么现在还剩最后一个问题，什么问题？就到最后一项了，就要出问题了，因为他滚动不了了最后一项，那么这里边所以说还有一个问题，就是 当我们滚动这个是不是滚动完成？滚动完成到，如果说滚动完成的时候已经是最后一项了，是有一些事要做的。滚动完成后如果是最后一项， 那么怎么来判断是不是最后一下？是不是判断一下科二音这个是他的下标，就是滚动他的目标是不是就已经是 等于了列表的确诊练时减一啥意思啊？你这个下标表示你滚目前滚动到是第第几项？如果说这个下标等于了他最后一项的下标， 对吧？你看开音那个，一开始是零吧，是第一项，然后变成一是第二项，二三四就是刚好是这个 li 的下标，也就是他的指元数的最大下标，对吧？是，那么就说明他他他啥已滚动到最后一下了，那么如果说他滚动到最后一下啊，我们这里打打印一下吧， 滚动到了最后一下，三四五。好，滚动完成，你看是不是判断到了滚动到了最后一下，那么这个时候是有一些事情要做的，当最后一项滚动完成过后，你看一下这， 我把这个再加上啊， 好，追回一下。滚动完成过后是不是要回到，回到什么 list， scroll top 等于零，就回到零这个位置好，保存好，咱们再看一下 二三四五一。 哎，他为什么没回去呢？我不是设置回去等于零吗？这个代码肯定是运行的，因为我刚才打印了，他打印出来了，看下这个代码，你觉得哪里有问题，哪里有问题呢？ 因为你这个代码运行了有没有运行，运行了他有没有回到零，回到零了，但是呢，你下边又运行到这局代码，他又把他设置到这个位置了，又把他设置到最底下这个位置了，所以说这里怎么办呢？这里要做法了，非常简单，两种做法，要么就让他弹 出来这里结束，这个函数就不要再运行了啊，运行到这就够了，下面就不要运行了。第二个，第二种做法呢，你把服装设置为零，因为他后边就是根据服装的时候来设置他吗？对吧？你设置为零就行了，那后边就设置为零了，两种做法都可以好看一下，现在二三四。 好，你看是不是回到第一个了？哎，那么现在又又出问题了，那么下一个他为什，那么为什么到第一个他没有往继续往后滚动呢？你看他又回到底部了，为什么呢？是因为科因这个是这个值啊，你没有把，你没有把他归零， 你没有把他归零的话，你就会导致他的值不断的增加，不断的增加，不断的增加，这样的话很恐怖的值，那么因为他的值就影响到了这个值，对吧？这个值就是我们最终的目标值，所以说就会出问题，因此呢，我们在滚动到最后一项的时候，不仅要把他归零，还要把这个科二应该是归零。 好，大家看 四五，你看回到地下了，然后看音，这个时候就从零开始就不断的增加，好，懂这个意思吧？好，那么这里呢，这个效果就做完了啊，最后呢我们把这个 overflow hatter 给他加上， 好，那么就实现了这么一个滚动播放公告的这么一个效果。这个效果本身其实你说他他多重要呢？也不是多重要，也可能以后你们开在公司里边做开发，可能又遇不到这个效果，你，可能，也可能你，你们一辈子都遇不到，但是我们希望的是通过这个效果去训练大家的解决问题的能力啊，这个需要长时间训练的。

今天来学一个网页的入场动画效果，使用归宿和动画平台来开发。先来分享这个动画效果的构成，首先是文字依次出现，然后是一个划坏的动画，最后是一个 导航区域跟中间标题文字的一个显示动画效果。我们先来分一下 htm 结构，分为三块，一个是导航区域，介绍区域已经划坏了这个三个结构，再来看一下距离，接着代码先声明一个他们那的一个时间轴，然后使用吐的方法改变这个文字的一个歪轴的位置。重来 配合是打开这个方法，从实现这个文字椅子出现的一个动画效果，那划坏根因处的这个区域是直接是改变这一个歪住的位置，从而实现这一个划坏的动画效果。 那最后是这一个导航区域跟中间的标题文字显示，直接改变他们的透明度，就会实现这一个网页的入场动画效果。快来关注我吧，每天一分钟实现一个酷炫的动画效果。

都是单身男女，大妈都认得是个可爱的人。 you get my drivers up。

随着互联网产品对设计审美要求的提升啊，很多产品的页面开始加入一些有质感，有趣、有创意，甚至可以交互的这种动画细节。 那这期视频呢，我想给大家介绍两种适合快速开发实现这些动画的方式，老体跟 raf， 我想你们中的很多人呢，其实应该对老体已经不陌生了，这是一个由 lbnb 设计团队开发的开源工具。看看人家的设计团队啊，设计师也是懂开发的，而且不是一般的厉害。 那老铁的主要功能呢，就是将这个 after effect 制作的动画转成 jason 文件数据，然后通过他们提供的代码工具呢，开发人员就可以在产品代码项目中实现这个动画效果了。 无论在安卓 ios 应用开发，还是在网页网站的代码执行环境呢， loti 都能非常好的支持哇，最近呢， loti 也推出了一种新的数据格式，叫 dot lolti， 这种格式呢，使得相同的动画效果的数据量可以比 jason 格式减少近六倍。同时他们也正在推出一些在线的编辑动画的工具。这样啊，我们就不一定要使用这个 after effect 这样的重型软件，可以直接通过在线的这个编辑工具呢，也能完成很多动画效果的制作了。 那说完 lotty 呢，我们来聊一下这个 rife， 它和 lulty 最大的区别在于啊， rife 它天生就带有交互性。 那老铁产出的这个动画一般就是一个完整的播放效果，而我们代码能做的事情呢，大多数时候就是播放这个动画效果。那 rap 则不同， 他有一个在线的编辑器，可以编辑动画效果并添加交互的行为。因此他导出的这个动画数据啊，其实是可以实现很多这种与交互相关的动画逻辑的， 甚至还可以支持通过代码去更自由的控制这个动画的交互效果。如果你浏览 ref 官网呢，你会发现趣味性和创意性的交互动画是这个工具发力的重点。比如他的这个小按钮啊，你可以跟他进行一些有趣的互动啊，非常有意思。 arrive 支持所有主流的这种代码执行环境，不论你是开发网站呢，还是移动端的应用啊，他都能轻松应对。所以这两个工具啊，你会选择用哪个呢？