Javascript 形状中的动画粒子（canvas+；kineticjs）

我使用KineticJS在形状内执行波动

我现在会在我的波中插入同样在移动的粒子

目前我正在做这件事：（）

window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
//波函数
var w=205；
var h=100；
var osc1=新的osc（），
osc2=新的osc（），
osc3=新的osc（），
地平线=h*0.5；
计数=40，
步骤=数学单元（带计数），
缓冲区=新阵列缓冲区（计数*4），
点=新的浮点数组（缓冲区）；
osc1.max=20；
osc2.max=20；
osc2.1速度=0.015；
函数fill（）{
对于（变量i=0；i=2.0）{
a=0；
max=getMax（）；
}
返回max*Math.sin（a*Math.PI）；
};
函数getMax（）{
返回Math.random（）*me.max*me.variation+
me.max*（1-me.variation）；
}
归还这个；
}
函数混合器（）{
var d=arguments.length，
i=d，
总和=0；
如果（d<1）返回0；
而（i--）sum+=参数[i].getAmp（）；
返回和/日+期限；
}
//端波函数
//粒子函数
var-inWave=[]；
var particlesInWave=15；
var-cw=200；
var-ch=200；
函数createParticlesInWave（）{
对于（var i=0；icw）
inWave[i].x=0；
if（inWave[i].x<0）
inWave[i].x=cw；
if（inWave[i].y<0）
inWave[i].y=ch；
开关（inWave[i].oSwitch）{
大小写正确：
inWave[i].不透明度+=0.01；
如果（inWave[i]。不透明度>=1）
inWave[i].oSwitch=false；
打破
案例错误：
inWave[i].不透明度-=0.01；
if（inWave[i].不透明度0&&inWave[i]！=NaN | |！inWave[i]）
{
ctx.beginPath（）；
ctx.fillStyle='蓝色'；
ctx.弧（tp.x，tp.y，tp.radius，0，Math.PI*2，false）；
ctx.fill（）；
ctx.closePath（）；
}
ctx.restore（）；
}
}
//端粒子函数
var阶段=新的动力学阶段({
容器：“myCanvas”，
宽度：200，
身高：200
});
var layer=新的动能层（）；
var ctx=layer.getContext（）；
阶段。添加（层）；
var rect=新的动能.rect({
身高：200，
宽度：200，
笔画：“4679BD”，
填写：“fff”，
冲程宽度：3，
});
var波=新的动力学形状({
drawFunc:函数（上下文）{
clip（）；
context.beginPath（）；
moveTo（0，点[0]）；
对于（i=1；i

如何使粒子只在波中移动

---

非常感谢您的帮助：）

要做到这一点，您必须测试气泡上升时是否接触到水

        if (y < 50 + points[0 | (x / step)]) thisPart.y = ch;

if（y<50+点[0 |（x/步）]）此部分。y=ch；

函数updateParticlesInWave（）{
var thisPart=null；
对于（var i=0；icw）该部分x=0；
否则，如果（x<0）该部分x=cw；
如果（y<0）该部分y=ch；
如果（此部分为oSwitch）{
该部分不透明度+=0.01；
如果（thisPart.opacity>=1）thisPart.oSwitch=false；
}否则{
该部分不透明度-=0.01；
如果（thisPart.opacity这对你没什么帮助，但这太酷了！我刚刚发现了这个库！非常感谢你，它太棒了！因为我的动画有点滞后，我想有一个动画KineticJS和另一个requestAnimFrame是有点问题的，你觉得怎么样？我想把所有的东西都放在我的动画KineticJS中，但无法打开我的粒子…在我的设置中，我指定的粒子我希望它们是白色的，但它们是黑色的，你知道它可以从哪里来吗？再次感谢你的帮助！感谢你的建议：）我设法将我的粒子放入一个层中，并更改它们的颜色。为了性能，我
        if (y < 50 + points[0 | (x / step)]) thisPart.y = ch;

function updateParticlesInWave() {
    var thisPart = null;
    for (var i = 0; i < inWave.length - 1; i++) {
        thisPart = inWave[i];
        thisPart.x -= thisPart.vx;
        thisPart.y += thisPart.vy;

        var x = thisPart.x,
            y = thisPart.y;

        if (y < 50 + points[0 | (x / step)]) thisPart.y = ch;

        if (x > cw) thisPart.x = 0;
        else if (x < 0) thisPart.x = cw;
        if (y < 0) thisPart.y = ch;

        if (thisPart.oSwitch) {
            thisPart.opacity += 0.01;
            if (thisPart.opacity >= 1) thisPart.oSwitch = false;
        } else {
            thisPart.opacity -= 0.01;
            if (thisPart.opacity <= 0) thisPart.oSwitch = true;
        }
    }
}