如何製作雨水動畫？

Question

我想創建一個雨水動畫。爲此，我使用了一種將雨滴圖像從上到下移動的翻譯動畫。但我希望這是連續的，這意味着動畫應該重演。

我正在使用處理程序的概念，並給予相應的延遲，但它仍然沒有給我完美，我正在尋找和應用程序變得非常沉重，因爲多線程執行。

有沒有其他辦法呢？

Answer 1

使用此：

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

Answer 2

試試這個

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

Answer 3

您需要用於原生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); 

致作者。