所见即所得，实现一个有趣的动画效果

xuxueli 发布于2019-08-21 17:04 / 2149人阅读

摘要：每一个方格就是数组的一个个体。收工完成效果因为我实在是不想找那么多图片，大概只拷贝了十份，然后乘以，所以会出现一个头像重复三次的情况源码。

我看到了什么

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

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

该怎么做

先分析下小方块的结构，就是：

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

[
  "                 ",
  "  xxxx  xx  xxx  ",
  "  x    x  x  x   ",
  "  xxxx x  x  x   ",
  "  x    x  x  x   ",
  "  xxxx  xx  xxx  ",
  "                 ",
]

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

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

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

const faceList = (new Array(126)).map(() => {
  const face = document.createElement("span");
  //...
  return face;
});
document.body.append(faceList);

我们打开网页：

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

const arr = (new Array(10)).map...

打住，正确的姿势是这样的：

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

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

const faceList = Array.from({ length: 126 }, () => {
  const face = document.createElement("span");
  const img = document.createElement("img");
  const i = document.createElement("i");
  i.style.left = "-100%";
  face.append(img);
  face.append(i);
  return face;
});

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

let EOITextArr = 
[
  "                 ",
  "  xxxx  xx  xxx  ",
  "  x    x  x  x   ",
  "  xxxx x  x  x   ",
  "  x    x  x  x   ",
  "  xxxx  xx  xxx  ",
  "                 ",
];
let EOIArr = [];
EOITextArr.forEach((v, i) => {
  for(let j = 1; j < v.length; j++) {
    if (v[j] === "x") {
      EOIArr.push(i * 18 + j);
    }
  }
})

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

const textArr = [].concat(EOIArr);
const imgArr = [].concat(EOIArr);

处理逻辑

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

const colorTimer = setInterval(() => {
  const length = textArr.length;
  const showNumber = textArr.splice(Math.random() * length, 1);
  spanEles[showNumber].style.backgroundColor = "#F40";
  iEles[showNumber].style.left = "100%";
  if (!textArr.length) {
    clearInterval(colorTimer);
    showImg();
  }
}, 25);

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

const showImg = () => {
  const imgTimer = setInterval(() => {
    const length = imgArr.length;
    const [showNumber] = imgArr.splice(Math.random() * length, 1);
    const [imgIndex] = imgSrc.splice(Math.random() * imgSrc.length, 1);
    
    imgEles[showNumber].src = imgList[imgIndex];
    imgEles[showNumber].style.display = "inline";
    spanEles[showNumber].style.backgroundColor = "#fff";
    iEles[showNumber].style.left = "-100%";

    if (!imgArr.length) {
      spanEles[showNumber].classList.add("you");
      clearInterval(imgTimer);
    }
  }, 25);
}

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

收工

完成效果

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

私有云混合云所见即所得一个有趣的Ajax js实现f11的效果浮动效果动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89085.html

所见即所得，实现一个有趣的动画效果

摘要：每一个方格就是数组的一个个体。收工完成效果因为我实在是不想找那么多图片，大概只拷贝了十份，然后乘以，所以会出现一个头像重复三次的情况源码。我看到了什么在看淘宝前端团队的博客的时候，无意中点进了关于我们这个页面，其中有个动画我觉得很有趣，也很通用，感觉在哪里都可以使用一样，效果如下图所示：showImg(https://segmentfault.com/img/bVWwzI?w=32...

fyber 2019-08-01 17:47 评论0 收藏0
这款神秘的移动端OCR引擎，如何做到“所见即所得”？

摘要：针对移动端开发和优化了一套基于深度学习的文字检测和文字行识别算法框架，结合的网络压缩和加速能力，检测和识别模型可以压缩到数百级别，在中端及以上手机上达到实时最高，可结合扫一扫的模式在视频流中做到所见即所得。 showImg(https://segmentfault.com/img/remote/1460000018750109); 阿里妹导读：随着深度学习，尤其是CNN和RNN等技术的...

X1nFLY 2019-06-26 20:02 评论0 收藏0
这款神秘的移动端OCR引擎，如何做到“所见即所得”？

摘要：针对移动端开发和优化了一套基于深度学习的文字检测和文字行识别算法框架，结合的网络压缩和加速能力，检测和识别模型可以压缩到数百级别，在中端及以上手机上达到实时最高，可结合扫一扫的模式在视频流中做到所见即所得。 showImg(https://segmentfault.com/img/remote/1460000018750109); 阿里妹导读：随着深度学习，尤其是CNN和RNN等技术的...

dreamans 2019-06-26 20:02 评论0 收藏0
前端UI组件复用工具

摘要：代码复用总是程序员喜闻乐见的，前端组件化的最终目的就是复用，今天我们就将深入探讨如何实现组件的复用。懒是第一生产力。代码复用总是程序员喜闻乐见的，前端组件化的最终目的就是复用，今天我们就将深入探讨如何实现UI组件的复用。通常我们所说的组件往往是包含业务逻辑的前端组件，而这类组件实际上很难实现广义上的复用，顶多能在同一条业务线上复用一下，但UI组件就不一样了，没有了业务的约束，只在...

xuxueli 2019-08-20 17:31 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0