用动画美化Vue3的图片加载效果

前端

2023-10-24 14:15:34

使用Vue3动画提升图片加载体验

渐变效果：创造柔和过渡

在之前的文章中，我们介绍了使用渐变效果美化图片加载的技巧，为图片加载过程增添了平滑过渡。

高斯模糊：营造朦胧美感

现在，让我们深入探索两种新的动画效果：高斯模糊和缩放动画。

高斯模糊效果为图片加载增添了朦胧的美感。当图片逐渐加载时，模糊效果会逐渐消失，让图片清晰地呈现在用户眼前。

代码示例：

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const src = 'path/to/image.jpg'
    const isLoaded = ref(false)

    onMounted(() => {
      const image = document.querySelector('img')
      image.style.filter = 'blur(10px)'

      image.addEventListener('load', () => {
        isLoaded.value = true
        image.style.filter = 'none'
      })
    })

    return {
      src,
      isLoaded
    }
  }
}

缩放动画：增添动感

缩放动画为图片加载过程增添了动感。当图片逐渐加载时，它会从一个小点逐渐放大，直到充满整个容器。这种效果可以很好地吸引用户注意力，让图片加载过程更加引人入胜。

代码示例：

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const src = 'path/to/image.jpg'
    const isLoaded = ref(false)

    onMounted(() => {
      const image = document.querySelector('img')
      image.style.transform = 'scale(0)'

      image.addEventListener('load', () => {
        isLoaded.value = true
        image.style.transform = 'scale(1)'
      })
    })

    return {
      src,
      isLoaded
    }
  }
}