Android 仿电视关闭的退出效果

最新推荐文章于 2022-07-25 16:15:00 发布

原创最新推荐文章于 2022-07-25 16:15:00 发布 · 4.3k 阅读

9 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

145 篇文章

订阅专栏

本文介绍如何通过动画效果实现电视或视频退出时的瞬间黑屏、向中间挤压形成白线直至消失的流畅过渡，包括布局设计、动画实现及关键代码解析。

一、实现效果

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

1.要求屏幕瞬间黑屏。

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

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

二、思路

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

<FrameLayout 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" >

    <!-- 黑色背景的view-->
    <ImageView
        android:id="@+id/iv_bg"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/black" />
    <!-- 白色的向下的view -->
    <ImageView
        android:id="@+id/iv_off"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/white"
        android:visibility="gone" />
   
</FrameLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:zAdjustment="top" >

    <!-- 电视机关闭动画效果，源码来自优酷视频客户端并加以修改 -->

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:toXScale="1.0"
        android:toYScale="0.003" />
    
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:startOffset="200"
        android:toXScale="0.0"
        android:toYScale="0.3" />

    <alpha
        android:duration="1000"
        android:fillAfter="true"
        android:fillEnabled="true"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />

</set>

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

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

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

package com.example.youkutvdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

	ImageView iv_bg;
	ImageView iv_line;
	Animation animFadein;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		iv_bg=(ImageView) this.findViewById(R.id.iv_bg);
		iv_line=(ImageView) this.findViewById(R.id.iv_off);
		
		// 加载动画
        animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.tv_off);
        animFadein.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation animation) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation animation) {
				// TODO Auto-generated method stub
				MainActivity.this.finish();
			}
		});
		 // 开始动画
        iv_line.setVisibility(View.VISIBLE);
        iv_line.startAnimation(animFadein);
		
	}

	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

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