帧动画和补间动画的使用

àì夳堔傛蜴生んèń 2023-10-01 22:49 6阅读 0赞

#### 文章目录 ####

*  一、Android 动画分类
 *  二、帧动画
 *  二.补间动画
 *   *  1.alpha\_anim.xml 动画实现
     *  2.scale.xml 动画实现
     *  3.set 标签将多个动画组合
     *  4.Java Code 实现

--------------------

## 一、Android 动画分类 ##

总的来说，Android动画可以分为两类，最初的传统动画和Android3.0 之后出现的属性动画；

传统动画又包括 帧动画（Frame Animation）和补间动画（Tweened Animation）。

--------------------

## 二、帧动画 ##

帧动画是最容易实现的一种动画，这种动画更多的依赖于完善的UI资源，他的原理就是将一张张单独的图片连贯的进行播放，从而在视觉上产生一种动画的效果；有点类似于某些软件制作gif动画的方式。

代码要做的事情就是把一幅幅的图片按顺序显示，造成动画的视觉效果

<?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/a_0"
            android:duration="100" />
        <item
            android:drawable="@drawable/a_1"
            android:duration="100" />
        <item
            android:drawable="@drawable/a_2"
            android:duration="100" />
    </animation-list>

protected void onCreate(@Nullable Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_frame_animation);
            ImageView animationImg1 = (ImageView) findViewById(R.id.animation1);
            animationImg1.setImageResource(R.drawable.frame_anim1);
            AnimationDrawable animationDrawable1 = (AnimationDrawable) animationImg1.getDrawable();
            animationDrawable1.start();
        }

可以说，图片资源决定了这种方式可以实现怎样的动画

在有些代码中，我们还会看到android：oneshot=“false” ，这个oneshot 的含义就是动画执行一次（true）还是循环执行多次。

这里其他几个动画实现方式都是一样，无非就是图片资源的差异。

--------------------

## 二.补间动画 ##

补间动画又可以分为四种形式，分别是 alpha（淡入淡出），translate（位移），scale（缩放大小），rotate（旋转）。 补间动画的实现，一般会采用xml 文件的形式；代码会更容易书写和阅读，同时也更容易复用。

首先，在res/anim/ 文件夹下定义如下的动画实现方式

### 1.alpha\_anim.xml 动画实现 ###

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

### 2.scale.xml 动画实现 ###

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

然后，在Activity中

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.alpha_anim);
    img = (ImageView) findViewById(R.id.img);
    img.startAnimation(animation);

这样就可以实现ImageView alpha 透明变化的动画效果。

### 3.set 标签将多个动画组合 ###

也可以使用

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@[package:]anim/interpolator_resource"
        android:shareInterpolator=["true" | "false"] >
        <alpha
            android:fromAlpha="float"
            android:toAlpha="float" />
        <scale
            android:fromXScale="float"
            android:toXScale="float"
            android:fromYScale="float"
            android:toYScale="float"
            android:pivotX="float"
            android:pivotY="float" />
        <translate
            android:fromXDelta="float"
            android:toXDelta="float"
            android:fromYDelta="float"
            android:toYDelta="float" />
        <rotate
            android:fromDegrees="float"
            android:toDegrees="float"
            android:pivotX="float"
            android:pivotY="float" />
        <set>
            ...
        </set>
    </set>

可以看到组合动画是可以嵌套使用的。

各个动画属性的含义结合动画自身的特点应该很好理解，就不一一阐述了；这里主要说一下interpolator 和 pivot。

> Interpolator 主要作用是可以控制动画的变化速率 ，就是动画进行的快慢节奏。

Android 系统已经为我们提供了一些Interpolator ，比如 accelerate\_decelerate\_interpolator，accelerate\_interpolator等。更多的interpolator 及其含义可以在Android SDK 中查看。同时这个Interpolator也是可以自定义的，这个后面还会提到。

> pivot 决定了当前动画执行的参考位置

pivot 这个属性主要是在translate 和 scale 动画中，这两种动画都牵扯到view 的“物理位置“发生变化，所以需要一个参考点。而pivotX和pivotY就共同决定了这个点；它的值可以是float或者是百分比数值。

我们以pivotX为例，

pivotX取值含义10距离动画所在view自身左边缘10像素10%距离动画所在view自身左边缘 的距离是整个view宽度的10%10%p距离动画所在view父控件左边缘的距离是整个view宽度的10%

pivotY 也是相同的原理，只不过变成的纵向的位置。如果还是不明白可以参考[源码][Link 1]，在Tweened Animation中结合seekbar的滑动观察rotate的变化理解。

### 4.Java Code 实现 ###

有时候，动画的属性值可能需要动态的调整，这个时候使用xml 就不合适了，需要使用java代码实现

private void RotateAnimation() {
        
            animation = new RotateAnimation(-deValue, deValue, Animation.RELATIVE_TO_SELF,
                    pxValue, Animation.RELATIVE_TO_SELF, pyValue);
            animation.setDuration(timeValue);
    
            if (keep.isChecked()) {
        
                animation.setFillAfter(true);
            } else {
        
                animation.setFillAfter(false);
            }
            if (loop.isChecked()) {
        
                animation.setRepeatCount(-1);
            } else {
        
                animation.setRepeatCount(0);
            }
    
            if (reverse.isChecked()) {
        
                animation.setRepeatMode(Animation.REVERSE);
            } else {
        
                animation.setRepeatMode(Animation.RESTART);
            }
            img.startAnimation(animation);
        }

这里animation.setFillAfter决定了动画在播放结束时是否保持最终的状态；animation.setRepeatCount和animation.setRepeatMode 决定了动画的重复次数及重复方式，具体细节可查看源码理解。

[Link 1]: https://github.com/REBOOTERS/AndroidAnimationExercise