备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2017-11-08 1220
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

效果图：

180752274.png


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< RelativeLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     xmlns:tools = "http://schemas.android.com/tools"
     android:layout_width = "match_parent"
     android:layout_height = "match_parent"
     >
     < com.zhf.android_ripple.AnimationFrameLayout
         android:id = "@+id/search_animation_wf_main"
         android:layout_width = "fill_parent"
         android:layout_height = "fill_parent"  >
     </ com.zhf.android_ripple.AnimationFrameLayout >
     < Button
         android:id = "@+id/button1"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:layout_alignParentRight = "true"
         android:text = "开启波纹动画"  />
</ RelativeLayout >


AnimationFrameLayout类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
package  com.zhf.android_ripple;
import  java.lang.ref.SoftReference;
import  android.content.Context;
import  android.graphics.Bitmap;
import  android.graphics.BitmapFactory;
import  android.util.AttributeSet;
import  android.util.Log;
import  android.view.LayoutInflater;
import  android.view.View;
import  android.view.animation.AccelerateDecelerateInterpolator;
import  android.view.animation.AlphaAnimation;
import  android.view.animation.Animation;
import  android.view.animation.Animation.AnimationListener;
import  android.view.animation.AnimationSet;
import  android.view.animation.ScaleAnimation;
import  android.widget.FrameLayout;
import  android.widget.ImageView;
public  class  AnimationFrameLayout  extends  FrameLayout {
     private  SoftReference<Bitmap> m_bitmapRipple; //波纹图片 （软引用）
     private  ImageView[] m_imageVRadars;  //ImageView数组
                                                                                                                              
     public  AnimationFrameLayout(Context context) {
         super (context);
         init();
     }
     public  AnimationFrameLayout(Context context, AttributeSet attrs,
             int  defStyle) {
         super (context, attrs, defStyle);
         init();
     }
     public  AnimationFrameLayout(Context context, AttributeSet attrs) {
         super (context, attrs);
         init();
     }
     /**初始化**/
     private  void  init() {
         loadRadarBitmap();
         m_imageVRadars =  new  ImageView[ 3 ];
         View v = LayoutInflater.from(getContext()).inflate(R.layout.wt_search_device_anima,  this );
         m_imageVRadars[ 0 ] = (ImageView) v.findViewById(R.id.radar_ray_1);
         m_imageVRadars[ 1 ] = (ImageView) v.findViewById(R.id.radar_ray_2);
         m_imageVRadars[ 2 ] = (ImageView) v.findViewById(R.id.radar_ray_3);
     }
     /**加载图片**/
     private  void  loadRadarBitmap() {
         try  {
             //获取波纹图片
             m_bitmapRipple =  new  SoftReference<Bitmap>(BitmapFactory.decodeStream(getContext().getResources()
                             .openRawResource(R.drawable.wifi_body_ripple)));
         }  catch  (Exception localException) {
             Log.e( "WTSearchAnimationFrameLayout" ,
                     Log.getStackTraceString(localException));
         }  catch  (OutOfMemoryError localOutOfMemoryError) {
             Log.e( "WTSearchAnimationFrameLayout" ,
                     Log.getStackTraceString(localOutOfMemoryError));
             System.gc();   //回收
         }
     }
                                                                                                                              
     /**重置，停止动画**/
     public  void  stopAnimation() {
         for  ( int   i=  0 ;  i< m_imageVRadars.length; ++i) {
             if (m_bitmapRipple !=  null ){
                 Bitmap localBitmap = m_bitmapRipple.get();  //软引用获取对象
                 if (localBitmap !=  null  && !localBitmap.isRecycled()) {
                     //回收图片资源
                     localBitmap.recycle();
                 }
                 m_bitmapRipple =  null ;
                 ImageView localImageView = m_imageVRadars[i];
                 localImageView.setImageBitmap( null );  //设置ImageView为空
                 localImageView.setVisibility(View.GONE);
                 localImageView.clearAnimation();  //取消动画
             }
         }
     }
                                                                                                                              
     /**开始动画**/
     public  void  startAnimation() {
         if (m_bitmapRipple ==  null ) {
             loadRadarBitmap();
         }
         for  ( int  i =  0 ; i < m_imageVRadars.length; i++) {
             ImageView localImageView;
             long  ltime;
             while ( true ) {
                 localImageView = m_imageVRadars[i];
                 localImageView.setImageBitmap(m_bitmapRipple.get());   //获取图片
                 localImageView.setVisibility(View.VISIBLE);
                 //放大
                 ltime= 333L * i;
                 if (localImageView.getAnimation() ==  null ) {
                     break ;
                 }
                 localImageView.getAnimation().start();
             }
                                                                                                                                      
             ScaleAnimation localScaleAnimation =  new  ScaleAnimation( 1 .0f,  14 .0f, 1 .0f, 14 .0f, 1 , 0 .5f, 1 , 0 .5f);
             localScaleAnimation.setRepeatCount(- 1 );  //动画重复
             AlphaAnimation localAlphaAnimation =  new  AlphaAnimation( 1 .0f,  0 .2f);
             AnimationSet localAnimationSet =  new  AnimationSet( true );   //true:使用相同的加速器
                                                                                                                                      
             localAnimationSet.addAnimation(localScaleAnimation);
             localAnimationSet.addAnimation(localAlphaAnimation);   //将两种动画效果添加进去
             //设置相关属性
             localAnimationSet.setDuration(1000L);   //持续时间
             localAnimationSet.setFillEnabled( true );
             localAnimationSet.setFillBefore( true );   //控件保持在动画开始之前
             localAnimationSet.setStartOffset(ltime);    //动画效果推迟ltime秒钟后启动
             localAnimationSet.setInterpolator( new  AccelerateDecelerateInterpolator());
             localAnimationSet.setAnimationListener( new  MySearchAnimationHandler( this ,localImageView));  //绑定监听器
             //将动画集合设置进去
             localImageView.setAnimation(localAnimationSet);
             localImageView.startAnimation(localAnimationSet); //开启动画
         }
     }
     /**动画监听类**/
     public  class  MySearchAnimationHandler  implements  AnimationListener{
         private  ImageView m_imageVRadar;
                                                                                                                                  
         public  MySearchAnimationHandler(AnimationFrameLayout paramImageView,ImageView m_imageVRadar) {
             super ();
             this .m_imageVRadar = m_imageVRadar;
         }
         @Override
         public  void  onAnimationStart(Animation animation) {
             // TODO Auto-generated method stub
         }
         @Override
         public  void  onAnimationEnd(Animation animation) {
             this .m_imageVRadar.setVisibility(View.GONE);
         }
         @Override
         public  void  onAnimationRepeat(Animation animation) {
             animation.setStartOffset(0L);
         }
     }
}

重要说明：

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

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


动画布局  wt_search_device_anima.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<? xml  version = "1.0"  encoding = "utf-8" ?>
< RelativeLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     android:layout_width = "fill_parent"
     android:layout_height = "fill_parent"  >
     < ImageView
         android:id = "@+id/radar_ray_1"
         android:layout_width = "70.0dip"
         android:layout_height = "70.0dip"
         android:layout_alignParentRight = "true"
         android:layout_alignParentTop = "true"
         android:layout_marginLeft = "10.0dip"  />
     < ImageView
         android:id = "@+id/radar_ray_2"
         android:layout_width = "70.0dip"
         android:layout_height = "70.0dip"
         android:layout_alignParentRight = "true"
         android:layout_alignParentTop = "true"
         android:layout_marginLeft = "10.0dip"  />
     < ImageView
         android:id = "@+id/radar_ray_3"
         android:layout_width = "70.0dip"
         android:layout_height = "70.0dip"
         android:layout_alignParentRight = "true"
         android:layout_alignParentTop = "true"
         android:layout_marginLeft = "10.0dip"  />
</ RelativeLayout >

程序主入口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package  com.zhf.android_ripple;
import  android.os.Bundle;
import  android.app.Activity;
import  android.view.View;
import  android.view.View.OnClickListener;
import  android.widget.Button;
public  class  MainActivity  extends  Activity {
                                                                   
     public  Button m_btn1;
     AnimationFrameLayout afl;  //动画布局
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
                                                                       
         afl = ((Animat ionFrameLayout) findViewById(R.id.search_animation_wf_main)); // 搜索时的动画
         m_btn1 = (Button) findViewById(R.id.button1);
         m_btn1.setOnClickListener( new  OnClickListener() {
             @Override
             public  void  onClick(View v) {
                 afl.startAnimation();
             }
         });
     }
                                                                   
     @Override
     protected  void  onDestroy() {
         // TODO Auto-generated method stub
         super .onDestroy();
         afl.stopAnimation();
     }
}


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






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





文章标签：
Android开发
移动开发
关键词：
Android移动开发
技术小胖子
目录
相关文章
游客3u52v363zu2bg
|
XML 移动开发 ARouter
为什么说Flutter让移动开发变得更好？Android篇
为什么说Flutter让移动开发变得更好？Android篇
游客3u52v363zu2bg
157 0
为什么说Flutter让移动开发变得更好？Android篇
游客3u52v363zu2bg
|
Web App开发 移动开发 前端开发
Android面试：为什么说Flutter让移动开发变得更好？全套教学资料
Android面试：为什么说Flutter让移动开发变得更好？全套教学资料
游客3u52v363zu2bg
278 0
Android进阶开发
|
设计模式 XML 监控
移动开发整体凉凉的背景下，究竟还剩哪些 Android开发热门前沿知识
mvvm mvc mvp 插件化 进程保活 热修复
Android进阶开发
1746 0
技术小胖子
|
移动开发 Android开发
【移动开发】Android中的底部菜单框架（Fragment）
技术小胖子
1345 0
技术小胖子
|
移动开发 编解码 Android开发
【移动开发】Android相机、相册获取图片显示并保存到SD卡
技术小胖子
1866 0
技术小胖子
|
XML 移动开发 Android开发
【移动开发】Android中Theme和Style的使用
技术小胖子
1130 0
技术小胖子
|
移动开发 Android开发
【移动开发】Android应用程序中实用的代码框架（一）
技术小胖子
974 0
技术小胖子
|
XML 移动开发 Android开发
【移动开发】Android中的底部菜单框架（Fragment）
技术小胖子
2224 0
技术小胖子
|
移动开发 缓存 Android开发
【移动开发】Android图片异步加载之Android-Universal-Image-Loader使用
技术小胖子
1112 0
科技小能手
|
移动开发 Android开发
关于android移动开发
科技小能手
1248 0

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    mPaaS常见问题之Android集成dexPatch热修复运行时候无法正常进行热更新如何解决
  • 4
    Android 面试题及答案整理，最新面试题
  • 5
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 6
    构建高效Android应用：Kotlin协程的实践与优化
  • 7
    构建高效Android应用：探究Kotlin协程的优势
  • 8
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 9
    安卓安全性指南：保护用户数据免受恶意攻击
  • 10
    mPaaS常见问题之pixel4 android 13 调用移动网关 报这个错如何解决
  • 1
    构建高效的Android应用：从内存优化到电池寿命
    10
  • 2
    构建高效Android应用：探究Kotlin与Java的性能差异
    13
  • 3
    构建高效的Android应用：从内存优化到电池寿命
    18
  • 4
    应用研发平台EMAS常见问题之安卓push的离线转通知目前无法收到如何解决
    25
  • 5
    构建高效Android应用：Kotlin协程的实践指南
    15
  • 6
    构建高效Android应用：Kotlin与协程的完美融合
    27
  • 7
    构建高效Android应用：探究Kotlin与Java的性能差异
    26
  • 8
    【Android平板编程】远程Ubuntu服务器code-server编程写代码
    45
  • 9
    构建高效Android应用：探究Kotlin与Java的性能差异
    27
  • 10
    android 使用GSON 序列化对象出现字段被优化问题解决方案
    16

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    阿里云oss简介和使用流程