PIXI js水滴动画在每个涟漪事件上都会加速

Question

第一次使用PixiJS并希望为我的网页创建一个背景，用户可以点击它，点击的中心会出现一个水波，从那里开始同心展开。

它在第一次点击时完美地工作；共同中心扩张；动画速度加快了，所以通过点击5，它真的很快。

我找不到如何保持同样的速度。此外，请注意，由于波纹从页面中消失，代码运行的迭代次数超过了需要的次数。感谢您的帮助！

这是我的代码(抱歉太长了(：

HTML/刀片模板：

<div
id="water-ripples"
class="relative bg-cover h-vhscreen flex flex-col justify-center py-12 sm:px-6 lg:px-8"
style="background-image: url({{ env('AWS_STATIC_BUCKET_URL') . '/images/water.jpg' }});"
>
@yield('content')
</div>

Javascript：

import * as PIXI from 'pixi.js'
window.moment = require('moment');
/**
* Set up last code to run when page assembled
*/
let app = null
let stage = null
let renderer = null
let ripples = []
let sprite = null
$(document).ready(function() {
app = new PIXI.Application({
antialias: true,
transparent: true,
resolution: 1,
})
// setup ticker
let ticker = new PIXI.Ticker();
ticker.add(() => {
renderer.render(stage);
}, PIXI.UPDATE_PRIORITY.LOW);
ticker.start();
renderer = app.renderer
renderer.autoResize = true
renderer.view.style.position = "fixed";
renderer.view.style.top = 0;
renderer.view.style.left = 0;
renderer.view.style.zIndex = 1;
renderer.view.style.display = "block";
renderer.autoResize = true
renderer.resize(window.innerWidth, window.innerHeight);
ripples = [];
stage = app.stage;
stage.interactive = true
document.getElementById('water-ripples').appendChild(app.renderer.view)
// load assets
let resources = {
waterRippleImage: aws_static_bucket_url + '/images/water.jpg',
waterRippleMap: aws_static_bucket_url + '/images/water_map.png',
};
Object.keys(resources).forEach(k => {
app.loader.add(k, resources[k])
})
app.loader.load(setup);
ticker.add(function(delta) {
for(var i = 0; i < ripples.length; i++) {
ripples[i].update();
}
});
});
function setup() {
// background
let bg = new PIXI.Sprite(app.loader.resources.waterRippleImage.texture);
bg.anchor.set(0.5);
bg.scale.set(0.9);
bg.position.set(renderer.view.width / 2, renderer.view.height / 2);
stage.addChild(bg);
// add new ripple each time mouse is clicked
renderer.view.addEventListener('mousedown', ev => {
ripples.push(new Ripple(ev.clientX, ev.clientY));
stage.filters = ripples.map(function(f) { return f.filter; });
}, false);
// add new ripple each time screen is touched
renderer.view.addEventListener('touchstart', ev => {
ripples.push(new Ripple(ev.clientX, ev.clientY));
stage.filters = ripples.map(function(f) { return f.filter; });
}, false);
window.addEventListener('resize', () => {
app.renderer.resize(window.innerWidth, window.innerHeight);
bg.position.set(renderer.view.width / 2, renderer.view.height / 2);
})
window.addEventListener('focus', () => {
// Clear Out Old Ripples
ripples = ripples.filter(r => {
return (moment.now() - 1000) < r.startTime
})
})
window.addEventListener('blur', () => {
// Clear Out Old Ripples
ripples = ripples.filter(r => {
return (moment.now() - 1000) < r.startTime
})
})
}
function Ripple(x, y) {
// sprite
sprite = new PIXI.Sprite(app.loader.resources.waterRippleMap.texture);
sprite.anchor.set(0.5);
sprite.position.set(x, y);
sprite.scale.set(0.1);
stage.addChild(sprite);
// filter
this.filter = new PIXI.filters.DisplacementFilter(sprite);
this.startTime = moment.now()
}
Ripple.prototype.update = function() {
sprite.scale.x += 0.025;
sprite.scale.y += 0.025;
}

Answer 1

我认为Ripple类中的精灵是问题所在。它应该分配给this.sprite，而不是全局变量sprite。实际上，当你在波纹上迭代时，你将把比例增加N倍，其中N是波纹的数量。