pixi.js - 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

标签： pixi.js

Answer 1

我才刚刚开始研究 Pixi，但我认为您想使用位移过滤器的 scale 属性。该值表示要移动多远。将此值减少到 0 将减少其影响。

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

它的工作方式是使用置换贴图的值来查找要输出的正确像素。这意味着它在技术上并没有移动原件。相反，它从输出开始并询问“原始像素中的哪个像素在此处”。例如，如果置换贴图像素的红色 = 1 且过滤器比例为 20，则此过滤器将输出原始右侧大约 20 个像素的像素。

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();
});