Android基础之动画资源浅析

2017-04-06 本文已影响122人 Reathin

动画

在开发中，为了让我们的App更加生动，我们往往会加入一些动画效果，下面我们来说说安卓中的动画。

安卓中提供了帧动画，补间动画，属性动画。下面来一一说明

帧动画

具体实现

第一：

新建一个 drawable 资源以animation-list 为根节点。子节点 < item />有两个属性，一个是 drawable 为当前帧的图像， duration 为当前帧保留时间。

第二：

给 ImageView 或者其他 View 设置关联 drawable。可以作为 View 的 background 或者ImageView 的 src。

第三：

在 java 代码中，通过 View.getBackground()；或者 ImageView.getDrawable()。得到已经关联 View 的 Drawable 对象，转成 AnimationDrawable 对象。然后调用 AnimationDrawable.start()方法开始动画。

也可以通过 java 代码动态加载 Drawable 资源，关联给 View，再开始动画。

AnimationDrawable drawable = (AnimationDrawable) ContextCompat.getDrawable(this, R.drawable.animation_list);
ImageView iv_anim = (ImageView) findViewById(R.id.iv_anim);
iv_anim.setImageDrawable(drawable);
drawable.start();

Forexample:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false"
    >
    <item
        android:drawable="@drawable/load_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/load_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/load_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/load_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/load_5"
        android:duration="200"/>
    <item
        android:drawable="@drawable/load_6"
        android:duration="400"/>
</animation-list>

vEnE73f.gif

补间动画

补间动画的类型

透明度

android:fromAlpha 开始的透明度
android:toAlpha 结束的透明度

类型：float (0.0透明-1.0不透明)

平移

android:fromXDelta="0" X轴开始的位移
android:toXDelta="320" X轴结束的位移
android:fromYDelta="0" Y轴开始的位移
android:toYDelta="0" Y轴结束的位移

旋转

android:fromDegrees="0" 开始的角度
android:toDegrees="360" 结束的角度

缩放

android:fromXScale="1" X轴开始的缩放倍数
android:fromYScale="1" Y轴开始的缩放倍数
android:toXScale="2.0" X轴结束的缩放倍数
android:toYScale="2.0" Y轴结束的缩放倍数

补间动画的动画资源的常用属性及实现

常用的属性：

android:repeatMode
用于设置动画的重复方式,可选择为 reverse(反向)或 restart(重新开始)
android:repeatCount
用于设置动画的重复次数,属性可以是代表重复次数的数值,也可以是 infinite(无限循环)(注意：在 AnimationSet 中设置无效)
android:duration
用于指定动画持续的时间,单位为毫秒
android:fillAfter
控制动画是否停留在最后一帧（在 xml 配置中，只有 AnimationSet 才支持该属性）
android:interpolator
用于控制动画的变化速度,使用动画效果可以匀速,加速,减速或抛物线速度等各种速度变化具体见下表 Android:interpolotor 属性的常用属性值。经过测试，这个属性只有在 Java 代码中设置才有效果：
animation.setInterpolator(this,android.R.anim.bounce_interpolator);//弹球效果

android:pivotX="50%"
android:pivotY="50%"
用于控制旋转/缩放的中心，(类型：百分比)

实现方式：

//Java代码创建动画
ScaleAnimation animation = new ScaleAnimation();
//xml 加载动画
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_1);    
iv_anim.startAnimation(animation);//开始一个动画
iv_anim.clearAnimation();//清除该控件的动画效果

补间动画的Java代码实现

透明动画：

fromAlpha：开始透明度
toAlpha：结束透明度。取值范围（全透明0.0f~不透明1.0f）

new AlphaAnimation(fromAlpha, toAlpha)

例如：从不透明都接近透明

new AlphaAnimation(1.0f, 0.1f);

缩放动画：

fromX：开始缩放的X轴倍数。如1.0f：本身大小；如2.0f：从自己两倍开始
toX：结束缩放的X轴倍数。同上...
fromY：始缩放的Y轴倍数。
toY：结束缩放的Y轴倍数。
pivotXType：X轴缩放中心点类型；可选值有：
Animation.RELATIVE_TO_SELF相对自己--常用
Animation.RELATIVE_TO_PARENT相对父窗体
Animation.ABSOLUTE 绝对的---不常用
pivotXValue：在pivotXType的基础上，X轴缩放中心的位置。如：0.5f：缩放中心就在控件的一半的位置。如果是0.0f，则会在控件本身的左边位置
pivotYType：X轴缩放中心点类型；同上 ...
pivotYValue：在pivotYType的基础上，Y轴缩放中心的位置。

new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);

例如：从控件中心放大一倍

new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f);

旋转动画：

fromDegrees：开始旋转的角度；三点方向为0度，六点方向为90度。
toDegrees：结束旋转的角度
pivotXType：参照缩放动画
pivotXValue：参照缩放动画
pivotYType：参照缩放动画
pivotYValue：参照缩放动画

new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);

例如：从控件中心顺时针旋转180度

new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0.5f);

平移动画：

fromXType：开始平移的X轴参照位置，一般使用Animation.RELATIVE_TO_SELF
fromXValue：X轴平移的开始倍数。在fromXType的基础上。
toXType：结束平移的X轴参照位置
toXValue：X轴平移的结束倍数。
fromYType：开始平移的Y轴参照位置
fromYValue：Y轴平移的开始倍数。
toYType：结束平移的Y轴参照位置
toYValue：Y轴平移的结束倍数。

new TranslateAnimation(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);

例如：从控件自己的位置开始，向下移动自己的一倍距离。

new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0,
                    Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f);

补间动画的监听方法

通过 Animation.setAnimationListener 的方法。传入 AnimationListener 的接口对象。实现接口的三个方法。

@Override
public void onAnimationStart(Animation animation) {
    //动画开始的时候调用
}
            
//注意：如果是 AnimationSet 组合动画，则此回调不执行。
@Override
public void onAnimationRepeat(Animation animation) {
    //动画重复的时候调用
}
@Override
public void onAnimationEnd(Animation animation) {
    //动画结束的时候调用
}

属性动画

属性动画介绍

自Android 3.0版本开始，系统给我们提供了一种全新的动画模式，属性动画(property animation)，它的功能非常强大，弥补了之前补间动画的一些缺陷，几乎是可以完全替代掉补间动画了。

属性动画与补间动画的区别

最大的区别是补间动画就算控件移动到任何位置，控件本身位置还是不变。
而属性动画是直接改变控件的布局位置。

属性动画资源文件的常用属性

关键：propertyName 属性。
动画类型名字

"rotation" 自身平面旋转
"rotationX" 3D翻转 X轴不变
"rotationY" 3D翻转 Y轴不变
"alpha" 透明度
"scaleX" 缩放X 轴
"scaleY" 缩放Y 轴
"translationY" Y轴上横向移动
"translationX" X轴上横向移动

属性动画的具体实现

ObjectAnimator oa = ObjectAnimator.ofFloat(target, propertyName, values);

例如：

ObjectAnimator oa = ObjectAnimator.ofFloat(id_ball, "rotation", 0, 180);
oa.setDuration(5000)//动画执行的时间
oa.setRepeatCount(1);//动画的重复次数
oa.setRepeatMode(ObjectAnimator.REVERSE);//动画的重复方式
oa.start();//开始动画

多个属性动画一起执行方式1：

PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 2.0f);
PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 2.0f);
PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0.2f);
ObjectAnimator.ofPropertyValuesHolder(id_ball, pvh1, pvh2, pvh3 ).setDuration(4000).start();

多个属性动画一起执行的方式2：

ObjectAnimator anim = ObjectAnimator.ofFloat(id_ball, "null", 1.0F, 0.1F, 1).setDuration(4000);
anim.addUpdateListener(new AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //得到变化后的value大小
        float cVal = (Float) animation.getAnimatedValue();
        id_ball.setAlpha(cVal);//改变控件的透明度
        id_ball.setScaleX(cVal);//改变控件的缩放
        id_ball.setScaleY(cVal);//***
        id_ball.setTranslationX(id_ball.getWidth() * (1 - cVal));
    }});
anim.start();

codesample-1490721925652.gif

前几天在gihub上看到的一个效果，其实就是用的属性动画实现的