Vue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.-View.js-php.cn

Vue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.

青灯夜游

풀어 주다： 2022-04-27 10:57:19

앞으로

2516명이 탐색했습니다.

Vue3을 기반으로 이미지 산란 효과를 얻는 방법은 무엇입니까? 다음 글에서는 Vue3를 사용하여 이미지 산란 효과를 얻는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Vue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.

오늘도 낚시하기 참 좋은 날이네요, 직장에 막 들어와서 모든 게 새롭고 강사님이 주시는 과제도 많지 않은 것 같아요(매일 이렇다면 참 좋을 것 같아요) 그래서 돈을 받으며 공부를 시작했어요. (학습 영상 공유: vuejs 튜토리얼)

어떻게 해야 하나요?

인터넷에서 돌아다니다가 우연히 좋은 효과가 있는 애니메이션을 보고 만들어 보기로 했습니다. 완전한 애니메이션입니다. 시간이 지나면서 갑자기 사진이 깨져버렸습니다. 매우 흥미로웠기 때문에 새 폴더를 만들었습니다.

뭔가 잘못됐어요

오후 낚시를 했는데 회사가 사람으로 북적북적했는데 뭔가 으스스한 느낌이 들었습니다(너무 한가해서). 얼마나 많은 사람들이 의심스러운 시선을 보냈는지 모르겠습니다. 이 사람 일 안 하냐?), 하지만 난 그냥 내 코드에 푹 빠졌어요. 마침내 덜 추악한 버전을 완성했습니다.

Vue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.

원리

직접 말하면 그림 깨짐 효과는 100개의 div를 만드는 것입니다. 각 div의 배경 위치는 backgroundPosition 속성을 통해 제어됩니다. 완성된 그림처럼 각 div에 애니메이션 효과를 추가해 보세요. 각 div는 서로 다른 회전 각도, 서로 다른 이동 거리, 서로 다른 이동 방향을 가지고 있어 전체 그림이 유리처럼 펼쳐집니다.

HTML 구조

두 개의 div가 여기에 사용되었고, #break는 100개의 div에 대한 컨테이너로 사용되었으며, #InBox는 다음 배경 이미지를 바인딩하는 데 사용되었습니다.

<div id="animateBox" v-show="showImg">
        <div id="break"></div>
        <div id="InBox"></div>
</div>

로그인 후 복사

5개의 이미지 준비

import bgImg5 from &#39;../../assets/img/1/yVue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.&#39;
import bgImg4 from &#39;../../assets/img/1/yVue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요.&#39;
import bgImg3 from &#39;../../assets/img/1/y3.png&#39;
import bgImg2 from &#39;../../assets/img/1/y4.png&#39;
import bgImg6 from &#39;../../assets/img/1/y5.png&#39;
import { ref, onMounted, onUnmounted } from &#39;vue&#39;
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
    })
  })
  })

로그인 후 복사

Create div

createElement를 통해 200개의 div를 만들고, 각 div의 길이와 너비를 바인딩하고, div에 배경 이미지를 추가하고, backgroundPosition을 사용하여 전체 div를 그림처럼 보이게 만들고, 애니메이션 효과를 div에 바인딩합니다.

for (let i = 0; i < 100; i++) {
      let div = document.createElement(&#39;div&#39;)
      let div1 = document.createElement(&#39;div&#39;)
      div.style.width = &#39;76px&#39;
      div.style.height = &#39;41px&#39; // 这里为什么是41px后面会提到
      div1.style.width = &#39;76px&#39;
      div1.style.height = &#39;40px&#39;
      div1.style.overflow = &#39;hidden&#39;
      div.style.boxSizing = &#39;border-box&#39;
      div.style.backgroundImage = imageArr[0]
      let positionX = -(i % 10) * 76 + &#39;px&#39;
      let positionY = -Math.floor(i / 10) * 40 + &#39;px&#39;
      div.style.backgroundPosition = positionX + &#39; &#39; + positionY
      div.style.backgroundSize = &#39;760px 400px&#39;
      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)
}

로그인 후 복사

배경 이미지 전환

zIndex를 사용하여 현재 표시되는 div를 확인하세요

앞서 언급했듯이 InBox는 breakBox가 흩어진 후 표시되는 다음 그림이며, 다음 그림을 표시하기 위해 breakBox의 zIndex가 낮아집니다. , 그러면 100개의 div가 있는 breakBox가 다음 그림의 렌더링을 완료하고 zIndex가 증가하여 표시됩니다. 다음 그림에서는 div 조각이 4초 후에 완전히 사라지므로 타이머를 사용하여 메서드를 4초 동안 지연시킵니다. (애니메이션이 70%로 실행되면 투명도는 0입니다.)

 let count = 0
 let repeat = true
 let breakBox: HTMLDivElement = document.querySelector(&#39;#break&#39;)!
 let InBox: HTMLDivElement = document.querySelector(&#39;#InBox&#39;)!
  function changeImage(InBox: HTMLDivElement) {
    if (repeat) {
      breakBox.style.zIndex = &#39;-10&#39;
      count++
      count = count === index ? 0 : count
      repeat = false
      setTimeout(() => {
        repeat = true
        breakBox.style.zIndex = &#39;100&#39;
        let currentImageLength = count === index - 1 ? 0 : count + 1
        InBox.style.backgroundImage = imageArr[currentImageLength]
      }, 1000)
    }
  }

로그인 후 복사

divs에 gap 문제가 있습니다

Vue3을 사용하여 이미지 산란 효과를 얻는 방법을 단계별로 가르쳐주세요. divs 100개가 표시되면 이런 줄이 나타납니다. way, div의 높이를 높이고 div1에 Overflow:hidden을 설정하면 줄이 사라집니다