项目实战：浅谈属性动画（2）-动画监听事件，消失的按钮，酷炫Path2.0

有了属性动画（1）的基础后，我们进阶玩法，为动画设置监听事件。

先看一下消失的Button，在布局文件中添加Button，为其指定响应方法clickListener：

[html]  view plain  copy

 

1. <Button  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="wrap_content"  
4.     android:text="click-Listener"  
5.     android:id="@+id/button2"  
6.     android:onClick="clickListener"  
7.     android:layout_alignParentBottom="true"  
8.     android:layout_centerHorizontal="true"  
9.     android:layout_marginBottom="55dp" />  

在Activity中完成响应方法：

[java]  view plain  copy

 

1. public void clickListener(View view){  
2.         ObjectAnimator animator = ObjectAnimator.ofFloat(view,"alpha",0f,1f);  
3.         animator.setDuration(1000);  
4.         animator.start();  
5.     }  

设置透明度，run一下，消失的按钮~Get。

进入正题，为其设置监听事件，强大的AnimatorListener，给人无限遐想：

[java]  view plain  copy

 

1. animator.addListener(new Animator.AnimatorListener() {  
2.     @Override  
3.     public void onAnimationStart(Animator animator) {  
4.   
5.     }  
6.   
7.     @Override  
8.     public void onAnimationEnd(Animator animator) {  
9.         Toast.makeText(MainActivity.this,"onAnimationEnd.",Toast.LENGTH_SHORT).show();  
10.     }  
11.   
12.     @Override  
13.     public void onAnimationCancel(Animator animator) {  
14.   
15.     }  
16.   
17.     @Override  
18.     public void onAnimationRepeat(Animator animator) {  
19.   
20.     }  
21. });  

下面我们实现Path2.0酷炫的动画效果：

一一初始化图片并为其设置监听事件：

[java]  view plain  copy

 

1. private int res[] = {R.id.a_iv_path,R.id.b_iv_path,R.id.c_iv_path,R.id.d_iv_path,R.id.e_iv_path,  
2.         R.id.f_iv_path,R.id.g_iv_path,R.id.h_iv_path};  
3. private List<ImageView> imageViewList = new ArrayList<ImageView>();  
4. private ImageView tempImageView;  
5.   
6.     for (int i = 0;i < res.length;i++){  
7.         tempImageView = (ImageView) findViewById(res[i]);  
8.         tempImageView.setOnClickListener(this);  
9.         imageViewList.add(tempImageView);  
10.     }  

在onClick中为其设置开始动画和结束动画：

[java]  view plain  copy

 

1. public void onClick(View view) {  
2.     switch (view.getId()){  
3.         case R.id.a_iv_path:  
4.             if (flag){  
5.                 startAnim();  
6.             }else {  
7.                 closeAnim();  
8.             }  
9.             break;  
10.         default:  
11.             Toast.makeText(this,"Click" + view.getId(),Toast.LENGTH_SHORT).show();  
12.             break;  
13.     }  
14. }  

开始动画如下，同时设置X轴和Y轴的平移动画，组合一下，特别值得一提的是设置差值器（重力加速度），效果十分酷炫

最后记得设置标志位，实现开始和结束的切换：

[java]  view plain  copy

 

1. private void startAnim() {  
2.     for (int i = 1;i < res.length;i++){  
3.         ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),  
4.                 "translationY",0f,10f + i*50f);  
5.         ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageViewList.get(i),  
6.                 "translationX",0f,400f - i*50f);  
7.         AnimatorSet set = new AnimatorSet();  
8.         set.playTogether(animator1,animator2);  
9.         set.setDuration(800);  
10.         set.setInterpolator(new BounceInterpolator());//设置差值器，重力加速度  
11.         set.setStartDelay(i*400);  
12.         set.start();  
13.     }  
14.     flag = false;  
15. }  

结束动画和开始动画类似，只不过正好将变化范围倒过来。

[java]  view plain  copy

 

1. private void closeAnim() {  
2.     for (int i = 1;i < res.length;i++){  
3.         ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),  
4.                 "translationY",i*100f,0f);  
5.         ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageViewList.get(i),  
6.                 "translationX",i*100f,0f);  
7.         AnimatorSet set = new AnimatorSet();  
8.         set.playTogether(animator1,animator2);  
9.         set.setDuration(800);  
10.         set.setInterpolator(new BounceInterpolator());//设置差值器，重力加速度  
11.         set.setStartDelay(i*400);  
12.         set.start();  
13.     }  
14.     flag = true;  
15. }  

布局文件如下，一笔带过：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     >  
7.   
8.     <ImageView  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:src="@drawable/h"  
12.         android:id="@+id/h_iv_path"  
13.         android:paddingLeft="5dp"  
14.         android:paddingTop="5dp"  
15.         />  
16.   
17.     <ImageView  
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         android:src="@drawable/g"  
21.         android:id="@+id/g_iv_path"  
22.         android:paddingLeft="5dp"  
23.         android:paddingTop="5dp"  
24.         />  
25.   
26.     <ImageView  
27.         android:layout_width="wrap_content"  
28.         android:layout_height="wrap_content"  
29.         android:src="@drawable/f"  
30.         android:id="@+id/f_iv_path"  
31.         android:paddingLeft="5dp"  
32.         android:paddingTop="5dp"  
33.         />  
34.   
35.     <ImageView  
36.         android:layout_width="wrap_content"  
37.         android:layout_height="wrap_content"  
38.         android:src="@drawable/e"  
39.         android:id="@+id/e_iv_path"  
40.         android:paddingLeft="5dp"  
41.         android:paddingTop="5dp"  
42.         />  
43.   
44.     <ImageView  
45.         android:layout_width="wrap_content"  
46.         android:layout_height="wrap_content"  
47.         android:src="@drawable/d"  
48.         android:id="@+id/d_iv_path"  
49.         android:paddingLeft="5dp"  
50.         android:paddingTop="5dp"  
51.         />  
52.   
53.     <ImageView  
54.         android:layout_width="wrap_content"  
55.         android:layout_height="wrap_content"  
56.         android:src="@drawable/c"  
57.         android:id="@+id/c_iv_path"  
58.         android:paddingLeft="5dp"  
59.         android:paddingTop="5dp"  
60.         />  
61.   
62.     <ImageView  
63.         android:layout_width="wrap_content"  
64.         android:layout_height="wrap_content"  
65.         android:src="@drawable/b"  
66.         android:id="@+id/b_iv_path"  
67.         android:paddingLeft="5dp"  
68.         android:paddingTop="5dp"  
69.         />  
70.   
71.     <ImageView  
72.         android:layout_width="wrap_content"  
73.         android:layout_height="wrap_content"  
74.         android:src="@drawable/a"  
75.         android:id="@+id/a_iv_path"  
76.         android:paddingLeft="3dp"  
77.         android:paddingTop="3dp"  
78.         />  
79.   
80.   
81. </FrameLayout>  

最后附上完整核心源代码：

package com.example.quan.quanstudy.objectAnimator;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import com.example.quan.quanstudy.R;
import com.example.quan.quanstudy.base.BaseActivity;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by xingquan.he on 2017/3/15.
 * Mr.Quan
 * 项目实战：浅谈属性动画（2）-动画监听事件，消失的按钮，酷炫Path2.0
 */

public class PathActivity extends BaseActivity {

    private int res[] = {R.id.a_iv_path,R.id.b_iv_path,R.id.c_iv_path,R.id.d_iv_path,R.id.e_iv_path,
            R.id.f_iv_path,R.id.g_iv_path,R.id.h_iv_path};
    private List<ImageView> imageViewList = new ArrayList<ImageView>();
    private ImageView tempImageView;
    private boolean flag = true;

    @Override
    public int getLayoutId() {
        return R.layout.activity_animator_path;
    }

    @Override
    public void initView() {
        for (int i = 0;i < res.length;i++){
            tempImageView = (ImageView) findViewById(res[i]);
            tempImageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    switch (v.getId()){
                        case R.id.a_iv_path:
                            if (flag){
                                startAnim();
                            }else {
                                closeAnim();
                            }
                            break;
                        default:
                            Toast.makeText(PathActivity.this,"Click-" + v.getId(),Toast.LENGTH_SHORT).show();
                            break;
                    }
                }
            });
            imageViewList.add(tempImageView);
        }
    }

    private void closeAnim() {
        for (int i = 1;i < res.length;i++){
            ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),
                    "translationY",i*300f,0f);
            ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageViewList.get(i),
                    "translationX",i*300f,0f);
            AnimatorSet set = new AnimatorSet();
            set.playTogether(animator1,animator2);
            set.setDuration(700);
            set.setInterpolator(new BounceInterpolator());//设置差值器，重力加速度
            set.setStartDelay(i*300);
            set.start();
        }
        flag = true;
    }

    private void startAnim() {
        for (int i = 1;i < res.length;i++){
            ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),
                    "translationY",0f,10f + i*50f);
            ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageViewList.get(i),
                    "translationX",0f,400f - i*50f);
            AnimatorSet set = new AnimatorSet();
            set.playTogether(animator1,animator2);
            set.setDuration(700);
            set.setInterpolator(new BounceInterpolator());//设置差值器，重力加速度
            set.setStartDelay(i*300);
            set.start();
        }
        flag = false;
    }
}

原创不易，转载请注明出处哈。

权兴权意

代码可以更优雅~

http://blog.csdn.net/hxqneuq2012/article/details/62222257

项目源代码，欢迎提建议（star）。

https://github.com/HXQWill/QuanStudy/tree/master/app/src/main/java/com/example/quan/quanstudy/objectAnimator