android中属性动画 ObjectionAnimation


   关于动画:

 android中动画包括 View Animation、Drawable Animation和属性动画Property Animation

     ● View Animation较简单的动画包含平移、缩放、透明度和旋转这些简单的动画。
   
     Drawable Animation在xml中用多幅图片实现动画的效果。

    ●Property Animation用动画的方式改变了控件的属性,View Animation和Drawable Animation实现不了的都可以用属

性动画来实现。 

 View Animation和Drawable Animation不做太多解释到时会在公众号上推广,主要解释属性动画Property Animation.

  源码下载 : http://download.csdn.net/detail/bruse_android/9466182

  github 源码下载 : https://github.com/fanloveoupao/AnimationLearn
 
  属性动画

  属性动画的四个方面:
  
    /**
     * 1、ObjectionAnimation
     * <p>
     * 2、AnimationSet
     * <p>
     * 3、AnimationListener
     * <p>
     * 4、LayoutAnimation
     */
   
  1、使用Objection Animation实现动画的效果:
     
      主界面的核心代码:
      
@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.id_objectionanimation:
                ObjectAnimatActivity.launch(MainActivity.this);
                break;
            case R.id.id_animationset:
                AnimatSetActivity.launch(MainActivity.this);
                break;
            case R.id.id_animlistener:
                AnimationListenerActivity.launch(MainActivity.this);
                break;
            case R.id.id_layout_anim:
                LayoutAnimationActivity.launch(MainActivity.this);
                break;
        }
    }
  
  实现Objection Animation的动画
   布局文件:
  
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="bruse.com.animationlearn.ObjectAnimatActivity">
    <!--图片沿着x进行旋转-->
    <ImageView
        android:id="@+id/id_rotation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:onClick="rotationX"
        android:src="@mipmap/objectanimat" />
</RelativeLayout>
  一张图片沿着x轴进行旋转旋转的轴心可以自己选,动画的触发代码
 Activity的代码:
   
public class ObjectAnimatActivity extends AppCompatActivity {
    public static void launch(Activity activity) {
        Intent intent = new Intent(activity, ObjectAnimatActivity.class);
        activity.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_object_animat);
    }

    public void rotationX(final View view) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "rotationX", 0.0F, 360.0F);
        objectAnimator.setDuration(1500);
        objectAnimator.start();

        objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                view.postInvalidate();
                view.invalidate();
            }
        });
    }
}
 仅仅三行代码触发一个动画当然,改成一行也是可以的不过这里为了方便理解就不拆开写了。动画效果很简单就是一张图片的旋转。
 效果图
 
 第二部分AnimationSet多个动画一起播放当然可以定义播放的顺序。
  布局文件:
  
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".AnimatSetActivity">
<ImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:id="@+id/iv_image1"
    android:layout_centerInParent="true"
    android:src="@mipmap/one"
    />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image2"
        android:layout_centerInParent="true"
        android:src="@mipmap/two"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image3"
        android:layout_centerInParent="true"
        android:src="@mipmap/three"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image4"
        android:layout_centerInParent="true"
        android:src="@mipmap/four"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image5"
        android:layout_centerInParent="true"
        android:src="@mipmap/five"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image6"
        android:layout_centerInParent="true"
        android:src="@mipmap/six"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image7"
        android:layout_centerInParent="true"
        android:src="@mipmap/seven"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/iv_image8"
        android:layout_centerInParent="true"
        android:src="@mipmap/nine"
        />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/iv_image9"
        android:layout_centerInParent="true"
        android:src="@mipmap/add"
        />
 
  
 初始时图片的全部叠加在一个位置,Activity中代码过多下面只粘出核心代码
 
 ObjectAnimator objectAnimator0 = ObjectAnimator.ofFloat(iv_images.get(0), "translationY", 0, -380F);
                ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(iv_images.get(1), "translationY", 0, 380F);
                ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(iv_images.get(2), "translationX", 0, -380F);
                ObjectAnimator objectAnimator3 = ObjectAnimator.ofFloat(iv_images.get(3), "translationX", 0, 380F);
                //
                ObjectAnimator objectAnimator4 = ObjectAnimator.ofFloat(iv_images.get(4), "translationX", 0, -300F);
                ObjectAnimator objectAnimator5 = ObjectAnimator.ofFloat(iv_images.get(4), "translationY", 0, -300F);
                //
                ObjectAnimator objectAnimator6 = ObjectAnimator.ofFloat(iv_images.get(5), "translationX", 0, 300F);
                ObjectAnimator objectAnimator7 = ObjectAnimator.ofFloat(iv_images.get(5), "translationY", 0, 300F);
                //
                ObjectAnimator objectAnimator8 = ObjectAnimator.ofFloat(iv_images.get(6), "translationX", 0, 300F);
                ObjectAnimator objectAnimator9 = ObjectAnimator.ofFloat(iv_images.get(6), "translationY", 0, -300F);
                //
                ObjectAnimator objectAnimator10 = ObjectAnimator.ofFloat(iv_images.get(7), "translationX", 0, -300F);
                ObjectAnimator objectAnimator11 = ObjectAnimator.ofFloat(iv_images.get(7), "translationY", 0, 300F);
                ObjectAnimator objectAnimator12 = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.5f);
                AnimatorSet animatorSet = new AnimatorSet();
                animatorSet.setDuration(1000);
                animatorSet.setInterpolator(new BounceInterpolator());
                animatorSet.playTogether(objectAnimator12,objectAnimator0,objectAnimator1,objectAnimator2,objectAnimator3,objectAnimator4,objectAnimator5,objectAnimator6,objectAnimator7,objectAnimator8,objectAnimator9,objectAnimator10,objectAnimator11);
                animatorSet.start();
如果想要自定义播放顺序可用:
 
 animatorSet.play(objectAnimator0).with(objectAnimator1).before(objectAnimator3).after(objectAnimator4);
                //替换下面
                animatorSet.playTogether(objectAnimator12, objectAnimator0, objectAnimator1, objectAnimator2, objectAnimator3, objectAnimator4, objectAnimator5, objectAnimator6, objectAnimator7, objectAnimator8, objectAnimator9, objectAnimator10, objectAnimator11);

 效果图  

 

 第三种情况既然动画是用在控件或者布局场景中的那么就会有用到事件的动作监听所以引入了AnimationListener
   
    对于实现动画的监听有两种方式一种只监听动画的结束动作
  
objectAnimator.addListener(new AnimatorListenerAdapter() {
            //只需实现这一个方法就好其它方法可以不用
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }
        });
 另一种是监听动画的所有动作,具体各个方法的作用简单的方法名已经说明
 
objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
 运用情景比如要删除场景中的一个控件并且删除带有动画效果如果单用View Animation中的设置透明度alpha虽然控件看不到但是控件依然占着ViewGroup的位置,这是就用到了属性动画中的动画结束时的动作了。
 
 布局文件
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="bruse.com.animationlearn.AnimationListenerActivity">

    <Button
        android:id="@+id/id_tvlistener"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_green_light"
        android:text="点我进行删除"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</RelativeLayout>
 主体Activity中的代码
 
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(btn_tv, "alph", 1.0f, 0.0f);
        objectAnimator.setDuration(500);
        objectAnimator.setInterpolator(new LinearInterpolator());
    
        //只需实现其中一个,实现所有方法用AnimationListener
        objectAnimator.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                ViewGroup parent = (ViewGroup) btn_tv.getParent();
                if (parent != null) {
                    parent.removeView(btn_tv);
                }

            }
        });
        objectAnimator.start();
 其中 objectAnimator.setInterpolator( new LinearInterpolator());是指动画的变化频率问题 new LinearInterpolator()或 new  BounceInterpolator (),简单的说是左右变动还是上下变动

 4、布局动画
  布局动画主要是通过LayoutTransition为布局容器设置动画,当容器中的控件位置或层次发生变化时起到过渡的效果。
   布局文件:
   
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".LayoutAnimationActivity">

    <Button
        android:id="@+id/id_add"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:background="@android:color/holo_green_light"
        android:text="添加"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</LinearLayout>
  Activity的核心代码
  
public class LayoutAnimationActivity extends AppCompatActivity implements View.OnClickListener {

    public static void launch(Activity activity) {
        Intent intent = new Intent(activity, LayoutAnimationActivity.class);
        activity.startActivity(intent);
    }

    private Button btn_add;
    private ViewGroup viewGroup;
    private GridLayout gridLayout;
    private int mVal;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_animation);
        iniViews();
    }

    private void iniViews() {
        btn_add = (Button) findViewById(R.id.id_add);
        viewGroup = (ViewGroup) findViewById(R.id.id_container);
        gridLayout = new GridLayout(this);
        gridLayout.setColumnCount(5);
        viewGroup.addView(gridLayout);
        //动画全部打开
        LayoutTransition transition = new LayoutTransition();
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "scaleX", 0.0f, 1.0f);
        transition.setAnimator(LayoutTransition.APPEARING, objectAnimator);
        gridLayout.setLayoutTransition(transition);
        btn_add.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        final Button button = new Button(this);
        button.setText(++mVal + "");
        gridLayout.addView(button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                gridLayout.removeView(button);
            }
        });
    }
}
 布局动画的一些属性:

   LayoutTransition.APPEARING 当一个ViewGroup中出现一个新的View时为这个View设置动画。

  LayoutTransition.DISAPPEARING 当一个ViewGroup中消除一个View时为这个View设置动画。

  LayoutTransition.CHANGE_APPEARING 当ViewGroup出现新的View时这个View对其它View造成的影响对其它View设置动画。

  LayoutTransition.CHANGE_DISAPPEARIN 当ViewGroup中消除一个View时这个View对其它View造成的影响对其它View设置动画。

  特别要注意的是这个动画是设置在哪个控件上的。

  效果图

                             

  

 基本目前常用的属性动画化都在这里了~~~~~~谢谢大家的支持和关注。最后别忘了关注公众号点击“二维码激情裸聊”

   

猜你喜欢

转载自blog.csdn.net/bruse_android/article/details/50930894