Android动画简介之View Animation

澹台承
2023-12-01

Android动画简介之View Animation

​ 在Android中主要有两种类型的动画,View Animation(视图动画)和Proerty Animation(属性动画)。其中,View Animation包括Tween Animation(补间动画)和Frame Animation(逐帧动画)。Proerty Animation包括Value Animation 和Object Animation 。

视图动画

​ Android的视图动画由五钟类型组成:alpha,scale,translate,rotate,set。

利用xml标签定义Tween Animation

标签

标签含义
alpha渐变透明度
scale渐变尺寸伸缩
translate位置变换移动
rotate旋转变换动画
set动画集

通用的标签属性

标签属性含义
fillAfter动画结束时是否保持动画结束时的状态
fillBefore动画结束时是否还原到初始状态 默认ture
fillEnabled同fillBefore
repeatCount动画重复次数
repeatMode动画重复的类型 restart:重放 reverse:倒放
interpolator设置插值器
duration动画运行的时间(以毫秒为单位)
startOffset动画运行前的延迟(以毫秒为单位)
zAdjustment允许在动画播放期间,调整播放内容在Z轴方向的顺序。
①normal(0):正在播放的动画内容保持当前的Z轴顺序,
②top(1):在动画播放期间,强制把当前播放的内容放到其他内容的上面;
③bottom(-1):在动画播放期间,强制把当前播放的内容放到其他内容之下
background动画背后的特殊背景颜色
detachWallpaper窗口动画的特殊选项:如果此窗口位于墙纸之上,则不要使用它设置墙纸动画。
showWallpaper窗口动画的特殊选项:运行此动画时显示后面的墙纸。
hasRoundedCorners窗口动画的特殊选项:窗口是否应具有圆角

Alpha的标签属性

标签属性含义
fromAlpha开始的透明度
toAlpha结束的透明度

示例:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="3000"
    android:fillBefore="false"
    >
</alpha>

Scale的标签属性

标签属性含义
fromXScale动画开始,控件在X轴上相对自身的缩放比例
toXScale动画结束,控件在X轴上相对自身的缩放比例
fromYScale动画开始,控件在Y轴上相对自身的缩放比例
toYScale动画结束,控件在Y轴上相对自身的缩放比例
pivotX缩放起始点,X坐标 可取50,50%,50%p 表示x=50,控件的一半,父控件的一半的数值
pivotY缩放起始点,Y坐标 可取50,50%,50%p 表示y=50,控件的一半,父控件的一半的数值

示例

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700"
    android:fillAfter="true"
    android:fillBefore="false"
    android:fillEnabled="false"
    android:repeatCount="2"
    android:repeatMode="reverse"
    />

Translate的标签属性

标签属性含义
fromXDelta起始点X的坐标 可取50,50%,50%p
toXDelta终点X的坐标 可取50,50%,50%p
fromYDelta起始点Y的坐标 可取50,50%,50%p
toYDelta终点Y的坐标 可取50,50%,50%p

示例:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="0"
    android:fromYDelta="0"
    android:toYDelta="500"
    android:duration="3000"
    android:fillAfter="true"
    >
</translate>

Rotate标签属性

标签属性含义
fromDegrees动画开始旋转的角度
toDegrees动画结束旋转的角度
pivotX旋转中心点X的位置 可取50,50%,50%p 表示X=50,控件的一半,父控件的一半的数值
pivotY旋转中心点Y的位置 可取50,50%,50%p 表示Y=50,控件的一半,父控件的一半的数值

示例

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-720"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"
    >
</rotate>

Set标签属性

标签属性含义
shareInterpolator共享插值器
fillBefore同上
fillAfter同上
duration同上
startOffset同上
repeatMode同上

示例

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <scale
        android:fromXScale="0.0"
        android:toXScale="2.0"
        android:fromYScale="0.0"
        android:toYScale="2.0"
        android:pivotY="50%"
        android:pivotX="50%"
        />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

使用代码实现Tween Animation

alpha:

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0F,0.1F);
alphaAnimation.setDuration(3000);
alphaAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(alphaAnimation);

scale:

ScaleAnimation scaleAnimation = new ScaleAnimation(0.0F,1.4F,0.0F,1.4F,
        Animation.RELATIVE_TO_PARENT,0.5F, Animation.RELATIVE_TO_PARENT,0.5F);
scaleAnimation.setDuration(700);
findViewById(R.id.tv).startAnimation(scaleAnimation);

translate:

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);
translateAnimation.setDuration(2000);
translateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(translateAnimation);

rotate:

RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);
rotateAnimation.setDuration(2000);
rotateAnimation.setFillBefore(true);
findViewById(R.id.tv).startAnimation(rotateAnimation);

set:

RotateAnimation rotateAnimation = new RotateAnimation(0,-650,Animation.RELATIVE_TO_SELF,0.5F,Animation.RELATIVE_TO_SELF,0.5F);

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80,Animation.ABSOLUTE,0,Animation.ABSOLUTE,-80);

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setDuration(3000);
animationSet.setFillAfter(true);
findViewById(R.id.tv).startAnimation(animationSet);

从上面的例子来看,基本上View Animation动画都可以根据里面的构造方法进行简单的创建,实际使用上并不难理解。

Frame Animation的实现

xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/image01" android:duration="500"/>
    <item android:drawable="@drawable/image02" android:duration="500"/>
    <item android:drawable="@drawable/image03" android:duration="500"/>
</animation-list>

java:

imageView_2 = findViewById(R.id.image_2);
AnimationDrawable animationDrawable1 = new AnimationDrawable();
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_1 ),200);
animationDrawable1.addFrame(getResources().getDrawable(R.drawable.iron_2 ),200);
//...
animationDrawable1.setOneShot(true);
imageView_2.setImageDrawable(animationDrawable1);
animationDrawable1.start();

运行:

    Button button = (Button) findViewById(R.id.bt_001);
    button.setBackgroundResource(R.drawable.frame_animation);//把Drawable设置为button的背景
    //拿到这个我们定义的Drawable,实际也就是AnimationDrawable
    AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
    animationDrawable.start();//开启动画

由上可见,逐帧动画简单来说就是一帧一帧地播放图片,总体来说比较简单。值得注意的是由于是一张张图片进行播放,所以建议图片不要太多太大。

值器

​ 从上面的视图动画的效果来看,我们已经能够实现动画的播放,但是有时候我们看见别人的动画播放的时候,播放的速度并不是线性的,而是有的开始快然后慢慢减速到停止。这种又是如何实现的呢?这就是这一章主角–Interpolator(插值器)

​ 插值器的设置可以通过代码setInterpolator()设置可以通过xml中的interpolator标签属性进行设置。下面我们来看看Android都有哪些插值器供我们选择。

插值器xml引用效果
AccelerateDecelerateInterpolator@android:anim/accelerate_decelerate_interpolator加速减速插值器
AccelerateInterpolator@android:anim/accelerate_interpolator加速插值器
DecelerateInterpolator@android:anim/decelerate_interpolator减速插值器
BounceInterpolator@android:anim/bounce_interpolator弹跳插值器
OvershootInterpolator@android:anim/overshoot_interpolator结束偏移插值器
AnticipateInterpolator@android:anim/anticipate_interpolator初始偏移插值器
LinearInterpolator@android:anim/linear_interpolator线性差值器
AnticipateOvershootInterpolator@android:anim/anticipate_overshoot_interpolator初始结束都偏移插值器
CycleInterpolator@android:anim/cycle_interpolator循环插值器
 类似资料: