如何制作雨动画？

Question

我想创建一个雨动画。为此，我正在使用翻译动画，将雨滴图像从上到下移动。但我希望这是连续的，这意味着动画应该重演。

我正在使用处理程序概念并相应地给出延迟，但仍然没有给出我正在寻找的完美，并且应用程序因为多线程执行而变得非常沉重。

有没有替代方案？

Answer 1

您需要一个适用于原生Android的粒子系统。我建议您使用https://github.com/plattysoft/Leonids

而不是自己编写

new ParticleSystem(RainActivity.this, 80, R.drawable.rain_drop, 10000)
    .setSpeedByComponentsRange(0f, 0f, 0.05f, 0.1f)
    .setAcceleration(0.00005f, 90)
    .emitWithGravity(findViewById(R.id.cloud), Gravity.BOTTOM, 8);

致作者的信用。

Answer 2

使用此：

TranslateAnimation t1 = new TranslateAnimation(context, attrs);
t1.setRepeatMode(Animation.RESTART);

Answer 3

试试这个

<强> CSS

html{height:100%;}
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);

overflow:hidden;}


.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}

<强>的javascript

// number of drops created.
var nbDrop = 858; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1600);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }

}
// Make it rain
createRain();

JsFiddle