基於Vue3怎麼實現圖片散落效果?以下這篇文章為大家介紹一下使用Vue3實現圖片散落效果的方法,希望對大家有幫助!
今天又是美好的摸魚一天,剛剛進入職場,覺得一切都很新鮮,導師給的任務也不多(要是每天都是這樣就好了),於是開始有薪學習。 (學習影片分享:vuejs教學)
沒事在網路上亂逛的時候,偶然間看到一個動畫效果不錯,就決定上手做一些,簡單的說就是一個完整的圖片,在一段時間之後回突然破裂開來,覺得很有意思,就新建了一個資料夾。
一下午的摸魚時光,間公司熙熙攘攘,我在其中卻格格不入(太閒了),不知多少人投來質疑的眼光(這傢伙不工作嗎),但我只沉浸在我的程式碼裡。終於勉強完成了一個不怎麼醜的版本。
圖片破裂效果說白了就是搞了100個div,每個div都有自己的背景圖片,透過backgroundPosition屬性來控制每個div的背景圖片方位,最後拼在一起,就像一張完整的圖片一樣,給每個div都加上動畫效果,每個div的旋轉角度不同,移動距離不同,移動方位不同來讓整個圖片像玻璃一樣散開。
這裡用到了兩個div,#break是用作為100個div的容器,#InBox是用來綁定下一張的背景圖片
rrreee<div id="animateBox" v-show="showImg"> <div id="break"></div> <div id="InBox"></div> </div>
透過createElement建立200個div,每個div綁定長寬,為div添加背景圖片,使用backgroundPosition來讓整個div變得像一張圖片,給div綁定動畫效果。
import bgImg5 from '../../assets/img/1/y手把手教你使用Vue3實現圖片散落效果' import bgImg4 from '../../assets/img/1/y手把手教你使用Vue3實現圖片散落效果' import bgImg3 from '../../assets/img/1/y3.png' import bgImg2 from '../../assets/img/1/y4.png' import bgImg6 from '../../assets/img/1/y5.png' import { ref, onMounted, onUnmounted } from 'vue' let index = 0 onMounted(() => { let imageSrcArr = [bgImg2, bgImg3, bgImg4, bgImg5, bgImg6] let imgloadPromiseArr: Array<Promise<HTMLImageElement>> = [] let imageArr: Array<string> = [] for (let i = 0; i < imageSrcArr.length; i++) { imgloadPromiseArr[i] = new Promise((resolve, reject) => { let img = new Image() img.src = imageSrcArr[i] img.onload = () => { resolve(img) } }) } imgloadPromiseArr.forEach(item => { item.then(res => { imageArr.push(`url(${(<HTMLImageElement>res).currentSrc})`) index = imageArr.length }) }) })
透過zIndex來讓目前展示的div是哪一個
前面說過,InBox是展示的下一張圖片,在breakBox散落完成之後,讓breakBox的zIndex降低,展示下一張圖片,隨後帶有100個div的breakBox完成下一張圖片的渲染,zIndex提高,展示出來
for (let i = 0; i < 100; i++) { let div = document.createElement('div') let div1 = document.createElement('div') div.style.width = '76px' div.style.height = '41px' // 这里为什么是41px后面会提到 div1.style.width = '76px' div1.style.height = '40px' div1.style.overflow = 'hidden' div.style.boxSizing = 'border-box' div.style.backgroundImage = imageArr[0] let positionX = -(i % 10) * 76 + 'px' let positionY = -Math.floor(i / 10) * 40 + 'px' div.style.backgroundPosition = positionX + ' ' + positionY div.style.backgroundSize = '760px 400px' let style = document.styleSheets[0] style.insertRule(`@keyframes secondrotate${i} { 0%,30%{ transform:scale(1) } 70% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} 100% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} }`) style.insertRule(`@keyframes secondrotateS${i} { 0%,32%{ transform:scale(1);opacity:1; }70% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} 100% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} }`) div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite` div.style.animation = `secondrotate${i} 4.5s ease-out infinite` div.style.transformOrigin = `center center` div1.appendChild(div) dom.appendChild(div1) }
每次動畫完成之後會去調上面這個方法,為了能在div碎片破碎完畢,展示下一張圖片,使用定時器將該方法進行延遲處理4s是因為div碎片在4s後完全消失。 (動畫在運行70%的時候,透明度為0)
let count = 0 let repeat = true let breakBox: HTMLDivElement = document.querySelector('#break')! let InBox: HTMLDivElement = document.querySelector('#InBox')! function changeImage(InBox: HTMLDivElement) { if (repeat) { breakBox.style.zIndex = '-10' count++ count = count === index ? 0 : count repeat = false setTimeout(() => { repeat = true breakBox.style.zIndex = '100' let currentImageLength = count === index - 1 ? 0 : count + 1 InBox.style.backgroundImage = imageArr[currentImageLength] }, 1000) } }
在100個div展示之後會出現這樣的線,在經過多次嘗試之後,找到了方法,將div的高度變大,div1設定overflow:hidden; 線回消失
const timer1 = ref<number>() const timer2 = ref<number>() for (let i = 0; i < 100; i++) { let div = document.createElement('div') let div1 = document.createElement('div') div.style.width = '76px' div.style.height = '41px' div1.style.width = '76px' div1.style.height = '40px' div1.style.overflow = 'hidden' div.style.boxSizing = 'border-box' div.style.backgroundImage = imageArr[0] let positionX = -(i % 10) * 76 + 'px' let positionY = -Math.floor(i / 10) * 40 + 'px' div.style.backgroundPosition = positionX + ' ' + positionY div.style.backgroundSize = '760px 400px' let style = document.styleSheets[0] style.insertRule(`@keyframes secondrotate${i} { 0%,30%{ transform:scale(1) } 70% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} 100% {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${180 + Math.random() * 720}deg)} }`) style.insertRule(`@keyframes secondrotateS${i} { 0%,32%{ transform:scale(1);opacity:1; }70% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} 100% {transform: translateZ(${300 + Math.random() * 1500}px) translate(${(0.5 - Math.random()) * 500}px,${ (0.5 - Math.random()) * 500 }px);opacity:0} }`) div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite` div.style.animation = `secondrotate${i} 4.5s ease-out infinite` div.style.transformOrigin = `center center` div.addEventListener('animationstart', () => { timer1.value = setTimeout(() => { changeImage(InBox) div.style.backgroundImage = imageArr[count] }, 4000) }) div.addEventListener('animationiteration', () => { timer2.value = setTimeout(() => { changeImage(InBox) div.style.backgroundImage = imageArr[count] }, 4000) }) div1.appendChild(div) dom.appendChild(div1) }
以上是手把手教你使用Vue3實現圖片散落效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!