Android动画简介之View Animation

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 循环插值器

猜你喜欢

转载自blog.csdn.net/tao_789456/article/details/121682362