雨アニメーションの作成方法は？

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

投稿者にクレジット。