用js动画实现随机拼图

时间 2021-01-18 标签 js动画实例拼图

01 - javascript的小实例（随机拼图动画效果）

实现的效果

当刷新网页时，在一个div盒子里,由100个小div盒子随机飞入组成一张完整的图片；

用到的知识点有

1.css

positon的相对定位（relative）和绝对定位（absolute）；
background属性；

2.js

动态获取标签和静态获取标签

静态获取标签的方法只有三种：

1.let div = document.getElementById(" ")

2.let div1 = document.querySelector(" ")

3.let div2 = document.querySelectorAll(" ")

静态获取标签就是获取一次之后，之后就不会刷新标签里的内容了；而动态获取标签的内容就是会动态的去获取标签，并且实时刷新。

Math API

Math.trunc() //就是去除一个数的小数部分。
详情请点击

代码展示

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>fan-js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 50px auto;
            width: 500px;
            height: 500px;
            background: #f9f9f9;
            border: 1px solid #c9c6c6;

        }

        .box>div {
            position: absolute;
            width: 50px;
            height: 50px;
            box-sizing: border-box;


        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
    </div>
    <script src="/js/animation.js"></script>
    <script>
        let arr = []
        let index = 0;
        let box = document.getElementsByClassName('box')[0]
        let child = box.getElementsByTagName("div")
        console.log(child)
        for (let i = 0; i < 100; i++) {
            arr.push(i)
        }
        /* 然后打乱数组中存储盒子的顺序，从而实现随机的效果； 这里我们使用数组中的API sort方法； */

        arr.sort((a, b) => Math.random() - 0.5)

        function fn() {
            let data = arr[index++]
            if (data === undefined) return
            console.log(data)
            let top = Math.trunc(data / 10) * 50;
            let left = data % 10 * 50

            let div = `<div style="background:url('/img/ld.jpg') 
                 ${-left}px ${-top}px;
                 background-size:500px;"></div>`
            box.innerHTML += div;
            let len = child.length
            
            animation(child[len - 1], {
                data: {
                    top,
                    left
                }
            }, 100, fn)

        }
        fn()
    </script>
</body>

</html>

代码详解及思路

先写一个宽高为500px的大盒子，然后给它设置css样式，然后先给小盒子预设一个css样式；小盒子默认是在大盒子的左上角，然后我们通过设置每一个小盒子的定位（left，top），让它回到原本属于它的位置。接下来再让小盒子每次出现的顺序不一样，从而就实现了随机的效果！

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>fan-js</title>
  <style> *{margin:0;padding:0;} .box{ position: relative; margin: 50px auto; width: 500px; height: 500px; background: #f9f9f9; border: 1px solid #c9c6c6; } .box>div{ position: absolute; width: 50px; height: 50px; } </style>
</head>
<body>
 	<div class="box"></div>
</body>

关于animation.js动画插件和详解

//先引入一个js动画的插件（一个大佬写的）
<script src="/js/animation.js"></script>

因为我们要实现的效果是由100个小盒子随机飞入组成一张完整的照片，所以我们用js去生成它们，不然用手一个一个的写，可能会累死…

<script>
	/* 我们应该声明一个数组，来有序的存储这些盒子， 因为每个小盒子所表现的都是照片的不同位置， 所以不能重复，也不能缺。 */
	//动态获取大盒子box
	let box = document.getElementsByClassName('box')[0]
	//动态获取大盒子box里的小盒子
    let child = box.getElementsByTagName("div")
	let arr = [] //这里的 let 是es6的东西
	let index = 0
	for (let i = 0; i < 100; i++) {
            arr.push(i)
     }
     // 此时数组中就有了一百个元素，而且每个元素的下标就是元素的内容
    /* 然后打乱数组中存储盒子的顺序，从而实现随机的效果； 这里我们使用数组中的API sort方法； */

    arr.sort((a,b)=>Math.random()-0.5)
    console.log(arr)  
    
    //然后我们写一个fn方法来实现添加小盒子的工作 
    function fn(){
    	
    	//用一个data变量将小盒子的序号获取出来
    	let data = arr[index] 
    	if(data === undefined)return
    	/* 在一个500px*500px的大盒子里面能装10行10列的50px*50px的小盒子 然后小盒子的下标从0~99; 所以 第1行的小盒子的下标就是从0~9 第2行的小盒子的下标就是从10~19 第3行的小盒子的下标就是从20~39 …… 第10行的小盒子的下标就是从90~99 再然后，我们发现 第1个小盒子(下标为0)的top:0px;left:0px; 第2个小盒子(下标为1)的top:0px;left:50px; …… 第11个小盒子(下标为10)的top:50px;left:0px; 第12个小盒子(下标为11)的top:50px;left:50px; 由此，我们得出每个盒子的 top值为他们下标的十位乘50px; left值为他们下标的个位乘50px; 即下标为11的盒子 top = Math.trunc(11/10) * 50px left = 11%10 * 50 */
	//Math.trunc是es6的新方法，就是把一个数取整
    	let top = Math.trunc(data / 10) * 50
    	let left = data % 10 * 50
    	let div = `<div style="background:url('想拼成的图片地址') ${-left}px ${-top}px;background-size:500px;"></div>`
		//然后把生成的小盒子，通过innerHTML方法添加到大盒子box中
		box.innerHTML += div
		/* 接下来使用animation.js插件给每个小盒子 对应的top和left来实现飘入的效果 animation()里面一共有四个参数 第一个是要实现动画的对象， 第二个是，对象里面包含一个对象属性，即data这个对象 然后里面的设置top和left属性 第三个是设置动画的时间以毫秒为单位(ms) 第四个是一个回调函数，当动画执行完之后， 再执行的东西,在这里即指再调用fn函数 */
        animation(child[len-1],{
              data:{
                  top,
                  left
              }
         },100,fn)		
    }
    fn()
    /* 然后在函数外面调用函数，在函数 内部就会一直重复调用，但是我们只有一百个小盒子， 所以只需调用一百次，当超过这个值时，data取到的值就是undefined 为了阻止这种情况，我们需在函数内部加一个判断条件 if(data === undefined) return */
</script>