用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>