Pixi.js v5 - 将 alpha 应用于置换贴图

Question

我正在单击缩放置换贴图，但希望该贴图在几乎达到全尺寸后逐渐消失。这个想法是过滤器应该在几秒钟后不存在。

const app = new PIXI.Application({
  view: document.querySelector("#canvas"),
  width: 512,
  height: 512
});

const logo   = PIXI.Sprite.fromImage("https://unsplash.it/600");
const displacement = PIXI.Sprite.fromImage("https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
const filter = new PIXI.filters.DisplacementFilter(displacement);

logo.anchor.set(0.5);
logo.position.set(256);
logo.interactive = true;

displacement.anchor.set(0.5);
displacement.position.set(256);
displacement.scale.set(0.05)
displacement.alpha = 1

app.stage.filterArea = app.screen;
app.stage.filters = [filter];
app.stage.addChild(logo, displacement);

app.ticker.add(function() {
  displacement.scale.x += 0.05
  displacement.scale.y += 0.05
  if (displacement.scale.x > 10) app.ticker.stop()
});

logo.on('mousedown', function() {
  displacement.scale.set(0.05)
  app.ticker.start()
});

这是我目前的情况： https://codepen.io/mariojankovic/pen/pojjNae?editors=0111

Answer 1

我才刚刚开始研究 Pixi，但我认为您想使用位移过滤器的比例属性。这个值表示要移动多远。将此值减小为 0 会将其影响降低到 none。

https://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html
https://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html#scale

The way it works is it uses the values of the displacement map to look up the correct pixels to output. This means it's not technically moving the original. Instead, it's starting at the output and asking "which pixel from the original goes here". For example, if a displacement map pixel has red = 1 and the filter scale is 20, this filter will output the pixel approximately 20 pixels to the right of the original.

https://codepen.io/PAEz/pen/BaoREwv

const app = new PIXI.Application({
  view: document.querySelector("#canvas"),
  width: 512,
  height: 512
});

const logo = PIXI.Sprite.fromImage("https://unsplash.it/600");
const displacement = PIXI.Sprite.fromImage(
  "https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
);
const filter = new PIXI.filters.DisplacementFilter(displacement);

logo.anchor.set(0.5);
logo.position.set(256);
logo.interactive = true;

displacement.anchor.set(0.5);
displacement.position.set(256);
displacement.scale.set(0.0);
displacement.alpha = 1;

app.stage.filterArea = app.screen;
app.stage.filters = [filter];
app.stage.addChild(logo, displacement);

const displacementScaleFrom = 0.05;
const displacementScaleTo = 10 ;
const displacementStep = 0.05;

const filterScaleFrom = 20;// the default value for the filter is 20
const filterStep = filterScaleFrom / ((displacementScaleTo-displacementScaleFrom) / displacementStep);

app.ticker.add(function () {
  displacement.scale.x += displacementStep;
  displacement.scale.y += displacementStep;
  filter.scale.x -= filterStep;
  filter.scale.y -= filterStep;
  if (displacement.scale.x >= displacementScaleTo) {
    app.ticker.stop();
    filter.scale.x = 0;
    filter.scale.y = 0;
  }
});

logo.on("mousedown", function () {
  displacement.scale.set(displacementScaleFrom);
  filter.scale.x = filterScaleFrom;
  filter.scale.y = filterScaleFrom;
  app.ticker.start();
});

Pixi.js v5 - 将 alpha 应用于置换贴图

Pixi.js v5 - apply alpha to displacement map

pixi.js