Android 仿电视关闭的退出效果

http://blog.csdn.net/wangjinyu501/article/details/14106703

http://blog.csdn.net/wangjinyu501/article/details/14106703

http://blog.csdn.net/wangjinyu501/article/details/14106703

http://blog.csdn.net/wangjinyu501/article/details/14106703

Android 仿电视关闭的退出效果

2013-11-03 19:13  2872人阅读  评论(9)  收藏  举报

  分类：

Android（142） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

    一、实现效果

    电视机退出效果想必有的同学已经看见过，现在的小米手机的锁屏效果也是这样的，还有优酷视频的退出效果。就是屏幕瞬间黑屏，然后快速像屏幕中间挤兑，形成一条白线直至消失。大体步骤如下：

    1.要求屏幕瞬间黑屏。

    2.黑色屏幕以匀加速或匀减速向中间挤压，直至一条白线后消失不见，整个过程大概200毫秒。

    3.露出黑漆漆一片的黑色背景。

    二、思路

    很容易想到用动画效果来做，本例子确实也是这样做的。如果你想自己动手继承一个View去写也没问题，但是既然已经有现成的api了，就不需要重复发明轮子了。首先，从布局说起，既然屏幕瞬间黑屏，那么可以想到是之前显示的view被隐藏或者被隐藏的view显示出来，很明显这里需要第二种方式，就是被隐藏的view显示出来。这里需要说明一下，说到隐藏view，现在建议使用ViewStup，一个延迟加载view的组件，可以很大程度地减少内存使用。

[html]  view plain copy

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <!-- 黑色背景的view-->  
7.     <ImageView  
8.         android:id="@+id/iv_bg"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent"  
11.         android:background="@android:color/black" />  
12.     <!-- 白色的向下的view -->  
13.     <ImageView  
14.         android:id="@+id/iv_off"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="fill_parent"  
17.         android:background="@android:color/white"  
18.         android:visibility="gone" />  
19.      
20. </FrameLayout>  

    等到退出程序的时候就加在这个布局，首先显示的是黑色的背景。然后设置下面的view为可见，并加上动画效果。再就是动画效果了，是先让白色背景显示出来，然后迅速缩小、改变透明度，最后消失。那么就可以这样来写： res/anim/tv_off.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:shareInterpolator="false"  
4.     android:zAdjustment="top" >  
5.   
6.     <!-- 电视机关闭动画效果，源码来自优酷视频客户端并加以修改 -->  
7.   
8.     <scale  
9.         android:duration="500"  
10.         android:fromXScale="1.0"  
11.         android:fromYScale="1.0"  
12.         android:interpolator="@android:anim/accelerate_interpolator"  
13.         android:pivotX="50.0%"  
14.         android:pivotY="50.0%"  
15.         android:toXScale="1.0"  
16.         android:toYScale="0.003" />  
17.       
18.     <scale  
19.         android:duration="500"  
20.         android:fromXScale="1.0"  
21.         android:fromYScale="1.0"  
22.         android:interpolator="@android:anim/accelerate_interpolator"  
23.         android:pivotX="50.0%"  
24.         android:pivotY="50.0%"  
25.         android:startOffset="200"  
26.         android:toXScale="0.0"  
27.         android:toYScale="0.3" />  
28.   
29.     <alpha  
30.         android:duration="1000"  
31.         android:fillAfter="true"  
32.         android:fillEnabled="true"  
33.         android:fromAlpha="1.0"  
34.         android:interpolator="@android:anim/accelerate_interpolator"  
35.         android:toAlpha="0.0" />  
36.   
37. </set>  

   动画引用到了加速器，下面是加速器文件的写法 ：res/interpolator/accelerate_quint.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>   
2. <accelerateInterpolator android:factor="2.5"   
3.   xmlns:android="http://schemas.android.com/apk/res/android" />   

    最后就是在activity中使用了，代码如下：

[html]  view plain copy

1. package com.example.youkutvdemo;  
2.   
3. import android.os.Bundle;  
4. import android.app.Activity;  
5. import android.view.Menu;  
6. import android.view.View;  
7. import android.view.animation.Animation;  
8. import android.view.animation.Animation.AnimationListener;  
9. import android.view.animation.AnimationUtils;  
10. import android.widget.ImageView;  
11.   
12. public class MainActivity extends Activity {  
13.   
14.     ImageView iv_bg;  
15.     ImageView iv_line;  
16.     Animation animFadein;  
17.     @Override  
18.     protected void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.activity_main);  
21.           
22.         iv_bg=(ImageView) this.findViewById(R.id.iv_bg);  
23.         iv_line=(ImageView) this.findViewById(R.id.iv_off);  
24.           
25.         // 加载动画  
26.         animFadein = AnimationUtils.loadAnimation(getApplicationContext(),  
27.                 R.anim.tv_off);  
28.         animFadein.setAnimationListener(new AnimationListener() {  
29.               
30.             @Override  
31.             public void onAnimationStart(Animation animation) {  
32.                 // TODO Auto-generated method stub  
33.                   
34.             }  
35.               
36.             @Override  
37.             public void onAnimationRepeat(Animation animation) {  
38.                 // TODO Auto-generated method stub  
39.                   
40.             }  
41.               
42.             @Override  
43.             public void onAnimationEnd(Animation animation) {  
44.                 // TODO Auto-generated method stub  
45.                 MainActivity.this.finish();  
46.             }  
47.         });  
48.          // 开始动画  
49.         iv_line.setVisibility(View.VISIBLE);  
50.         iv_line.startAnimation(animFadein);  
51.           
52.     }  
53.   
54.       
55.     @Override  
56.     public boolean onCreateOptionsMenu(Menu menu) {  
57.         // Inflate the menu; this adds items to the action bar if it is present.  
58.         getMenuInflater().inflate(R.menu.main, menu);  
59.         return true;  
60.     }  
61.   
62. }  

     代码下载：
    欢迎评论交流。