Android特效开发（仿zaker用手向上推动的效果(推动门效果)）

本文由manymore13原创，转载请标明出处http://blog.youkuaiyun.com/manymore13/article/details/12219687

最近在商店下载了zaker ，闲暇时拿来看看新闻！发现每次打开软件进入主界面时有个界面，需要你把它往上滑到一

定距离才能进入到主界面。每次进入软件时它的背景可能不一样，在往上拨的时候你会看见主界面，好似向上推的门一样！

打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时，它会俏皮的关闭自己不让你看到外面的美景。

说这么多想像起来挺模糊的，那让我们看看实际效果图，我现在打开zaker截两张图 如下所示

左边一张是不做任何操作时的效果，右边一张是界面跟着手往上滑的效果，在滑的时候你会发现即将进入的界面，当你没有滑到一定的距离松开手后窗帘会慢慢关闭，在合闭的时候有个弹动的效果。非常棒！

正如你看到的图片内容，今天是国庆节，在这里祝大家节日快乐！所以你每次打开的时候图片可能不一样。这个效果看起来有点像android里面讲的TranslateAnimation动画，我觉得用Animation动画应该很难实现出这种效果(当然有用animation实现zaker这种效果的大牛可以与我们分享下)。QQ里也有这么个功能的界面，只不过QQ的是展示一张图片两到三秒后再进入主界面。

下面开始实现这种效果 推动们效果。

根据效果我实现出一个类，方便与需要用的筒靴使用。代码中有注释

[java] view plain copy print ?

1. packagecom.manymore13.scrollerdemo;
3. importandroid.annotation.SuppressLint;
4. importandroid.content.Context;
5. importandroid.graphics.Color;
6. importandroid.graphics.drawable.Drawable;
7. importandroid.util.AttributeSet;
8. importandroid.util.DisplayMetrics;
9. importandroid.util.Log;
10. importandroid.view.MotionEvent;
11. importandroid.view.View;
12. importandroid.view.WindowManager;
13. importandroid.view.animation.AccelerateInterpolator;
14. importandroid.view.animation.BounceInterpolator;
15. importandroid.view.animation.Interpolator;
16. importandroid.widget.FrameLayout;
17. importandroid.widget.ImageView;
18. importandroid.widget.RelativeLayout;
19. importandroid.widget.Scroller;
21. publicclassPullDoorViewextendsRelativeLayout{
23. privateContextmContext;
25. privateScrollermScroller;
27. privateintmScreenWidth=0;
29. privateintmScreenHeigh=0;
31. privateintmLastDownY=0;
33. privateintmCurryY;
35. privateintmDelY;
37. privatebooleanmCloseFlag=false;
39. privateImageViewmImgView;
41. publicPullDoorView(Contextcontext){
42. super(context);
43. mContext=context;
44. setupView();
45. }
47. publicPullDoorView(Contextcontext,AttributeSetattrs){
48. super(context,attrs);
49. mContext=context;
50. setupView();
51. }
53. @SuppressLint("NewApi")
54. privatevoidsetupView(){
56. //这个Interpolator你可以设置别的我这里选择的是有弹跳效果的Interpolator
57. Interpolatorpolator=newBounceInterpolator();
58. mScroller=newScroller(mContext,polator);
60. //获取屏幕分辨率
61. WindowManagerwm=(WindowManager)(mContext
62. .getSystemService(Context.WINDOW_SERVICE));
63. DisplayMetricsdm=newDisplayMetrics();
64. wm.getDefaultDisplay().getMetrics(dm);
65. mScreenHeigh=dm.heightPixels;
66. mScreenWidth=dm.widthPixels;
68. //这里你一定要设置成透明背景,不然会影响你看到底层布局
69. this.setBackgroundColor(Color.argb(0,0,0,0));
70. mImgView=newImageView(mContext);
71. mImgView.setLayoutParams(newLayoutParams(LayoutParams.MATCH_PARENT,
72. LayoutParams.MATCH_PARENT));
73. mImgView.setScaleType(ImageView.ScaleType.FIT_XY);//填充整个屏幕
74. mImgView.setImageResource(R.drawable.bg1);//默认背景
75. addView(mImgView);
76. }
78. //设置推动门背景
79. publicvoidsetBgImage(intid){
80. mImgView.setImageResource(id);
81. }
83. //设置推动门背景
84. publicvoidsetBgImage(Drawabledrawable){
85. mImgView.setImageDrawable(drawable);
86. }
88. //推动门的动画
89. publicvoidstartBounceAnim(intstartY,intdy,intduration){
90. mScroller.startScroll(0,startY,0,dy,duration);
91. invalidate();
92. }
94. @Override
95. publicbooleanonTouchEvent(MotionEventevent){
96. intaction=event.getAction();
97. switch(action){
98. caseMotionEvent.ACTION_DOWN:
99. mLastDownY=(int)event.getY();
100. System.err.println("ACTION_DOWN="+mLastDownY);
101. returntrue;
102. caseMotionEvent.ACTION_MOVE:
103. mCurryY=(int)event.getY();
104. System.err.println("ACTION_MOVE="+mCurryY);
105. mDelY=mCurryY-mLastDownY;
106. //只准上滑有效
107. if(mDelY<0){
108. scrollTo(0,-mDelY);
109. }
110. System.err.println("-------------"+mDelY);
112. break;
113. caseMotionEvent.ACTION_UP:
114. mCurryY=(int)event.getY();
115. mDelY=mCurryY-mLastDownY;
116. if(mDelY<0){
118. if(Math.abs(mDelY)>mScreenHeigh/2){
120. //向上滑动超过半个屏幕高的时候开启向上消失动画
121. startBounceAnim(this.getScrollY(),mScreenHeigh,450);
122. mCloseFlag=true;
124. }else{
125. //向上滑动未超过半个屏幕高的时候开启向下弹动动画
126. startBounceAnim(this.getScrollY(),-this.getScrollY(),1000);
128. }
129. }
131. break;
132. }
133. returnsuper.onTouchEvent(event);
134. }
136. @Override
137. publicvoidcomputeScroll(){
139. if(mScroller.computeScrollOffset()){
140. scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
141. Log.i("scroller","getCurrX()="+mScroller.getCurrX()
142. +"getCurrY()="+mScroller.getCurrY()
143. +"getFinalY()="+mScroller.getFinalY());
144. //不要忘记更新界面
145. postInvalidate();
146. }else{
147. if(mCloseFlag){
148. this.setVisibility(View.GONE);
149. }
150. }
151. }
153. }

View中的scrollTo函数，使View具有滚动效果，就像ListView一样，它的内容是可以滑动的，ViewGroup继承View，所以Relativelayout可以做到滑动效果，另外向下弹动效果是用到Scroller类，而在构造Scroller类时加入BounceInterpolator，你也可以加入别的插值器。其实Scroller只是一个辅助View滑动的一个类，帮助View存储滑动数据的类，当view滑动时，你可以从scroller中取出滑动数据，而真实滑动运动效果其实是利用scrollTo瞬间达到目的地，View结合scroller以及scroller就可以实现这种推动门的效果。

运行Demo程序 查看效果

上面的图片是模拟器上运行的截图，看起来有点卡。其实在真机上测试的很流畅。zaker的效果基本是这个样子。

如果你想使用这个类的话，想实现这种效果的话，那么请满足下面两个条件。

1.PullDoorView match_parent占据全屏像下面这样整个项目父ViewGroup可以用Framelayout

2.PullDoorView 必须要放在界面的最上面使其可以获取touch事件

[html] view plain copy print ?

1. <com.manymore13.scrollerdemo.PullDoorView
2. android:id="@+id/myImage"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ddd">
7. <Button
8. android:id="@+id/btn_above"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_centerInParent="true"
12. android:text="第二层"/>
14. <TextView
15. android:id="@+id/tv_hint"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:layout_alignParentBottom="true"
19. android:layout_centerHorizontal="true"
20. android:layout_marginBottom="10dp"
21. android:text="上滑可以进入首页"
22. android:textColor="#ffffffff"
23. android:textSize="18sp"/>
24. </com.manymore13.scrollerdemo.PullDoorView>

因为PullDoorView是一个RelativeLayout，所以你可以发挥自己的想象在里面添加任何View或者ViewGroup，上面XML中我添加了一个button和一个textView，我想这两个View你可以再上面的动态图片中应该看到了。另外PullDoorView可以根据需要更换背景图片

你可以 PullDoorView.setBgImage(图片)

好了就写这么多，仿zaker用手向上推动的效果的实现到此为止。

点击源码下载

zhuanzihttp://blog.youkuaiyun.com/manymore13/article/details/12219687