查看: 689|回复: 0

[DIV/CSS] 所见即所得,实现一个有趣的动画效果

发表于 2017-10-27 08:00:02
太阳http代理AD
我看到了什么

在看淘宝前端团队的博客的时候,无意中点进了关于我们这个页面,其中有个动画我觉得很有趣,也很通用,感觉在哪里都可以使用一样,效果如下图所示:


每次刷新的头像和‘You’的位置都是不同的,说实话,我觉得蛮有意思的,于是我自己尝试去实现了一下。
下面我会从我的角度去分析实现这样的效果,因为我不知道FED他们是怎么实现的

该怎么做

先分析下小方块的结构,就是:

  1. <span>
  2. <img />
  3. <i></i>
  4. </span>
复制代码

img是头像,span控制背景色,i用来制作镜面的效果。
我们知道了这样一个效果,本人近视,十米开外男女不分的那种,然后看这个布局看着好熟悉,我看到的这个结构大概是这种感觉

  1. [
  2. ' ',
  3. ' xxxx xx xxx ',
  4. ' x x x x ',
  5. ' xxxx x x x ',
  6. ' x x x x ',
  7. ' xxxx xx xxx ',
  8. ' ',
  9. ]
复制代码

哎嘿嘿,这个不就是是个字符串数组吗嘛,那我当作二维数组处理,岂不是可以轻易的找出要显示的字符的横坐标和纵坐标,岂不美哉。先别急着撸起袖子就是干,根据我长年不思考撸起袖子就是干被坑的经验,我想了一会,似乎用一围数组更好一点,dom方面的处理也更加方便一些。每一个方格就是数组的一个个体。
想到这,我掐指一算我大概需要126个方格,方格呈7 * 18的布局方式,我又掐指一算我好像要写126的span标签,就像下面这样:
万能的编辑器,我后来发现原来可以span*126+tab,机智如我,美滋滋。


啊?你问我上面的span是怎么弄的,我靠,我当然是手慢慢敲的的啊


呃,感觉还是用js来生成更好些吧,方便,代码量也少很多,好,我们撸起袖子就是干:

  1. const faceList = (new Array(126)).map(() => {
  2. const face = document.createElement("span");
  3. //...
  4. return face;
  5. });
  6. document.body.append(faceList);
复制代码

我们打开网页:

这是个什么玩意?
好吧,不开玩喜了,我们举个例子吧,现在我想创建一个长度为十,数组成员都是相应下标的数组,应该怎么办?

  1. const arr = (new Array(10)).map...
复制代码

打住,正确的姿势是这样的:

  1. Array.from({length: 10}, (v, i) => i);//第一种
  2. Array.apply(null, { length: 10 }).map(//...);//第二种
  3. //欢迎补充更多
复制代码

当然你还可以使用递归的方式,我本人来说,一直使用第一种,感觉比较好用,我们重新实现下:

  1. const faceList = Array.from({ length: 126 }, () => {
  2. const face = document.createElement("span");
  3. const img = document.createElement("img");
  4. const i = document.createElement("i");
  5. i.style.left = '-100%';
  6. face.append(img);
  7. face.append(i);
  8. return face;
  9. });
复制代码

将dom渲染到页面,紧接着是找出我们要渲染字符的位置了:

  1. let EOITextArr =
  2. [
  3. ' ',
  4. ' xxxx xx xxx ',
  5. ' x x x x ',
  6. ' xxxx x x x ',
  7. ' x x x x ',
  8. ' xxxx xx xxx ',
  9. ' ',
  10. ];
  11. let EOIArr = [];
  12. EOITextArr.forEach((v, i) => {
  13. for(let j = 1; j < v.length; j++) {
  14. if (v[j] === 'x') {
  15. EOIArr.push(i * 18 + j);
  16. }
  17. }
  18. })
复制代码

不要忘了,我们有图片和span两种需要做处理的元素,所以我们需要两组数组,浅复制就好了:

  1. const textArr = [].concat(EOIArr);
  2. const imgArr = [].concat(EOIArr);
复制代码
处理逻辑

这样我们初期的准备工作已经完成,我们拿到了dom,还有需要处理的元素的位置,下面就是处理背景色和图片如何显示。我们分别拿到了要改变的span的数组和img的数组,我们只需要先改变背景色后控制图片的显示就好了。过程肯定是需要通过定时器来控制的,而且显示的地方位置是随机的,也就是我们也需要Math.random方法,我们通过不断的splice来获取数组的个体,也避免了会拿到重复的个体,代码如下:

  1. const colorTimer = setInterval(() => {
  2. const length = textArr.length;
  3. const showNumber = textArr.splice(Math.random() * length, 1);
  4. spanEles[showNumber].style.backgroundColor = '#F40';
  5. iEles[showNumber].style.left = '100%';
  6. if (!textArr.length) {
  7. clearInterval(colorTimer);
  8. showImg();
  9. }
  10. }, 25);
复制代码

当背景色全部改变完成以后,我们就需要启动图片的定时器,同理图片的src也是随机的:

  1. const showImg = () => {
  2. const imgTimer = setInterval(() => {
  3. const length = imgArr.length;
  4. const [showNumber] = imgArr.splice(Math.random() * length, 1);
  5. const [imgIndex] = imgSrc.splice(Math.random() * imgSrc.length, 1);
  6. imgEles[showNumber].src = imgList[imgIndex];
  7. imgEles[showNumber].style.display = 'inline';
  8. spanEles[showNumber].style.backgroundColor = '#fff';
  9. iEles[showNumber].style.left = '-100%';
  10. if (!imgArr.length) {
  11. spanEles[showNumber].classList.add('you');
  12. clearInterval(imgTimer);
  13. }
  14. }, 25);
  15. }
复制代码

当图片到最后一张的时候显示‘You’。

收工

完成效果

因为我实在是不想找那么多图片,大概只拷贝了十份,然后乘以3,所以会出现一个头像重复三次的情况,源码。一次小小的尝试,觉得挺有意思,感谢能看完的你~



太阳http代理AD
回复

使用道具 举报