笔记29--第三种动画：属性动画

最新推荐文章于 2024-09-07 14:54:28 发布

温水煮青蛙come-on

最新推荐文章于 2024-09-07 14:54:28 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/mwj_88/article/details/26523315

版权

建议去读原文：http://blog.csdn.net/singwhatiwanna/article/details/17639987

属性动画：可以对对象的属性进行动画，动画默认时间间隔是300ms，默认帧率10ms/帧。其可以达到的效果是：在一个时间间隔内完成对象从一个属性值到另一个属性值的改变。属性动画是android3.0新加入的特性(API11)，为了支持之前的版本，使用开源动画库：nineoldandroids。

说到属性动画不得不提时间插值器(TimeInterpolator)和估值算法(TypeEvaluator)。

TimeInterpolator中文翻译为时间插值器，它的作用是根据时间流逝的百分比来计算出当前属性值改变的百分比，系统预置的有LinearInterpolator（线性插值器：匀速动画）、AccelerateDecelerateInterpolator（加速减速插值器：动画两头慢中间快）和DecelerateInterpolator（减速插值器：动画越来越慢）等；TypeEvaluator的中文翻译为类型估值算法，它的作用是根据当前属性改变的百分比来计算改变后的属性值，系统预置的有IntEvaluator（针对整型属性）、FloatEvaluator（针对浮点型属性）和ArgbEvaluator（针对Color属性）。

插值器和估值算法除了系统提供的外，我们还可以自定义，实现方式也很简单，因为插值器和估值算法都是一个接口，且内部都只有一个方法，我们只要派生一个类实现接口就可以了，然后你就可以做出千奇百怪的动画效果。具体一点就是：自定义插值器需要实现Interpolator或者TimeInterpolator，自定义估值算法需要实现TypeEvaluator。还有就是如果你对其他类型（非int、float、color）做动画，你必须要自定义类型估值算法。

nineoldandroids介绍：

其功能和android.animation.*中的类的功能完全一致，使用方法完全一样，只要我们用nineoldandroids来编写动画，就可以在所有的Android系统上运行。比较常用的几个动画类是：ValueAnimator、ObjectAnimator和AnimatorSet，其中ObjectAnimator继承自ValueAnimator，AnimatorSet是动画集，可以定义一组动画。

例子1：改变一个对象的背景色属性，典型的情形是改变View的背景色，下面的动画可以让背景色在3秒内实现从0xFFFF8080到0xFF8080FF的渐变，并且动画会无限循环而且会有反转的效果

ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", /*Red*/0xFFFF8080, /*Blue*/0xFF8080FF);  
colorAnim.setDuration(3000);  
colorAnim.setEvaluator(new ArgbEvaluator());  
colorAnim.setRepeatCount(ValueAnimator.INFINITE);  
colorAnim.setRepeatMode(ValueAnimator.REVERSE);  
colorAnim.start();

例子2：动画集合，5秒内对View的旋转、平移、缩放和透明度都进行了改变

AnimatorSet set = new AnimatorSet();  
set.playTogether(  
    ObjectAnimator.ofFloat(myView, "rotationX", 0, 360),  
    ObjectAnimator.ofFloat(myView, "rotationY", 0, 180),  
    ObjectAnimator.ofFloat(myView, "rotation", 0, -90),  
    ObjectAnimator.ofFloat(myView, "translationX", 0, 90),  
    ObjectAnimator.ofFloat(myView, "translationY", 0, 90),  
    ObjectAnimator.ofFloat(myView, "scaleX", 1, 1.5f),  
    ObjectAnimator.ofFloat(myView, "scaleY", 1, 0.5f),  
    ObjectAnimator.ofFloat(myView, "alpha", 1, 0.25f, 1)  
);  
set.setDuration(5 * 1000).start();

例子3：一个采用nineoldandroids实现的稍微复杂点的动画

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
    <Button  
        android:id="@+id/menu"  
        style="@style/MenuStyle"  
        android:background="@drawable/menu" />  
  
    <Button  
        android:id="@+id/item1"  
        style="@style/MenuItemStyle"  
        android:background="@drawable/circle1"  
        android:visibility="gone" />  
  
    <Button  
        android:id="@+id/item2"  
        style="@style/MenuItemStyle"  
        android:background="@drawable/circle2"  
        android:visibility="gone" />  
  
    <Button  
        android:id="@+id/item3"  
        style="@style/MenuItemStyle"  
        android:background="@drawable/circle3"  
        android:visibility="gone" />  
  
    <Button  
        android:id="@+id/item4"  
        style="@style/MenuItemStyle"  
        android:background="@drawable/circle4"  
        android:visibility="gone" />  
  
    <Button  
        android:id="@+id/item5"  
        style="@style/MenuItemStyle"  
        android:background="@drawable/circle5"  
        android:visibility="gone" />  
</FrameLayout>

代码：

public class MainActivity extends Activity implements OnClickListener {  
  
    private static final String TAG = "MainActivity";  
  
    private Button mMenuButton;  
    private Button mItemButton1;  
    private Button mItemButton2;  
    private Button mItemButton3;  
    private Button mItemButton4;  
    private Button mItemButton5;  
  
    private boolean mIsMenuOpen = false;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        initView();  
    }  
  
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
    private void initView() {  
        mMenuButton = (Button) findViewById(R.id.menu);  
        mMenuButton.setOnClickListener(this);  
  
        mItemButton1 = (Button) findViewById(R.id.item1);  
        mItemButton1.setOnClickListener(this);  
  
        mItemButton2 = (Button) findViewById(R.id.item2);  
        mItemButton2.setOnClickListener(this);  
  
        mItemButton3 = (Button) findViewById(R.id.item3);  
        mItemButton3.setOnClickListener(this);  
  
        mItemButton4 = (Button) findViewById(R.id.item4);  
        mItemButton4.setOnClickListener(this);  
  
        mItemButton5 = (Button) findViewById(R.id.item5);  
        mItemButton5.setOnClickListener(this);  
    }  
  
    @Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        mMenuButton.performClick();  
        getMenuInflater().inflate(R.menu.main, menu);  
        return false;  
    }  
  
    @Override  
    public void onClick(View v) {  
        if (v == mMenuButton) {  
            if (!mIsMenuOpen) {  
                mIsMenuOpen = true;  
                doAnimateOpen(mItemButton1, 0, 5, 300);  
                doAnimateOpen(mItemButton2, 1, 5, 300);  
                doAnimateOpen(mItemButton3, 2, 5, 300);  
                doAnimateOpen(mItemButton4, 3, 5, 300);  
                doAnimateOpen(mItemButton5, 4, 5, 300);  
            } else {  
                mIsMenuOpen = false;  
                doAnimateClose(mItemButton1, 0, 5, 300);  
                doAnimateClose(mItemButton2, 1, 5, 300);  
                doAnimateClose(mItemButton3, 2, 5, 300);  
                doAnimateClose(mItemButton4, 3, 5, 300);  
                doAnimateClose(mItemButton5, 4, 5, 300);  
            }  
        } else {  
            Toast.makeText(this, "你点击了" + v, Toast.LENGTH_SHORT).show();  
        }  
  
    }  
  
    /** 
     * 打开菜单的动画 
     * @param view 执行动画的view 
     * @param index view在动画序列中的顺序 
     * @param total 动画序列的个数 
     * @param radius 动画半径 
     */  
    private void doAnimateOpen(View view, int index, int total, int radius) {  
        if (view.getVisibility() != View.VISIBLE) {  
            view.setVisibility(View.VISIBLE);  
        }  
        double degree = Math.PI * index / ((total - 1) * 2);  
        int translationX = (int) (radius * Math.cos(degree));  
        int translationY = (int) (radius * Math.sin(degree));  
        Log.d(TAG, String.format("degree=%f, translationX=%d, translationY=%d",  
                degree, translationX, translationY));  
        AnimatorSet set = new AnimatorSet();  
        //包含平移、缩放和透明度动画   
        set.playTogether(  
                ObjectAnimator.ofFloat(view, "translationX", 0, translationX),  
                ObjectAnimator.ofFloat(view, "translationY", 0, translationY),  
                ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f),  
                ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f),  
                ObjectAnimator.ofFloat(view, "alpha", 0f, 1));  
        //动画周期为500ms   
        set.setDuration(1 * 500).start();  
    }  
  
    /** 
     * 关闭菜单的动画 
     * @param view 执行动画的view 
     * @param index view在动画序列中的顺序 
     * @param total 动画序列的个数 
     * @param radius 动画半径 
     */  
    private void doAnimateClose(final View view, int index, int total,  
            int radius) {  
        if (view.getVisibility() != View.VISIBLE) {  
            view.setVisibility(View.VISIBLE);  
        }  
        double degree = Math.PI * index / ((total - 1) * 2);  
        int translationX = (int) (radius * Math.cos(degree));  
        int translationY = (int) (radius * Math.sin(degree));  
        Log.d(TAG, String.format("degree=%f, translationX=%d, translationY=%d",  
                degree, translationX, translationY));  
        AnimatorSet set = new AnimatorSet();  
      //包含平移、缩放和透明度动画   
        set.playTogether(  
                ObjectAnimator.ofFloat(view, "translationX", translationX, 0),  
                ObjectAnimator.ofFloat(view, "translationY", translationY, 0),  
                ObjectAnimator.ofFloat(view, "scaleX", 1f, 0f),  
                ObjectAnimator.ofFloat(view, "scaleY", 1f, 0f),  
                ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));  
        //为动画加上事件监听，当动画结束的时候，我们把当前view隐藏   
        set.addListener(new AnimatorListener() {  
            @Override  
            public void onAnimationStart(Animator animator) {  
            }  
  
            @Override  
            public void onAnimationRepeat(Animator animator) {  
            }  
  
            @Override  
            public void onAnimationEnd(Animator animator) {  
                view.setVisibility(View.GONE);  
            }  
  
            @Override  
            public void onAnimationCancel(Animator animator) {  
            }  
        });  
  
        set.setDuration(1 * 500).start();  
    }  
}

下面分析下属性动画的原理：

属性动画要求动画作用的对象提供该属性的get和set方法，属性动画根据你传递的该熟悉的初始值和最终值，以动画的效果多次去调用set方法，每次传递给set方法的值都不一样，确切来说是随着时间的推移，所传递的值越来越接近最终值。总结一下，你对object的属性xxx做动画，如果想让动画生效，要同时满足两个条件：

1. object必须要提供setXxx方法，如果动画的时候没有传递初始值，那么还要提供getXxx方法，因为系统要去拿xxx属性的初始值（如果这条不满足，程序直接Crash）

2. object的setXxx对属性xxx所做的改变必须能够通过某种方法反映出来，比如会带来ui的改变啥的（如果这条不满足，动画无效果但不会Crash）

那么为什么我们对Button的width属性做动画没有效果？这是因为Button内部虽然提供了getWidth和setWidth方法，但是这个setWidth方法并不是改变视图的大小，它是TextView新添加的方法，View是没有这个setWidth方法的，由于Button继承了TextView，所以Button也就有了setWidth方法。getWidth的确是获取View的宽度的，而setWidth是TextView和其子类的专属方法，它的作用不是设置View的宽度，而是设置TextView的最大宽度和最小宽度的，这个和TextView的宽度不是一个东西，具体来说，TextView的宽度对应Xml中的android:layout_width属性，而TextView还有一个属性android:width，这个android:width属性就对应了TextView的setWidth方法。总之，TextView和Button的setWidth和getWidth干的不是同一件事情，通过setWidth无法改变控件的宽度，所以对width做属性动画没有效果。

针对上述问题，Google告诉我们有3中解决方法：

1. 给你的对象加上get和set方法，如果你有权限的话

2. 用一个类来包装原始对象，间接为其提供get和set方法

3. 采用ValueAnimator，监听动画过程，自己实现属性的改变

对任何属性做动画

针对上面提出的三种解决方法，这里会给出具体的介绍：

给你的对象加上get和set方法，如果你有权限的话

这个的意思很好理解，如果你有权限的话，加上get和set就搞定了，但是很多时候我们没权限去这么做，比如本文开头所提到的问题，你无法给Button加上一个合乎要求的setWidth方法，因为这是Android SDK内部实现的。这个方法最简单，但是往往是不可行的，这里就不对其进行更多分析了。

用一个类来包装原始对象，间接为其提供get和set方法

这是一个很有用的解决方法，是我最喜欢用的，因为用起来很方便，也很好理解，下面将通过一个具体的例子来介绍它

private void performAnimate() {  
    ViewWrapper wrapper = new ViewWrapper(mButton);  
    ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(5000).start();  
}  
  
@Override  
public void onClick(View v) {  
    if (v == mButton) {  
        performAnimate();  
    }  
}  
  
private static class ViewWrapper {  
    private View mTarget;  
  
    public ViewWrapper(View target) {  
        mTarget = target;  
    }  
  
    public int getWidth() {  
        return mTarget.getLayoutParams().width;  
    }  
  
    public void setWidth(int width) {  
        mTarget.getLayoutParams().width = width;  
        mTarget.requestLayout();  
    }  
}

上述代码5s内让Button的宽度增加到500px，为了达到这个效果，我们提供了ViewWrapper类专门用于包装View，具体到本例是包装Button，然后我们对ViewWrapper的width熟悉做动画，并且在setWidth方法中修改其内部的target的宽度，而target实际上就是我们包装的Button，这样一个间接属性动画就搞定了。上述代码同样适用于一个对象的其他属性。

属性动画中的插值器（Interpolator）和估值器（TypeEvaluator）很重要，它是实现非匀速动画的重要手段，你应该试着搞懂它，最好你还能够自定义它们