Android

Android样式基础--视图动画(View Animation

2017-08-14  本文已影响25人  ProZoom

Author：ProZoom

Hobby：爱折腾、爱思考，想静静的ProZoom

Github --- 简书 --- CSDN --- 关于我

Android除了提供drawable资源动画之外，还提供了另外两种动画体系：

视图动画比较简单，只能应用于各种View，可以做一些位置、大小、旋转和透明度的简单转变。
属性动画则是在android 3.0引入的动画体系，提供了更多特性和灵活性，也可以应用于任何对象，而不只是View。本篇先讲视图动画。

视图动画可以通过xml文件定义，xml文件放于res/anim/目录下，根元素可以为：

其中，<set>标签定义的是动画集，它可以包含多个其他标签，也可以嵌套<set>标签。默认情况下，所有动画会同时播放；如果想按顺序播放，则需要指定startOffset**属性；另外，还可以通过设置interpolator改变动画变化的速率，比如匀速、加速。

< alpha >

< alpha >可以实现透明度渐变的动画效果，也就是淡入淡出的效果，可通过设置下面三个属性来设置淡入或淡出效果：

当设置开始时透明度为0.0，结束时为1.0，就能实现淡入效果；相反，当设置开始时透明度为1.0，结束时为0.0，那就能实现淡出效果。示例代码如下：

<!-- res/anim/fade_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />

将这动画效果添加到View上也只需要一行代码：

view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in));

如果需要重用这个动画，也可以将其抽离出来。<alpha>标签对应的动画类为AlphaAnimation，父类为Animation，以上代码将AlphaAnimation抽离后的代码可以如下：

AlphaAnimation fadeInAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.fade_in);
view.startAnimation(fadeInAnimation);

< scale >

< scale >可以实现缩放的动画效果，主要的属性如下：

<!-- res/anim/zoom_out.xml -->
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="0%"
    android:pivotY="100%"
    android:toXScale="1.5"
    android:toYScale="1.5" />

< scale >标签对应的类为ScaleAnimation，父类也是Animation，添加到View上的用法和AlphaAnimation一样，代码如下：

ScaleAnimation zoomOutAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.zoom_out);
view.startAnimation(zoomOutAnimation);

< translate >

< translate >可以实现位置移动的动画效果，可以是垂直方向的移动，也可以是水平方向的移动。坐标的值可以有三种格式：从-100到100，以"%"结束，表示相对于View本身的百分比位置；如果以"%p"结束，表示相对于View的父View的百分比位置；如果没有任何后缀，表示相对于View本身具体的像素值。主要的属性如下：

<!-- res/anim/move_left_to_right.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="-100%"
    android:fromYDelta="0"
    android:toXDelta="100%p"
    android:toYDelta="0" />

< translate >标签对应的类为TranslateAnimation，父类也是Animation，添加到View上的代码如下：

TranslateAnimation moveAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.move_left_to_right);
view.startAnimation(moveAnimation);

< rotate >

< rotate >可以实现旋转的动画效果，主要的属性如下：

<!-- res/anim/rotate_one.xml -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%" />

< rotate >标签对应的类为RotateAnimation，父类也是Animation，添加到View上的代码如下：

RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_one);
view.startAnimation(rotateAnimation);

< set >

< set >标签可以将多个动画组合起来，变成一个动画集。比如想将一张图片缩放的同时也做移动，这时候就要用<set>标签组合缩放动画和移动动画了。示例代码如下：

<!-- res/anim/move_and_scale.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="200%"
        android:toYDelta="0" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="0%"
        android:pivotY="100%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

以上代码实现的动画效果为向右移动的同时也同步放大。< set >标签在视图动画中除了可以组合< alpha >, < scale >, < translate >, < rotate >这四种标签，也可以嵌套其他< set >标签。另外，< set >标签可嵌套的标签元素并不只有这几个，后面谈到属性动画时会再讲其他的标签及用法。

上一篇 下一篇

猜你喜欢

热点阅读