快捷導(dǎo)航

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

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

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

實(shí)現(xiàn)效果

項(xiàng)目地址：傳送門

使用 p5.js 實(shí)現(xiàn)圖像滑動(dòng)效果

應(yīng)用場(chǎng)景

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

基本功能

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

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

加載 p5.js 庫(kù)：

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 庫(kù)。
創(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)建了一個(gè) 720x400 像素的畫布，并加載了一張圖像。
實(shí)現(xiàn)滑動(dòng)效果：

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í)行以下步驟：
- 以完全不透明的形式繪制原始圖像。
- 計(jì)算鼠標(biāo)相對(duì)于圖像中心的位置差。
- 將位置差乘以一個(gè)緩動(dòng)系數(shù)，以平滑滑動(dòng)效果。
- 將原始圖像以半透明的形式繪制在偏移位置。
使用 p5.js 繪圖 API： 這段代碼使用 p5.js 庫(kù)提供的 loadImage()、createCanvas()、image() 和 tint() 函數(shù)來繪制圖像和實(shí)現(xiàn)滑動(dòng)效果。