【移动开发】Android波纹动画效果实现

今天我实现一个wifi当中搜索时的动画效果，通常我们会使用多张图片进行Frame动画播放，这里我使用了Tween动画,仅对一张图片进行操作，实现了wifi扫描动画效果，有兴趣的可以看看！

效果图：

<a target="_blank" href="http://blog.51cto.com/attachment/201312/180752274.png"></a>

这里我们采用了自定义布局的方式 activity_main.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<code>&lt;</code><code>RelativeLayout</code> <code>xmlns:android</code><code>=</code><code>"http://schemas.android.com/apk/res/android"</code>

<code>    </code><code>xmlns:tools</code><code>=</code><code>"http://schemas.android.com/tools"</code>

<code>    </code><code>android:layout_width</code><code>=</code><code>"match_parent"</code>

<code>    </code><code>android:layout_height</code><code>=</code><code>"match_parent"</code>

<code>    </code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>com.zhf.android_ripple.AnimationFrameLayout</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/search_animation_wf_main"</code>

<code>        </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>        </code><code>android:layout_height</code><code>=</code><code>"fill_parent"</code> <code>&gt;</code>

<code>    </code><code>&lt;/</code><code>com.zhf.android_ripple.AnimationFrameLayout</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>Button</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/button1"</code>

<code>        </code><code>android:layout_width</code><code>=</code><code>"wrap_content"</code>

<code>        </code><code>android:layout_height</code><code>=</code><code>"wrap_content"</code>

<code>        </code><code>android:layout_alignParentRight</code><code>=</code><code>"true"</code>

<code>        </code><code>android:text</code><code>=</code><code>"开启波纹动画"</code> <code>/&gt;</code>

<code>&lt;/</code><code>RelativeLayout</code><code>&gt;</code>

AnimationFrameLayout类：

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<code>package</code> <code>com.zhf.android_ripple;</code>

<code>import</code> <code>java.lang.ref.SoftReference;</code>

<code>import</code> <code>android.content.Context;</code>

<code>import</code> <code>android.graphics.Bitmap;</code>

<code>import</code> <code>android.graphics.BitmapFactory;</code>

<code>import</code> <code>android.util.AttributeSet;</code>

<code>import</code> <code>android.util.Log;</code>

<code>import</code> <code>android.view.LayoutInflater;</code>

<code>import</code> <code>android.view.View;</code>

<code>import</code> <code>android.view.animation.AccelerateDecelerateInterpolator;</code>

<code>import</code> <code>android.view.animation.AlphaAnimation;</code>

<code>import</code> <code>android.view.animation.Animation;</code>

<code>import</code> <code>android.view.animation.Animation.AnimationListener;</code>

<code>import</code> <code>android.view.animation.AnimationSet;</code>

<code>import</code> <code>android.view.animation.ScaleAnimation;</code>

<code>import</code> <code>android.widget.FrameLayout;</code>

<code>import</code> <code>android.widget.ImageView;</code>

<code>public</code> <code>class</code> <code>AnimationFrameLayout </code><code>extends</code> <code>FrameLayout {</code>

<code>    </code><code>private</code> <code>SoftReference&lt;Bitmap&gt; m_bitmapRipple;</code><code>//波纹图片 （软引用）</code>

<code>    </code><code>private</code> <code>ImageView[] m_imageVRadars; </code><code>//ImageView数组</code>

<code>                                                                                                                             </code> 

<code>    </code><code>public</code> <code>AnimationFrameLayout(Context context) {</code>

<code>        </code><code>super</code><code>(context);</code>

<code>        </code><code>init();</code>

<code>    </code><code>}</code>

<code>    </code><code>public</code> <code>AnimationFrameLayout(Context context, AttributeSet attrs,</code>

<code>            </code><code>int</code> <code>defStyle) {</code>

<code>        </code><code>super</code><code>(context, attrs, defStyle);</code>

<code>    </code><code>public</code> <code>AnimationFrameLayout(Context context, AttributeSet attrs) {</code>

<code>        </code><code>super</code><code>(context, attrs);</code>

<code>    </code><code>/**初始化**/</code>

<code>    </code><code>private</code> <code>void</code> <code>init() {</code>

<code>        </code><code>loadRadarBitmap();</code>

<code>        </code><code>m_imageVRadars = </code><code>new</code> <code>ImageView[</code><code>3</code><code>];</code>

<code>        </code><code>View v = LayoutInflater.from(getContext()).inflate(R.layout.wt_search_device_anima, </code><code>this</code><code>);</code>

<code>        </code><code>m_imageVRadars[</code><code>0</code><code>] = (ImageView) v.findViewById(R.id.radar_ray_1);</code>

<code>        </code><code>m_imageVRadars[</code><code>1</code><code>] = (ImageView) v.findViewById(R.id.radar_ray_2);</code>

<code>        </code><code>m_imageVRadars[</code><code>2</code><code>] = (ImageView) v.findViewById(R.id.radar_ray_3);</code>

<code>    </code><code>/**加载图片**/</code>

<code>    </code><code>private</code> <code>void</code> <code>loadRadarBitmap() {</code>

<code>        </code><code>try</code> <code>{</code>

<code>            </code><code>//获取波纹图片</code>

<code>            </code><code>m_bitmapRipple = </code><code>new</code> <code>SoftReference&lt;Bitmap&gt;(BitmapFactory.decodeStream(getContext().getResources()</code>

<code>                            </code><code>.openRawResource(R.drawable.wifi_body_ripple)));</code>

<code>        </code><code>} </code><code>catch</code> <code>(Exception localException) {</code>

<code>            </code><code>Log.e(</code><code>"WTSearchAnimationFrameLayout"</code><code>,</code>

<code>                    </code><code>Log.getStackTraceString(localException));</code>

<code>        </code><code>} </code><code>catch</code> <code>(OutOfMemoryError localOutOfMemoryError) {</code>

<code>                    </code><code>Log.getStackTraceString(localOutOfMemoryError));</code>

<code>            </code><code>System.gc();  </code><code>//回收</code>

<code>        </code><code>}</code>

<code>    </code><code>/**重置，停止动画**/</code>

<code>    </code><code>public</code> <code>void</code> <code>stopAnimation() {</code>

<code>        </code><code>for</code> <code>(</code><code>int</code>  <code>i= </code><code>0</code><code>;  i&lt; m_imageVRadars.length; ++i) {</code>

<code>            </code><code>if</code><code>(m_bitmapRipple != </code><code>null</code><code>){</code>

<code>                </code><code>Bitmap localBitmap = m_bitmapRipple.get(); </code><code>//软引用获取对象</code>

<code>                </code><code>if</code><code>(localBitmap != </code><code>null</code> <code>&amp;&amp; !localBitmap.isRecycled()) {</code>

<code>                    </code><code>//回收图片资源</code>

<code>                    </code><code>localBitmap.recycle();</code>

<code>                </code><code>}</code>

<code>                </code><code>m_bitmapRipple = </code><code>null</code><code>;</code>

<code>                </code><code>ImageView localImageView = m_imageVRadars[i];</code>

<code>                </code><code>localImageView.setImageBitmap(</code><code>null</code><code>); </code><code>//设置ImageView为空</code>

<code>                </code><code>localImageView.setVisibility(View.GONE);</code>

<code>                </code><code>localImageView.clearAnimation(); </code><code>//取消动画</code>

<code>            </code><code>}</code>

<code>    </code><code>/**开始动画**/</code>

<code>    </code><code>public</code> <code>void</code> <code>startAnimation() {</code>

<code>        </code><code>if</code><code>(m_bitmapRipple == </code><code>null</code><code>) {</code>

<code>            </code><code>loadRadarBitmap();</code>

<code>        </code><code>for</code> <code>(</code><code>int</code> <code>i = </code><code>0</code><code>; i &lt; m_imageVRadars.length; i++) {</code>

<code>            </code><code>ImageView localImageView;</code>

<code>            </code><code>long</code> <code>ltime;</code>

<code>            </code><code>while</code><code>(</code><code>true</code><code>) {</code>

<code>                </code><code>localImageView = m_imageVRadars[i];</code>

<code>                </code><code>localImageView.setImageBitmap(m_bitmapRipple.get());  </code><code>//获取图片</code>

<code>                </code><code>localImageView.setVisibility(View.VISIBLE);</code>

<code>                </code><code>//放大</code>

<code>                </code><code>ltime= 333L * i;</code>

<code>                </code><code>if</code><code>(localImageView.getAnimation() == </code><code>null</code><code>) {</code>

<code>                    </code><code>break</code><code>;</code>

<code>                </code><code>localImageView.getAnimation().start();</code>

<code>                                                                                                                                     </code> 

<code>            </code><code>ScaleAnimation localScaleAnimation = </code><code>new</code> <code>ScaleAnimation(</code><code>1</code><code>.0f, </code><code>14</code><code>.0f,</code><code>1</code><code>.0f,</code><code>14</code><code>.0f,</code><code>1</code><code>,</code><code>0</code><code>.5f,</code><code>1</code><code>,</code><code>0</code><code>.5f);</code>

<code>            </code><code>localScaleAnimation.setRepeatCount(-</code><code>1</code><code>); </code><code>//动画重复</code>

<code>            </code><code>AlphaAnimation localAlphaAnimation = </code><code>new</code> <code>AlphaAnimation(</code><code>1</code><code>.0f, </code><code>0</code><code>.2f);</code>

<code>            </code><code>AnimationSet localAnimationSet = </code><code>new</code> <code>AnimationSet(</code><code>true</code><code>);  </code><code>//true:使用相同的加速器</code>

<code>            </code><code>localAnimationSet.addAnimation(localScaleAnimation);</code>

<code>            </code><code>localAnimationSet.addAnimation(localAlphaAnimation);  </code><code>//将两种动画效果添加进去</code>

<code>            </code><code>//设置相关属性</code>

<code>            </code><code>localAnimationSet.setDuration(1000L);  </code><code>//持续时间</code>

<code>            </code><code>localAnimationSet.setFillEnabled(</code><code>true</code><code>);</code>

<code>            </code><code>localAnimationSet.setFillBefore(</code><code>true</code><code>);  </code><code>//控件保持在动画开始之前</code>

<code>            </code><code>localAnimationSet.setStartOffset(ltime);   </code><code>//动画效果推迟ltime秒钟后启动</code>

<code>            </code><code>localAnimationSet.setInterpolator(</code><code>new</code> <code>AccelerateDecelerateInterpolator());</code>

<code>            </code><code>localAnimationSet.setAnimationListener(</code><code>new</code> <code>MySearchAnimationHandler(</code><code>this</code><code>,localImageView)); </code><code>//绑定监听器</code>

<code>            </code><code>//将动画集合设置进去</code>

<code>            </code><code>localImageView.setAnimation(localAnimationSet);</code>

<code>            </code><code>localImageView.startAnimation(localAnimationSet);</code><code>//开启动画</code>

<code>    </code><code>/**动画监听类**/</code>

<code>    </code><code>public</code> <code>class</code> <code>MySearchAnimationHandler </code><code>implements</code> <code>AnimationListener{</code>

<code>        </code><code>private</code> <code>ImageView m_imageVRadar;</code>

<code>                                                                                                                                 </code> 

<code>        </code><code>public</code> <code>MySearchAnimationHandler(AnimationFrameLayout paramImageView,ImageView m_imageVRadar) {</code>

<code>            </code><code>super</code><code>();</code>

<code>            </code><code>this</code><code>.m_imageVRadar = m_imageVRadar;</code>

<code>        </code><code>@Override</code>

<code>        </code><code>public</code> <code>void</code> <code>onAnimationStart(Animation animation) {</code>

<code>            </code><code>// TODO Auto-generated method stub</code>

<code>        </code><code>public</code> <code>void</code> <code>onAnimationEnd(Animation animation) {</code>

<code>            </code><code>this</code><code>.m_imageVRadar.setVisibility(View.GONE);</code>

<code>        </code><code>public</code> <code>void</code> <code>onAnimationRepeat(Animation animation) {</code>

<code>            </code><code>animation.setStartOffset(0L);</code>

<code>}</code>

重要说明：

1.该类中我们对图片的操作使用软引用，目的是防止OOM.

2.至于动画，使用ImageView[]来依次加载图片，通过更改对每个ImageView实现缩放和透明动画

动画布局  wt_search_device_anima.xml

<code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"utf-8"</code><code>?&gt;</code>

<code>    </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>    </code><code>android:layout_height</code><code>=</code><code>"fill_parent"</code> <code>&gt;</code>

<code>    </code><code>&lt;</code><code>ImageView</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/radar_ray_1"</code>

<code>        </code><code>android:layout_width</code><code>=</code><code>"70.0dip"</code>

<code>        </code><code>android:layout_height</code><code>=</code><code>"70.0dip"</code>

<code>        </code><code>android:layout_alignParentTop</code><code>=</code><code>"true"</code>

<code>        </code><code>android:layout_marginLeft</code><code>=</code><code>"10.0dip"</code> <code>/&gt;</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/radar_ray_2"</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/radar_ray_3"</code>

程序主入口：

<code>import</code> <code>android.os.Bundle;</code>

<code>import</code> <code>android.app.Activity;</code>

<code>import</code> <code>android.view.View.OnClickListener;</code>

<code>import</code> <code>android.widget.Button;</code>

<code>public</code> <code>class</code> <code>MainActivity </code><code>extends</code> <code>Activity {</code>

<code>                                                                  </code> 

<code>    </code><code>public</code> <code>Button m_btn1;</code>

<code>    </code><code>AnimationFrameLayout afl; </code><code>//动画布局</code>

<code>    </code><code>@Override</code>

<code>    </code><code>protected</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) {</code>

<code>        </code><code>super</code><code>.onCreate(savedInstanceState);</code>

<code>        </code><code>setContentView(R.layout.activity_main);</code>

<code>                                                                      </code> 

<code>        </code><code>afl = ((AnimationFrameLayout) findViewById(R.id.search_animation_wf_main));</code><code>// 搜索时的动画</code>

<code>        </code><code>m_btn1 = (Button) findViewById(R.id.button1);</code>

<code>        </code><code>m_btn1.setOnClickListener(</code><code>new</code> <code>OnClickListener() {</code>

<code>            </code><code>@Override</code>

<code>            </code><code>public</code> <code>void</code> <code>onClick(View v) {</code>

<code>                </code><code>afl.startAnimation();</code>

<code>        </code><code>});</code>

<code>    </code><code>protected</code> <code>void</code> <code>onDestroy() {</code>

<code>        </code><code>// TODO Auto-generated method stub</code>

<code>        </code><code>super</code><code>.onDestroy();</code>

<code>        </code><code>afl.stopAnimation();</code>

ok! 源码已添加！试试效果吧！

<b>     本文转自zhf651555765 51CTO博客，原文链接：http://blog.51cto.com/smallwoniu/1334425</b><b>，如需转载请自行联系原作者</b>