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.iomariojankovicpenpojjNae?editors=0111。

Answer 1

我才刚开始看Pixi，但我认为你想使用位移过滤器的比例属性。 这个值说的是要移位多远。将这个值减为0会使其效果减弱到没有。

https:/pixijs.downloaddevdocsPIXI.filters.DisplacementFilter.html。 https:/pixijs.downloaddevdocsPIXI.filters.DisplacementFilter.html#scale。

它的工作方式是使用位移图的值来查找正确的像素来输出。这意味着从技术上讲，它并没有移动原图。相反，它从输出开始，询问 "原图的哪个像素在这里"。例如，如果一个位移图像素的红色=1，滤镜比例为20，这个滤镜将输出原图右边大约20个像素的像素。

https:/codepen.ioPAEzpenBaoREwv

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