Teach you step by step how to use Vue3 to achieve the image scattering effect

How to achieve image scattering effect based on Vue3? The following article will introduce to you how to use Vue3 to achieve the image scattering effect. I hope it will be helpful to you!

Today is another wonderful day of fishing. I have just entered the workplace. I feel that everything is new and the tasks given by the instructor are not many (it would be great if it was like this every day) ), so I started to study with pay. (Learning video sharing:vuejs tutorial)

What to do

When I was wandering around on the Internet, I accidentally saw an animation The effect was good, so I decided to start making some. To put it simply, it was a complete picture. After a while, it suddenly broke apart. I thought it was very interesting, so I created a new folder.

Something went wrong

After an afternoon of fishing, the company was bustling with people, but I felt out of place (too idle). I don’t know how many people looked at me with questioning eyes. (doesn't this guy work), but I'm just immersed in my code. Finally managed to finish a less ugly version.

Principle

To put it bluntly, the picture cracking effect is to create 100 divs, each div has its own background image. Use the backgroundPosition attribute to control the position of the background image of each div. Finally, put it together like a complete picture. Add animation effects to each div. Each div has a different rotation angle and different moving distance. Different orientations make the entire image spread out like glass.

HTML structure

Two divs are used here, #break is used as a container for 100 divs, #InBox is used to bind the background of the next one Picture

Prepare 5 pictures

import bgImg5 from '../../assets/img/1/yTeach you step by step how to use Vue3 to achieve the image scattering effect' import bgImg4 from '../../assets/img/1/yTeach you step by step how to use Vue3 to achieve the image scattering effect' 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> = [] let imageArr: Array = [] 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(${(res).currentSrc})`) index = imageArr.length }) }) })

Create div

Create 200 divs through createElement, and bind each div Set the length and width, add a background image to the div, use backgroundPosition to make the entire div look like a picture, and bind animation effects to the div.

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) }

Switch background image

Use zIndex to determine which div is currently displayed

As mentioned before, InBox is the next one displayed After the breakBox is scattered, the zIndex of the breakBox is lowered to display the next picture. Then the breakBox with 100 divs completes the rendering of the next picture. The zIndex is increased and displayed.

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) } }

Every After the animation is completed, the above method will be adjusted. In order to display the next picture after the div fragments are broken, a timer is used to delay the method for 4 seconds because the div fragments completely disappear after 4 seconds. (When the animation is running at 70%, the transparency is 0)

const timer1 = ref() const timer2 = ref() 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) }

There is a gap problem in divs

In 100 divs Such a line will appear after the display. After many attempts, I found a way to increase the height of the div and set overflow:hidden on div1; the line disappears

Code details

(Learning video sharing:web front-end development,Introduction to programming)

The above is the detailed content of Teach you step by step how to use Vue3 to achieve the image scattering effect. For more information, please follow other related articles on the PHP Chinese website!