android Pull-to-refresh 动画实现

浏览数：82 / 时间：2015年06月11日

android Pull-to-refresh 动画实现

现在很多应用都使用的pull-to-refresh 动画效果，包括微博、微信、QQ等。

这里示例性的实现pull-to-refresh 动画效果，并增加了额外的图片放大、透明度、位移等动画。这些动画也被经常使用。


实现效果：

http://v.youku.com/v_show/id_XNjY0MTQzODQ4.html

java文件

[java] view plaincopy
  1. package com.buptfarmer.devapp;  
  2.   
  3. import static com.nineoldandroids.view.ViewPropertyAnimator.animate;  
  4.   
  5. import com.nineoldandroids.animation.Animator;  
  6. import com.nineoldandroids.animation.AnimatorListenerAdapter;  
  7. import com.nineoldandroids.view.ViewHelper;  
  8.   
  9. import android.app.Activity;  
  10. import android.os.Bundle;  
  11. import android.view.MotionEvent;  
  12. import android.view.View;  
  13. import android.view.ViewConfiguration;  
  14. import android.view.View.OnTouchListener;  
  15. import android.view.animation.RotateAnimation;  
  16. import android.widget.ImageView;  
  17. import android.widget.LinearLayout;  
  18. import android.widget.TextView;  
  19.   
  20. public class PullAnimationExample extends Activity {  
  21.     private TextView mRefreshText;  
  22.     private TextView mAaaText;  
  23.     private ImageView mHeaderImg;  
  24.     private LinearLayout mBottom;  
  25.     private LinearLayout mHolder;  
  26.     private int mCount;  
  27.     private RotateAnimation mFlipAnimation;  
  28.     private RotateAnimation mReverseFlipAnimation;  
  29.     private int mSlop;  
  30.     private boolean mSwiping;  
  31.   
  32.     @Override  
  33.     protected void onCreate(Bundle savedInstanceState) {  
  34.         super.onCreate(savedInstanceState);  
  35.         ViewConfiguration vc = ViewConfiguration.get(this);  
  36.         mSlop = vc.getScaledTouchSlop();  
  37.         initView();  
  38.   
  39.         mFlipAnimation = new RotateAnimation(0, -180,  
  40.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  41.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  42.         mFlipAnimation.setFillAfter(true);  
  43.         mReverseFlipAnimation = new RotateAnimation(-180, 0,  
  44.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  45.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  46.         mReverseFlipAnimation.setFillAfter(true);  
  47.     }  
  48.   
  49.     private void initView() {  
  50.         setContentView(R.layout.pull_animation_example);  
  51.         mHolder = (LinearLayout) findViewById(R.id.holder);  
  52.         mHeaderImg = (ImageView) findViewById(R.id.header_img);  
  53.         ViewHelper.setAlpha(mHeaderImg, 0.3f);  
  54.         mRefreshText = (TextView)findViewById(R.id.refresh);  
  55.         mRefreshText.setVisibility(View.INVISIBLE);  
  56.         mAaaText = (TextView) findViewById(R.id.aaa);  
  57.         mBbbText = (TextView) findViewById(R.id.bbb);  
  58.         mBottom = (LinearLayout) findViewById(R.id.buttom);  
  59.   
  60.         mHolder.setOnTouchListener(new OnTouchListener() {  
  61.   
  62.             private float mDownX;  
  63.             private float mDownY;  
  64.   
  65.             @Override  
  66.             public boolean onTouch(View v, MotionEvent event) {  
  67.                 switch (event.getAction()) {  
  68.                     case MotionEvent.ACTION_DOWN: {  
  69.                         mDownX = event.getX();  
  70.                         mDownY = event.getY();  
  71.                         mRefreshText.setVisibility(View.VISIBLE);  
  72.                         mRefreshText.setText("pull to refresh");  
  73.                         break;  
  74.                     }  
  75.                     case MotionEvent.ACTION_MOVE: {  
  76.                         float deltaX = Math.abs(event.getX() - mDownX);  
  77.                         float deltaY = Math.abs(event.getY() - mDownY);  
  78.                         if (deltaY > mSlop && deltaY > 0) {  
  79.                             mSwiping = true;  
  80.                             v.getParent().requestDisallowInterceptTouchEvent(true);  
  81.                             float percent = Math.min(0.2f, Math.abs(deltaY) / mHeaderImg.getMeasuredHeight());  
  82.                             ViewHelper.setScaleX(mHeaderImg,  
  83.                                     1f + 3f * percent);  
  84.                             ViewHelper.setScaleY(mHeaderImg,  
  85.                                     1f + 3f * percent);  
  86.                             ViewHelper.setAlpha(mHeaderImg,  
  87.                                     Math.min(1f, 0.3f+3f * percent));  
  88.                             ViewHelper.setTranslationY(mBottom, deltaY);  
  89.                             if(deltaY > mRefreshText.getHeight()){  
  90.                                 mRefreshText.setText("release to refresh");  
  91.                             }  
  92.                         }  
  93.                         break;  
  94.                     }  
  95.                     case MotionEvent.ACTION_UP: {  
  96.                         if (mSwiping) {  
  97.                             mSwiping = false;  
  98.                             ViewHelper.setScaleX(mHeaderImg, 1f);  
  99.                             ViewHelper.setScaleY(mHeaderImg, 1f);  
  100.                             ViewHelper.setAlpha(mHeaderImg, 0.3f);  
  101.                             animate(mHeaderImg).alpha(0.3f).scaleX(1f).scaleY(1f).setListener(null);  
  102.                             animate(mBottom).translationY(0).setListener(null);  
  103.                             updateText();  
  104.   
  105.                             mRefreshText.setVisibility(View.INVISIBLE);  
  106.                             mRefreshText.setText("refreshing...");  
  107.                         }  
  108.                         break;  
  109.   
  110.                     }  
  111.                     default: {  
  112.                         break;  
  113.                     }  
  114.                 }  
  115.                 return true;  
  116.             }  
  117.         });  
  118.     }  
  119.   
  120.     private void updateText() {  
  121.         animateText(mAaaText, new AnimationCallback() {  
  122.   
  123.             @Override  
  124.             public void onAnimation() {  
  125.                 // TODO Auto-generated method stub  
  126.                 mAaaText.setText("update " + mCount++);  
  127.             }  
  128.         });  
  129.   
  130.     }  
  131.   
  132.     public static void animateText(final View view, final AnimationCallback callback) {  
  133.         int origHeight = view.getHeight();  
  134.         animate(view).translationY(origHeight).alpha(0).scaleX(0.5f).scaleY(0.5f)  
  135.                 .setListener(new AnimatorListenerAdapter() {  
  136.                     public void onAnimationEnd(Animator animation) {  
  137.                         if (callback != null) {  
  138.                             callback.onAnimation();  
  139.                         }  
  140.                         animate(view).translationY(0).alpha(1).scaleX(1f).scaleY(1f).setListener(null);  
  141.                     };  
  142.                 });  
  143.     }  
  144.   
  145.     public interface AnimationCallback {  
  146.         public void onAnimation();  
  147.     }  
  148. }  

layout xml 文件

[html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:id="@+id/holder"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent"  
    6.     android:orientation="vertical" >  
    7.   
    8.     <RelativeLayout  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="fill_parent" >  
    11.   
    12.         <ImageView  
    13.             android:id="@+id/header_img"  
    14.             android:layout_width="match_parent"  
    15.             android:layout_height="wrap_content"  
    16.             android:layout_centerHorizontal="true"  
    17.             android:src="@drawable/all_in_one" />  
    18.   
    19.         <TextView  
    20.             android:id="@+id/refresh"  
    21.             android:layout_width="wrap_content"  
    22.             android:layout_height="wrap_content"  
    23.             android:layout_alignParentTop="true"  
    24.             android:layout_centerHorizontal="true"  
    25.             android:text="pull to refresh"  
    26.             android:textColor="@color/blue"  
    27.             android:textSize="20sp" />  
    28.   
    29.         <TextView  
    30.             android:id="@+id/aaa"  
    31.             android:layout_width="wrap_content"  
    32.             android:layout_height="wrap_content"  
    33.             android:layout_below="@id/refresh"  
    34.             android:layout_centerHorizontal="true"  
    35.             android:text="aaaaaa text"  
    36.               
    37.             android:textColor="@color/red"  
    38.             android:textSize="20sp" />  
    39.   
    40.         <LinearLayout  
    41.             android:id="@+id/buttom"  
    42.             android:layout_width="match_parent"  
    43.             android:layout_height="match_parent"  
    44.             android:layout_below="@id/header_img"  
    45.             android:gravity="center_horizontal"  
    46.             android:orientation="vertical" >  
    47.   
    48.             <TextView  
    49.                 android:id="@+id/bbb"  
    50.                 android:layout_width="wrap_content"  
    51.                 android:layout_height="wrap_content"  
    52.                 android:text="bbbbbb text"  
    53.                 android:textSize="20sp" />  
    54.   
    55.             <TextView  
    56.                 android:layout_width="wrap_content"  
    57.                 android:layout_height="wrap_content"  
    58.                 android:text="bbbbbb text"  
    59.                 android:textSize="20sp" />  
    60.   
    61.             <TextView  
    62.                 android:layout_width="wrap_content"  
    63.                 android:layout_height="wrap_content"  
    64.                 android:text="bbbbbb text"  
    65.                 android:textSize="20sp" />  
    66.   
    67.             <TextView  
    68.                 android:layout_width="wrap_content"  
    69.                 android:layout_height="wrap_content"  
    70.                 android:text="bbbbbb text"  
    71.                 android:textSize="20sp" />  
    72.         </LinearLayout>  
    73.     </RelativeLayout>  
    74.   
    75. </LinearLayout> 

    2. 儿童安全座椅什么牌子好

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢