Android特效開發（仿zaker用手向上推動的效果(推動門效果)）

lostinai發表於2014-03-14
Android特效

       本文由manymore13原創，轉載請標明出處 http://blog.csdn.net/manymore13/article/details/12219687here

 最近在商店下載了zaker ，閒暇時拿來看看新聞！發現每次開啟軟體進入主介面時有個介面，需要你把它往上滑到一

定距離才能進入到主介面。每次進入軟體時它的背景可能不一樣，在往上撥的時候你會看見主介面，好似向上推的門一樣！

開啟它你就可以看到外面的世界。與窗簾有點不同的是在你沒有拉開足夠距離時，它會俏皮的關閉自己不讓你看到外面的美景。

      說這麼多想像起來挺模糊的，那讓我們看看實際效果圖，我現在開啟zaker截兩張圖 如下所示 

左邊一張是不做任何操作時的效果              滑動時效果

     左邊一張是不做任何操作時的效果，右邊一張是介面跟著手往上滑的效果，在滑的時候你會發現即將進入的介面，當你沒有滑到一定的距離鬆開手後窗簾會慢慢關閉，在合閉的時候有個彈動的效果。非常棒！

正如你看到的圖片內容，今天是國慶節，在這裡祝大家節日快樂！所以你每次開啟的時候圖片可能不一樣。這個效果看起來有點像android裡面講的TranslateAnimation動畫，我覺得用Animation動畫應該很難實現出這種效果(當然有用animation實現zaker這種效果的大牛可以與我們分享下)。QQ裡也有這麼個功能的介面，只不過QQ的是展示一張圖片兩到三秒後再進入主介面。

    下面開始實現這種效果 推動們效果。

    根據效果我實現出一個類，方便與需要用的筒靴使用。程式碼中有註釋

[java] view plaincopyprint?
  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 plaincopyprint?
  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用手向上推動的效果的實現到此為止。

點選原始碼下載


相關文章