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

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

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

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

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

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

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

              

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

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

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

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

[java] view plain copy print ?

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 Context mContext;  
24.   
25.     private Scroller mScroller;  
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 ImageView mImgView;  
40.   
41.     public PullDoorView(Context context) {  
42.         super(context);  
43.         mContext = context;  
44.         setupView();  
45.     }  
46.   
47.     public PullDoorView(Context context, AttributeSet attrs) {  
48.         super(context, attrs);  
49.         mContext = context;  
50.         setupView();  
51.     }  
52.   
53.     @SuppressLint("NewApi")  
54.     private void setupView() {  
55.   
56.         // 这个Interpolator你可以设置别的 我这里选择的是有弹跳效果的Interpolator  
57.         Interpolator polator = new BounceInterpolator();  
58.         mScroller = new Scroller(mContext, polator);  
59.   
60.         // 获取屏幕分辨率  
61.         WindowManager wm = (WindowManager) (mContext  
62.                 .getSystemService(Context.WINDOW_SERVICE));  
63.         DisplayMetrics dm = 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(Drawable drawable) {  
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(MotionEvent event) {  
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程序 查看效果

上面的图片是模拟器上运行的截图，看起来有点卡。其实在真机上测试的很流畅。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" >  
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用手向上推动的效果的实现到此为止。

点击源码下载