Android 属性动画特效

最新推荐文章于 2022-05-04 10:37:59 发布

antimage08

最新推荐文章于 2022-05-04 10:37:59 发布

阅读量527

点赞数

本文链接：https://blog.csdn.net/antimage08/article/details/50903894

版权

在 Android 3.0 之前已有的动画框架 Animation 存在一些局限性—— 动画改变的只是显示，并不能响应事件（相比属性动画，视图动画的一个非常大的缺陷就是不具备交互性，当某个元素发生视图动画后，其响应事件的位置依然在动画前的地方，所以视图动画只能做普通的动画效果，避免交互的发生。它的优点是效率比较高使用方便）。

本文要实现的效果如下：

在这之前先简单的介绍一下属性动画。

1. 属性动画涉及的 API ：

（1）Animator ：它提供了创建属性动画的基类，基本上不会直接使用该类。通常该类只用于被继承并重写它的相关方法。

（2） ValueAnimator ：属性动画主要的时间引擎，它负责计算各个帧的属性值。属性动画主要有两方面组成：

——> 1）计算各帧的相关属性值；

——> 2）为指定对象设置这些计算后的值；

ValueAnimator 只负责第一方面内容，因此程序员必须根据 ValueAnimator 计算并监听值更新来更新对象的相关属性值。使用 ValueAnimator 需要注册 AnimatorUpdateListener 监听器。

（3）ObjectAnimator ：它是 ValueAnimator 的子类，允许程序员对指定对象的属性执行动画。在实际应用中，它比 ValueAnimator 使用起来更加简单。使用 ObjectAnimator 就不需要注册 AnimatorUpdateListener 监听器了。

（4） AnimatorSet ：它是 Animator 的子类，组合多个 Animator ，并指定多个 Animator 是按次序播放，还是同时播放。

在 Animator 框架中使用最多的就是 AnimatorSet 和 ObjectAnimator ，使用 ObjectAnimator 进行更精细化的控制，只控制一个对象的一个属性值，而使用多个 ObjectAnimator 组合到 AnimatorSet 形成一个动画。属性动画通过调用属性的 get 、set 方法来真实地控制一个 View 的属性值，因此强大的动画框架，基本可以实现所有的动画效果。

2. 使用属性动画的步骤如下：

（1）创建 ObjectAnimator 或 ValueAnimator 对象——即可从 XML 资源文件加载该动画资源，也可以直接调用 ObjectAnimator 或 ValueAnimator 的静态工厂方法来创建动画。

——> 静态方法 ofInt() 、ofFloat() 或者 ofObject()；

——> 注意使用 ObjectAnimator 的静态方法创建 ObjectAnimator 对象时，需要指定具体的对象，以及对象的属性名。如： ObjectAnimator animator0 = ObjectAnimator.ofFloat(foo, "alpha", 0.5F, 1F);

（2）根据需要为 Animator 对象设置属性。

（3）如果需要监听 Animator 的动画开始事件、动画结束事件、动画重复事件、动画值改变事件，并根据事件提供相应的处理代码，则应该为 Animator 对象设置事件监听器。

（4）如果有多个动画需要按次序或者同时播放，则应使用 AnimatorSet 组合这些动画。

（5）调用 Animator 对象的 start() 方法启动动画。

ObjectAnimator

ObjectAnimator 参数包括一个对象和对象的属性名，但这个属性必须有 get() 和 set() 函数，内部会通过 Java 反射机制来调用 set 函数修改对象属性。

前文的使用 ObjectAnimator animator0 = ObjectAnimator.ofFloat(foo, "alpha", 0.5F, 1F); 创建一个 ObjectAnimator 对象。其中第一个参数时需要操纵的 View；第二个参数则是操纵的属性；而最后一个参数是一个可变数组参数，需要传进去该属性变化的一个取值过程。

第二个参数的属性值如下：

（1）translationX 和 translationY：这两个属性作为一种增量来控制着 View 对象从它布局容器的左上角坐标偏移的位置。

（2）rotation 、rotationX 和 rotationY：这三个属性控制着 View 对象围绕支点进行 2D 和 3D 旋转。

（3）scaleX 和 scaleY：这两个属性控制着 View 对象围绕它的支点进行 2D 缩放。

（4）pivotX 和 pivotY：这两个属性控制着 View 对象的支点位置，围绕这个支点进行旋转和缩放变换处理。默认情况下，该支点的位置就是 View 对象的中心点。

（5）x 和 y：它描述了 View 对象在它的容器中的最终位置，它是最初的左上角坐标和 translationX 、 translationY 值得累计和。

（6）alpha：它表示 View 对象的 alpha 透明度。默认值为 1 （不透明），0 代表完全透明（不可见）。

属性的 get() 和 set() 方法也可以从如下两个方案来解决：

——> 通过自定义一个属性或者包装类，来间接地给这个属性增加 get() 、set() 方法。

——> 通过 ValueAnimator 来实现。

AnimatorSet

对于一个属性同时作用多个属性动画效果，可以使用 PropertyValuesHolder 实现这样的效果，但是通过 AnimatorSet 不仅能实现这样的效果，同行也能实现更为精确的顺序控制。代码如下：

 ObjectAnimator animator1 = ObjectAnimator.ofFloat(foo, "translationY", -200F, 0);
 ObjectAnimator animator1 = ObjectAnimator.ofFloat(foo, "translationX", -200F, 0);
 AnimatorSet set = new AnimatorSet();
 set.setDuration(500);
 set.setInterpolator(new BounceInterpolator());
 set.playTogether(animator1, animator2);
 set.start();

在属性动画中， AnimatorSet 正是通过 playTogether()、playSequentially()、animSet.play().with()、before()、after()这些方法来控制多个动画的协同工作方式。

第一个效果代码：

forclick_layout.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_b"
        android:src="@drawable/b"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_c"
        android:src="@drawable/c"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_d"
        android:src="@drawable/d"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_e"
        android:src="@drawable/e"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_a"
        android:src="@drawable/a"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

PropertyTest.java :

package com.imooc.anim;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

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

public class PropertyTest extends Activity implements View.OnClickListener {

    private int[] mRes = {R.id.imageView_a, R.id.imageView_b, R.id.imageView_c,
            R.id.imageView_d, R.id.imageView_e};
    private List<ImageView> mImageViews = new ArrayList<>();
    private boolean mFlag = true;

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

        int sum = mRes.length;
        for (int i = 0; i < sum; i++) {
            ImageView imageView = (ImageView) findViewById(mRes[i]);
            imageView.setOnClickListener(this);
            mImageViews.add(imageView);
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.imageView_a:
                if (mFlag) {
                    startAnim();
                } else {
                    closeAnim();
                }
                break;
            case R.id.imageView_b:
                Toast.makeText(PropertyTest.this, "相机", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView_c:
                Toast.makeText(PropertyTest.this, "音乐", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView_d:
                Toast.makeText(PropertyTest.this, "定位", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView_e:
                Toast.makeText(PropertyTest.this, "夜晚", Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private void closeAnim() {
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(mImageViews.get(0),
                "alpha", 0.5F, 1F);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageViews.get(1),
                "translationY", 200F, 0);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageViews.get(2),
                "translationX", 200F, 0);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mImageViews.get(3),
                "translationY", -200F, 0);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(mImageViews.get(4),
                "translationX", -200F, 0);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(animator0, animator1, animator2, animator3, animator4);
        set.start();
        mFlag = true;
    }

    private void startAnim() {
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(
                mImageViews.get(0),
                "alpha",
                1F,
                0.5F);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(
                mImageViews.get(1),
                "translationY",
                200F);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(
                mImageViews.get(2),
                "translationX",
                200F);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(
                mImageViews.get(3),
                "translationY",
                -200F);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(
                mImageViews.get(4),
                "translationX",
                -200F);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(
                animator0,
                animator1,
                animator2,
                animator3,
                animator4);
        set.start();
        mFlag = false;
    }
}

第二个效果的实现：

drop.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:onClick="llClick"
        android:background="@android:color/holo_blue_bright"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/app_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="left"
            android:text="Click Me"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/hidden_view"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@android:color/holo_orange_light"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="gone">

        <ImageView
            android:src="@drawable/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

        <TextView
            android:id="@+id/tv_hidden"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20sp"
            android:text="我是隐藏着的！" />
    </LinearLayout>
</LinearLayout>

点击上面的 LinearLayout 时，需要获取到隐藏的 LinearLayout 最终需要达到的一个高度，即是目标值，通过将布局文件文件中的 dp 值转化为像素值即可。

        // 获取像素密度
        mDensity = getResources().getDisplayMetrics().density;
        // 获取布局的高度
        mHiddenViewMeasuredHeight = (int) (mDensity * 40 + 0.5);

40 就是在 XML 文件中定义的布局高度。

需要使用 ValueAnimator 来创建一个从 0 到目标值的数值发生器，并由此来改变 View 的布局属性。

 ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.addUpdateListener(
                new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int value = (Integer) valueAnimator.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams =
                        view.getLayoutParams();
                layoutParams.height = value;
                view.setLayoutParams(layoutParams);
            }
        });

DropTest.java :

package com.imooc.anim;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class DropTest extends Activity {

    private LinearLayout mHiddenView;
    private float mDensity;
    private int mHiddenViewMeasuredHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.drop);
        mHiddenView = (LinearLayout) findViewById(R.id.hidden_view);
        // 获取像素密度
        mDensity = getResources().getDisplayMetrics().density;
        // 获取布局的高度
        mHiddenViewMeasuredHeight = (int) (mDensity * 40 + 0.5);
    }

    public void llClick(View view) {
        if (mHiddenView.getVisibility() == View.GONE) {
            // 打开动画
            animateOpen(mHiddenView);
        } else {
            // 关闭动画
            animateClose(mHiddenView);
        }
    }

    private void animateOpen(final View view) {
        view.setVisibility(View.VISIBLE);
        ValueAnimator animator = createDropAnimator(
                view,
                0,
                mHiddenViewMeasuredHeight);
        animator.start();
    }

    private void animateClose(final View view) {
        int origHeight = view.getHeight();
        ValueAnimator animator = createDropAnimator(view, origHeight, 0);
        animator.addListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }
        });
        animator.start();
    }

    private ValueAnimator createDropAnimator(
            final View view, int start, int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.addUpdateListener(
                new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int value = (Integer) valueAnimator.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams =
                        view.getLayoutParams();
                layoutParams.height = value;
                view.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }
}

其中：AnimatorUpdateListener 中监听的是数值变换，从而完成动画的变换；一个完整的动画具有 Start、Repeat、End 、Cancel 四个过程，通过 AnimatorListener 接口可以很方便地监听到这四个事件。AnimatorListener 接口的源码如下：

  public interface AnimatorListener {
        void onAnimationStart(Animator var1);

        void onAnimationEnd(Animator var1);

        void onAnimationCancel(Animator var1);

        void onAnimationRepeat(Animator var1);
    }

但是，大部分的时候，我们都只关心 onAnimationEnd 事件，所以 Android 也提供了一个 AnimatorListenerAdapter 来让我们选择必要的事件进行监听，如文中的代码：

    animator.addListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }
        });

antimage08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 属性动画特效

在 Android 3.0 之前已有的动画框架 Animation 存在一些局限性—— 动画改变的只是显示，并不能响应事件（相比属性动画，视图动画的一个非常大的缺陷就是不具备交互性，当某个元素发生视图动画后，其响应事件的位置依然在动画前的地方，所以视图动画只能做普通的动画效果，避免交互的发生。它的优点是效率比较高使用方便）。本文要实现的效果如下：在这之前先简单的介绍
复制链接

扫一扫