项目实战:浅谈属性动画(2)-动画监听事件,消失的按钮,酷炫Path2.0

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

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

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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




发布了166 篇原创文章 · 获赞 15 · 访问量 19万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览