使用Vue3和p5.js實現(xiàn)交互式圖像動畫

更新時間：2024年06月18日 08:40:42 作者：ScriptEcho

這篇文章主要介紹了如何用Vue3和p5.js打造一個交互式圖像動畫,文中給出了詳細的代碼示例,本代碼適用于需要在網(wǎng)頁中實現(xiàn)圖像滑動效果的場景,例如圖片瀏覽、相冊展示等,感興趣的小伙伴跟著小編一起來看看吧

實現(xiàn)效果

項目地址：傳送門

使用 p5.js 實現(xiàn)圖像滑動效果

應(yīng)用場景

本代碼適用于需要在網(wǎng)頁中實現(xiàn)圖像滑動效果的場景，例如圖片瀏覽、相冊展示等。

基本功能

該代碼使用 p5.js 庫實現(xiàn)圖像滑動效果。它加載一張圖像，并允許用戶通過鼠標移動圖像。圖像將以半透明的形式顯示在原始圖像后面，營造出滑動效果。

功能實現(xiàn)步驟及關(guān)鍵代碼分析

加載 p5.js 庫：

let jsUrls = ['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)))

這段代碼使用 loadJavascript 函數(shù)加載 p5.js 庫。
創(chuàng)建畫布：

s.setup = () => {
  img = s.loadImage(
    'https://img0.baidu.com/it/u=2323576877,54719139&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=400',
  )
  s.createCanvas(720, 400)
}

這段代碼在 setup 函數(shù)中創(chuàng)建了一個 720x400 像素的畫布，并加載了一張圖像。
實現(xiàn)滑動效果：

s.draw = () => {
  s.image(img, 0, 0) // 完全不透明
  let dx = s.mouseX - img.width / 2 - offset
  offset += dx * easing
  s.tint(255, 127) // 半透明
  s.image(img, offset, 0)
}

在 draw 函數(shù)中，代碼執(zhí)行以下步驟：
- 以完全不透明的形式繪制原始圖像。
- 計算鼠標相對于圖像中心的位置差。
- 將位置差乘以一個緩動系數(shù)，以平滑滑動效果。
- 將原始圖像以半透明的形式繪制在偏移位置。
使用 p5.js 繪圖 API： 這段代碼使用 p5.js 庫提供的 loadImage()、createCanvas()、image() 和 tint() 函數(shù)來繪制圖像和實現(xiàn)滑動效果。