如何使用p5实现滚动时两张图片淡入淡出的交互效果

修改逻辑 #

• 新增preload()函数统一加载图片资源，避免图片未加载完成导致的渲染异常
• 利用p5内置的tint()函数设置图片透明度参数，实现淡入淡出效果
• 新增mouseWheel()事件监听函数，捕获滚轮操作动态调整两张图片的透明度
• 加入透明度边界限制和页面默认滚动阻止逻辑，优化使用体验

完整修改后代码 #

var f
var w
// 预加载图片资源，保证渲染时图片已加载完成
function preload() {
  wall = loadImage('image/background.png')
  feng = loadImage('image/feng.png')
  wei = loadImage('image/wei.png')
}

function setup() {
  imageMode(CENTER);
  createCanvas(848, 480);
  f = 255
  w = 0
}

function draw() {
  background(0);
  // 背景图不需要调整透明度，直接绘制
  image(wall, 424, 240);
  // 设置feng图片的透明度后再绘制
  tint(255, f)
  image(feng, 240, 240);
  // 设置wei图片的透明度后再绘制
  tint(255, w)
  image(wei, 668, 240)
}

// 监听鼠标滚轮事件
function mouseWheel(event) {
  // 0.1为灵敏度系数，数值越大滚动时透明度变化速度越快
  f -= event.delta * 0.1
  w += event.delta * 0.1
  // 约束透明度在0（完全透明）到255（完全不透明）的有效区间内
  f = constrain(f, 0, 255)
  w = constrain(w, 0, 255)
  // 阻止页面默认滚动行为，避免操作时页面上下晃动
  return false
}

效果说明 #

运行代码后，向下滚动鼠标滚轮，feng图片会逐渐淡出、wei图片逐渐淡入；向上滚动鼠标滚轮则效果相反。
如果滚动方向和你预期的相反，把f -= event.delta * 0.1和w += event.delta * 0.1里的加减号互换即可。

内容的提问来源于stack exchange，提问作者user17331955