Simulates the exit Effect of Youku like Guan TV

In fact, the exit effect like watching TV is just an animation. You can think about it first. The idea is actually very simple.

1. Instant white screen is required.

2. The white screen is squashed in the middle with uniform acceleration or even deceleration until a white line disappears, and the whole process is about 200 milliseconds.

3. Black Background exposed.

First, write the layout file. There are many other options. The simplest one is to use RelativeLayout or FrameLayout as the root layout of the application's first interface. If the background color of the application is black, it is best, just like Youku. If the background color of the application is not black, write one in the root layout:

 
 

  
  
<FrameLayout 
  
  
      android:id="@+id/fl_off" 
  
  
        android:layout_width="fill_parent" 
  
  
        android:layout_height="fill_parent" 
  
  
        android:visibility="gone" 
  
  
         > 
  
  
    <ImageView 
  
  
        android:layout_width="fill_parent" 
  
  
        android:layout_height="fill_parent" 
  
  
        android:background="@color/text_black" /> 
  
  
    <ImageView 
  
  
          android:id="@+id/iv_off" 
  
  
        android:layout_width="fill_parent" 
  
  
        android:layout_height="fill_parent" 
  
  
        android:background="@color/text_white"  
  
  
         android:visibility="gone"/> 
  
  
</FrameLayout> 
 
 

The first ImageView is a black background color, and the second is a white background color.

The following is the syntax of the animation file res/anim/TV _off.xml:

 
 

  
  
<?xml version="1.0" encoding="utf-8"?> 
  
  
<set android:shareInterpolator="false" 
  
  
android:zAdjustment="top" 
  
  
  xmlns:android="http://schemas.android.com/apk/res/android">
  
  
<span></span> 
  
  
<scale android:interpolator="@android:anim/accelerate_interpolator" 
  
  
android:duration="200" 
  
  
android:pivotX="50.0%" 
  
  
android:pivotY="50.0%" 
  
  
android:fromXScale="1.0" 
  
  
android:toXScale="1.0" 
  
  
android:fromYScale="1.0" 
  
  
android:toYScale="0.0030" /> 
  
  
    <scale android:interpolator="@android:anim/accelerate_interpolator" 
  
  
android:duration="200" 
  
  
android:pivotX="50.0%" 
  
  
android:pivotY="50.0%" 
  
  
android:startOffset="200" 
  
  
android:fromXScale="1.0" 
  
  
android:toXScale="0.0" 
  
  
android:fromYScale="1.0" 
  
  
android:toYScale="0.3" /> 
  
  
    <alpha android:interpolator="@interpolator/accelerate_quint" 
  
  
android:duration="400" 
  
  
android:fillAfter="true" 
  
  
android:fromAlpha="1.0" 
  
  
android:toAlpha="0.0" 
  
  
android:fillEnabled="true" /> 
  
  
</set> 
 
 

This is simple, just copy it.

Because the animation is referenced to the accelerator, the following is the method of writing the accelerator file 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" /> 
 
 

This is a uniform acceleration accelerator, with a acceleration multiple of 2.5.