如何通过使用 p5 滚动使两个图像淡入淡出？

Question

var f
var w

function setup() {
  imageMode(CENTER);
  createCanvas(848, 480);
  wall = loadImage('image/background.png')
  feng = loadImage('image/feng.png')
  wei = loadImage('image/wei.png')
  f = 255
  w = 0
}

function draw() {
  background(0);
  image(wall, 424, 240);
  image(feng, 240, 240);
  image(wei, 668, 240)
}

我刚刚开始使用 Javascript，尽管我对此一无所知。
请帮忙。

Answer 1

如果您的意思是图像之间的淡入淡出（例如，一个图像淡入而另一个图像淡出），您可以使用map()scrollX位置例如来控制一个图像的透明度并计算另一个图像的透明度作为反值。

您可以通过从其最大值中减去来计算逆。

您可以使用tint()来控制 p5.js 中的透明度

让我们分解一下：

1. 将 scrollY 从它的范围(0, windowHeight)到您可以用于透明度的值，例如(0, 255) ： let fadeIn = map(scrollX, 0, windowWidth, 0, 255) （基于您的纵横比我假设在 X 轴上滚动，但您可以使用scrollY应用相同的逻辑）
2. 计算逆（淡出值）： let fadeOut = 255 - fadeIn
3. 使用tint()进行淡入淡出：您可以在这里看到一个简单的淡入淡出示例。

这是基于您的代码的基本交叉淡入淡出示例：

 var f var w var feng; var wei; function preload(){ feng = loadImage("https://images.pexels.com/photos/20790/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=848"); wei = loadImage("https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=848"); } function setup() { imageMode(CENTER); createCanvas(848, 480); f = 255 w = 0 } function draw() { // compute fadeIn(f) by mapping scrollX f = map(scrollX, 0, windowWidth, 0, 255); // compute fadeOut(w) as inverse w = 255 - f; background(0); // use fade in / out values to tint tint(255, f); image(feng, 240, 240); tint(255, w); image(wei, 668, 240) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

记得在 p5.js 中使用preload()加载资源（图像/声音/字体/等）