android 点击下弹动画实现 下弹动画的实现

下弹动画在很多应用都有使用,比如豌豆荚中的应用介绍界面,百度手机助手的应用介绍界面等。

只要熟悉android动画的使用接口,制作动画并不困难。 这里使用开源库nineoldandroids,其实和android3.0 以上直接使用动画接口是一样的。

实现效果

具体可以看youku动画:http://v.youku.com/v_show/id_XNjYyODgzNjQ4.html

PS, 搞了半天GIF 才能播放。原来是最大边不能太大了。原来图片尺寸太大,被默认转成jpg了。现在总算能看到效果了。

android 点击下弹动画实现
下弹动画的实现

DropDownExample.java

[java] view plaincopyandroid 点击下弹动画实现
下弹动画的实现android 点击下弹动画实现
下弹动画的实现
 
  1. package com.buptfarmer.devapp;  
  2.   
  3. import com.nineoldandroids.animation.Animator;  
  4. import com.nineoldandroids.animation.AnimatorListenerAdapter;  
  5. import com.nineoldandroids.animation.ValueAnimator;  
  6.   
  7. import android.app.Activity;  
  8. import android.os.Bundle;  
  9. import android.view.View;  
  10. import android.view.View.OnClickListener;  
  11. import android.view.ViewGroup;  
  12.   
  13. public class DropDownExample extends Activity implements OnClickListener {  
  14.     private View mHolder;  
  15.     private View mHolder2;  
  16. //    private static final int DURATION = 2000;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         initView();  
  22.     }  
  23.   
  24.     private void initView() {  
  25.         setContentView(R.layout.drop_down_example);  
  26.         mHolder = findViewById(R.id.holder);  
  27.         mHolder2 = findViewById(R.id.holder2);  
  28.         mHolder.setOnClickListener(this);  
  29.         mHolder2.setOnClickListener(this);  
  30.     }  
  31.   
  32.     public static ValueAnimator createHeightAnimator(final View view, int start, int end) {  
  33.         ValueAnimator animator = ValueAnimator.ofInt(start, end);  
  34.         animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
  35.   
  36.             @Override  
  37.             public void onAnimationUpdate(ValueAnimator valueAnimator) {  
  38.                 int value = (Integer) valueAnimator.getAnimatedValue();  
  39.   
  40.                 ViewGroup.LayoutParams layoutParams = view.getLayoutParams();  
  41.                 layoutParams.height = value;  
  42.                 view.setLayoutParams(layoutParams);  
  43.             }  
  44.         });  
  45. //        animator.setDuration(DURATION);  
  46.         return animator;  
  47.     }  
  48.   
  49.     public static void animateExpanding(final View view) {  
  50.         view.setVisibility(View.VISIBLE);  
  51.   
  52.         final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);  
  53.         final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);  
  54.         view.measure(widthSpec, heightSpec);  
  55.   
  56.         ValueAnimator animator = createHeightAnimator(view, 0, view.getMeasuredHeight());  
  57.         animator.start();  
  58.     }  
  59.   
  60.     public static void animateCollapsing(final View view) {  
  61.         int origHeight = view.getHeight();  
  62.   
  63.         ValueAnimator animator = createHeightAnimator(view, origHeight, 0);  
  64.         animator.addListener(new AnimatorListenerAdapter() {  
  65.             public void onAnimationEnd(Animator animation) {  
  66.                 view.setVisibility(View.GONE);  
  67.             };  
  68.         });  
  69.         animator.start();  
  70.     }  
  71.   
  72.     @Override  
  73.     public void onClick(View v) {  
  74.         if (v == mHolder) {  
  75.             if (View.GONE == mHolder.findViewById(R.id.hiddenview).getVisibility()) {  
  76.                 animateExpanding(mHolder.findViewById(R.id.hiddenview));  
  77.             } else {  
  78.                 animateCollapsing(mHolder.findViewById(R.id.hiddenview));  
  79.             }  
  80.         } else if (v == mHolder2) {  
  81.             if (View.GONE == mHolder2.findViewById(R.id.hiddenview).getVisibility()) {  
  82.                 animateExpanding(mHolder2.findViewById(R.id.hiddenview));  
  83.             } else {  
  84.                 animateCollapsing(mHolder2.findViewById(R.id.hiddenview));  
  85.             }  
  86.         }  
  87.     }  
  88. }  

drop_down_example.xml

[html] view plaincopyandroid 点击下弹动画实现
下弹动画的实现android 点击下弹动画实现
下弹动画的实现
 
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:orientation="vertical" >  
    6.   
    7.     <LinearLayout  
    8.         android:id="@+id/holder"  
    9.         android:layout_width="fill_parent"  
    10.         android:layout_height="wrap_content"  
    11.         android:background="@color/greenyellow"  
    12.         android:orientation="vertical" >  
    13.   
    14.         <LinearLayout  
    15.             android:layout_width="fill_parent"  
    16.             android:layout_height="wrap_content"  
    17.             android:gravity="center_vertical"  
    18.             android:orientation="horizontal"  
    19.             android:paddingLeft="1dp" >  
    20.   
    21.             <ImageView  
    22.                 android:id="@+id/app_icon"  
    23.                 android:layout_width="wrap_content"  
    24.                 android:layout_height="wrap_content"  
    25.                 android:layout_gravity="center"  
    26.                 android:contentDescription="picture"  
    27.                 android:minWidth="32dp"  
    28.                 android:src="@drawable/ic_launcher" />  
    29.   
    30.             <TextView  
    31.                 android:id="@+id/app_label"  
    32.                 android:layout_width="wrap_content"  
    33.                 android:layout_height="wrap_content"  
    34.                 android:layout_marginLeft="5dp"  
    35.                 android:ellipsize="end"  
    36.                 android:gravity="left"  
    37.                 android:singleLine="true"  
    38.                 android:text="what's your dream?"  
    39.                 android:textSize="13sp" />  
    40.         </LinearLayout>  
    41.   
    42.         <LinearLayout  
    43.             android:id="@+id/hiddenview"  
    44.             android:layout_width="fill_parent"  
    45.             android:layout_height="40dp"  
    46.             android:gravity="center_vertical"  
    47.             android:orientation="horizontal"  
    48.             android:paddingLeft="1dp"  
    49.             android:visibility="gone" >  
    50.   
    51.             <TextView  
    52.                 android:id="@+id/hidden_text"  
    53.                 android:layout_width="wrap_content"  
    54.                 android:layout_height="fill_parent"  
    55.                 android:text="过个好年,马上有房" />  
    56.         </LinearLayout>  
    57.     </LinearLayout>  
    58.   
    59.     <LinearLayout  
    60.         android:id="@+id/holder2"  
    61.         android:layout_width="fill_parent"  
    62.         android:layout_height="wrap_content"  
    63.         android:background="@color/blueviolet"  
    64.         android:orientation="vertical" >  
    65.   
    66.         <LinearLayout  
    67.             android:layout_width="fill_parent"  
    68.             android:layout_height="wrap_content"  
    69.             android:gravity="center_vertical"  
    70.             android:orientation="horizontal"  
    71.             android:paddingLeft="1dp" >  
    72.   
    73.             <ImageView  
    74.                 android:id="@+id/app_icon"  
    75.                 android:layout_width="wrap_content"  
    76.                 android:layout_height="wrap_content"  
    77.                 android:layout_gravity="center"  
    78.                 android:contentDescription="picture"  
    79.                 android:minWidth="32dp"  
    80.                 android:src="@drawable/ic_launcher" />  
    81.   
    82.             <TextView  
    83.                 android:id="@+id/app_label"  
    84.                 android:layout_width="wrap_content"  
    85.                 android:layout_height="wrap_content"  
    86.                 android:layout_marginLeft="5dp"  
    87.                 android:ellipsize="end"  
    88.                 android:gravity="left"  
    89.                 android:singleLine="true"  
    90.                 android:text="Self introduction"  
    91.                 android:textSize="13sp" />  
    92.         </LinearLayout>  
    93.   
    94.         <LinearLayout  
    95.             android:id="@+id/hiddenview"  
    96.             android:layout_width="fill_parent"  
    97.             android:layout_height="40dp"  
    98.             android:gravity="center_vertical"  
    99.             android:orientation="horizontal"  
    100.             android:paddingLeft="1dp"  
    101.             android:visibility="gone" >  
    102.   
    103.             <ImageView   
    104.                 android:contentDescription="avatar"  
    105.                 android:src="@drawable/avatar"  
    106.                 android:layout_width="wrap_content"  
    107.                 android:layout_height="wrap_content"  
    108.                 android:layout_gravity="center"/>  
    109.             <TextView  
    110.                 android:id="@+id/hidden_text"  
    111.                 android:layout_width="wrap_content"  
    112.                 android:layout_height="fill_parent"  
    113.                 android:text="乐山好事,积极乐观" />  
    114.         </LinearLayout>  
    115.     </LinearLayout>  
    116.   
    117. </LinearLayout>