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

今天药忘吃喽~ 2022-05-13 06:08 114阅读 0赞

**本文由manymore13****原创，转载请标明出处[http://blog.csdn.net/manymore13/article/details/12219687][http_blog.csdn.net_manymore13_article_details_12219687]**

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

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

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

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

![左边一张是不做任何操作时的效果][20131001150109578]![滑动时效果][20131001150135828]

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

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

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

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

**\[java\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **package**com.manymore13.scrollerdemo;
2.  
3.  **import**android.annotation.SuppressLint;
4.  **import**android.content.Context;
5.  **import**android.graphics.Color;
6.  **import**android.graphics.drawable.Drawable;
7.  **import**android.util.AttributeSet;
8.  **import**android.util.DisplayMetrics;
9.  **import**android.util.Log;
10. **import**android.view.MotionEvent;
11. **import**android.view.View;
12. **import**android.view.WindowManager;
13. **import**android.view.animation.AccelerateInterpolator;
14. **import**android.view.animation.BounceInterpolator;
15. **import**android.view.animation.Interpolator;
16. **import**android.widget.FrameLayout;
17. **import**android.widget.ImageView;
18. **import**android.widget.RelativeLayout;
19. **import**android.widget.Scroller;
20. 
21. **public****class**PullDoorView**extends**RelativeLayout\{ 
22. 
23. **private**ContextmContext;
24. 
25. **private**ScrollermScroller;
26. 
27. **private****int**mScreenWidth=0;
28. 
29. **private****int**mScreenHeigh=0;
30. 
31. **private****int**mLastDownY=0;
32. 
33. **private****int**mCurryY;
34. 
35. **private****int**mDelY;
36. 
37. **private****boolean**mCloseFlag=**false**;
38. 
39. **private**ImageViewmImgView;
40. 
41. **public**PullDoorView(Contextcontext)\{ 
42. **super**(context);
43. mContext=context;
44. setupView();
45. \}
46. 
47. **public**PullDoorView(Contextcontext,AttributeSetattrs)\{ 
48. **super**(context,attrs);
49. mContext=context;
50. setupView();
51. \}
52. 
53. @SuppressLint("NewApi")
54. **private****void**setupView()\{ 
55. 
56. //这个Interpolator你可以设置别的我这里选择的是有弹跳效果的Interpolator
57. Interpolatorpolator=**new**BounceInterpolator();
58. mScroller=**new**Scroller(mContext,polator);
59. 
60. //获取屏幕分辨率
61. WindowManagerwm=(WindowManager)(mContext
62. .getSystemService(Context.WINDOW\_SERVICE));
63. DisplayMetricsdm=**new**DisplayMetrics();
64. wm.getDefaultDisplay().getMetrics(dm);
65. mScreenHeigh=dm.heightPixels;
66. mScreenWidth=dm.widthPixels;
67. 
68. //这里你一定要设置成透明背景,不然会影响你看到底层布局
69. **this**.setBackgroundColor(Color.argb(0,0,0,0));
70. mImgView=**new**ImageView(mContext);
71. mImgView.setLayoutParams(**new**LayoutParams(LayoutParams.MATCH\_PARENT,
72. LayoutParams.MATCH\_PARENT));
73. mImgView.setScaleType(ImageView.ScaleType.FIT\_XY);//填充整个屏幕
74. mImgView.setImageResource(R.drawable.bg1);//默认背景
75. addView(mImgView);
76. \}
77. 
78. //设置推动门背景
79. **public****void**setBgImage(**int**id)\{ 
80. mImgView.setImageResource(id);
81. \}
82. 
83. //设置推动门背景
84. **public****void**setBgImage(Drawabledrawable)\{ 
85. mImgView.setImageDrawable(drawable);
86. \}
87. 
88. //推动门的动画
89. **public****void**startBounceAnim(**int**startY,**int**dy,**int**duration)\{ 
90. mScroller.startScroll(0,startY,0,dy,duration);
91. invalidate();
92. \}
93. 
94. @Override
95. **public****boolean**onTouchEvent(MotionEventevent)\{ 
96. **int**action=event.getAction();
97. **switch**(action)\{ 
98. **case**MotionEvent.ACTION\_DOWN:
99. mLastDownY=(**int**)event.getY();
100. System.err.println("ACTION\_DOWN="\+mLastDownY);
101. **return****true**;
102. **case**MotionEvent.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);
111. 
112. **break**;
113. **case**MotionEvent.ACTION\_UP:
114. mCurryY=(**int**)event.getY();
115. mDelY=mCurryY-mLastDownY;
116. **if**(mDelY<0)\{ 
117. 
118. **if**(Math.abs(mDelY)>mScreenHeigh/2)\{ 
119. 
120. //向上滑动超过半个屏幕高的时候开启向上消失动画
121. startBounceAnim(**this**.getScrollY(),mScreenHeigh,450);
122. mCloseFlag=**true**;
123. 
124. \}**else**\{ 
125. //向上滑动未超过半个屏幕高的时候开启向下弹动动画
126. startBounceAnim(**this**.getScrollY(),-**this**.getScrollY(),1000);
127. 
128. \}
129. \}
130. 
131. **break**;
132. \}
133. **return****super**.onTouchEvent(event);
134. \}
135. 
136. @Override
137. **public****void**computeScroll()\{ 
138. 
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. \}
152. 
153. \}

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

运行Demo程序 查看效果

![20131001164506546][]

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

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

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

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

**\[html\]** [view plain][] [copy][view plain] [print][view plain] [?][view plain]

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"**>**
6.  
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="第二层"**/>**
13. 
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用手向上推动的效果的实现到此为止。

**[点击源码下载][Link 1]**

zhuanzihttp://blog.csdn.net/manymore13/article/details/12219687

[http_blog.csdn.net_manymore13_article_details_12219687]: http://blog.csdn.net/manymore13/article/details/12219687
[20131001150109578]: https://img-blog.csdn.net/20131001150109578
[20131001150135828]: /images/20220513/0ffef680d3894256a0ba0da5be09e178.png
[TranslateAnimation]: http://developer.android.com/reference/android/view/animation/TranslateAnimation.html
[view plain]: http://blog.csdn.net/manymore13/article/details/12219687#
[20131001164506546]: /images/20220513/b9734339b59245b18e617422c4743ec3.png
[Link 1]: http://download.csdn.net/detail/manymore13/6356745