模拟优酷像关电视一样的退出效果

移动开发 Android
关电视效果即:要求屏幕瞬间白屏,.白色屏幕以匀加速或匀减速向中间挤压,直至一条白线后消失不见,露出黑漆漆一片的黑色背景。本文介绍了如何实现这种效果。

其实所谓像关电视一样的退出效果就是一个动画而已,好吧,看到这里的朋友可以先自己想想,其实思路是很简单的。

1.要求屏幕瞬间白屏。

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

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

首先,布局文件的写法。有很多种,最简单的就是利用RelativeLayout或者FrameLayout为应用首界面的根布局,如果应用的背景色本身为黑色最好,就像优酷一样。如果应用的背景色不为黑色,那么在根布局里写一:

  1. <FrameLayout 
  2.       android:id="@+id/fl_off" 
  3.         android:layout_width="fill_parent" 
  4.         android:layout_height="fill_parent" 
  5.         android:visibility="gone" 
  6.          > 
  7.     <ImageView 
  8.         android:layout_width="fill_parent" 
  9.         android:layout_height="fill_parent" 
  10.         android:background="@color/text_black" /> 
  11.     <ImageView 
  12.           android:id="@+id/iv_off" 
  13.         android:layout_width="fill_parent" 
  14.         android:layout_height="fill_parent" 
  15.         android:background="@color/text_white"  
  16.          android:visibility="gone"/> 
  17. </FrameLayout> 

第一个ImageView为黑色的背景色,第二个为白色的背景色。

下面是动画文件的写法 res/anim/tv_off.xml:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <set android:shareInterpolator="false" 
  3. android:zAdjustment="top" 
  4.   xmlns:android="http://schemas.android.com/apk/res/android">
  5. <span></span> 
  6. <scale android:interpolator="@android:anim/accelerate_interpolator" 
  7. android:duration="200" 
  8. android:pivotX="50.0%" 
  9. android:pivotY="50.0%" 
  10. android:fromXScale="1.0" 
  11. android:toXScale="1.0" 
  12. android:fromYScale="1.0" 
  13. android:toYScale="0.0030" /> 
  14.     <scale android:interpolator="@android:anim/accelerate_interpolator" 
  15. android:duration="200" 
  16. android:pivotX="50.0%" 
  17. android:pivotY="50.0%" 
  18. android:startOffset="200" 
  19. android:fromXScale="1.0" 
  20. android:toXScale="0.0" 
  21. android:fromYScale="1.0" 
  22. android:toYScale="0.3" /> 
  23.     <alpha android:interpolator="@interpolator/accelerate_quint" 
  24. android:duration="400" 
  25. android:fillAfter="true" 
  26. android:fromAlpha="1.0" 
  27. android:toAlpha="0.0" 
  28. android:fillEnabled="true" /> 
  29. </set> 

这个很简单,大家copy就行了。

因为动画引用到了加速器,下面是加速器文件的写法 res/interpolator/accelerate_quint.xml:

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

这是一个匀加速的加速器,加速倍数为2.5。

责任编辑:徐川 来源: OSChina
相关推荐

2023-04-05 14:19:07

FlinkRedisNoSQL

2013-12-17 09:02:03

Python调试

2013-12-31 09:19:23

Python调试

2023-05-23 13:59:41

RustPython程序

2022-12-21 15:56:23

代码文档工具

2015-04-09 11:27:34

2021-05-20 08:37:32

multiprocesPython线程

2013-08-22 10:17:51

Google大数据业务价值

2015-03-16 12:50:44

2015-02-05 13:27:02

移动开发模块SDK

2011-01-18 10:45:16

乔布斯

2012-06-08 13:47:32

Wndows 8Vista

2022-05-26 01:15:22

GitHub代码快捷键

2016-10-08 00:24:53

httptcp实时

2022-11-24 12:22:39

2021-08-27 06:41:34

Docker ContainerdRun&Exec

2021-12-14 19:40:07

Node路由Vue

2012-03-21 10:15:48

RIM越狱

2017-05-22 10:33:14

PythonJuliaCython

2021-09-07 10:29:11

JavaScript模块CSS
点赞
收藏

51CTO技术栈公众号