Android动画学习之补间动画和逐帧动画，Flutter尽然还能有这种操作

飞奔的炮台

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

上述代码定义了一个让View从完全不透明到透明、持续时间为1s的动画。

属性介绍：
| 参数 | 性能 | 使用 |
| --- | --- | --- |
| interpolator | 控制动画的变化速度 | @android:anim/linear_interpolator(匀速改变)、@android:anim/accelerate_interpolator(开始慢，后来加速)等 |
| repeatMode | 指定动画重复的方式 | reverse(反向)、restart(重新开始)、默认：restart |
| repeatCount | 指定动画重复次数 | 正整数、infinite(无限循环) |
| duration | 指定动画播放时长 | 单位(ms) |
| fromAlpha | 指定动画开始时的透明度 | 0.0为完全透明，1.0为不透明 |
| toAlpha | 指定动画结束时的透明度 | 0.0为完全透明，1.0为不透明 |
| startOffset | 多长时间后开始执行动画 | 默认：0 |
[]( )2. 旋转动画（RotateAnimation）
旋转动画就是通过为动画指定开始时的旋转角度、结束时的旋转角度以及动画播放时长来创建动画，在XML文件中定义旋转动画，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:duration="1000"/>
</set>

上述代码定义了一个让View从0°旋转到360°持续时间为1s的旋转动画。

属性介绍：
| 参数 | 性能 | 使用 |
| --- | --- | --- |
| fromDegrees | 指定动画开始时的角度 | [0,360] |
| toDegrees | 指定动画结束时的角度 | [0,360] |
| pivotX | 指定轴心的X坐标 | % |
| pivotY | 指定轴心的Y坐标 | % |
[]( )3. 缩放动画（ScaleAnimation）
缩放动画就是通过为动画指定开始时的缩放系数、结束时的缩放系数以及动画持续时长来创建动画，在XML文件中定义缩放动画，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:repeatMode="reverse"
android:repeatCount="infinite"
android:duration="3000"
android:fillAfter="true"
android:fillBefore="false"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"/>
</set>

上述代码定义了一个让View在X轴上放大一半、Y轴上放大一半的缩放动画。

属性介绍：
| 参数 | 性能 | 使用 |
| --- | --- | --- |
| fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 |
| fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 |
| toXScale | 指定动画结束时X轴上的缩放系数 | 小于1表示缩小，大于1表示放大，等于1表示没有缩放 |
| toYScale | 指定动画结束时Y轴上的缩放系数 | 小于1表示缩小，大于1表示放大，等于1表示没有缩放 |
| fillAfter | 动画执行结束之后是否停留在最后一帧，优先存在于fillBefore | 默认：false |
| fillBefore | 动画播放完毕后，是否会恢复原始状态 | 默认：true |
| fillEnabled | 是否应用与fillBefore的值 | 默认：true |
[]( )4. 平移动画（TranslateAnimation）
平移动画是通过为动画指定开始位置、结束位置以及动画持续时长来创建动画，在XML文件中定义平移动画，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0.0"
android:fromYDelta="0.0"
android:toXDelta="100"
android:toYDelta="0.0"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="4000"/>
</set>

上述代码定义了一个让View从起始x(0.0)位置平移到结束x(100)位置，持续时间为4s的平移动画。
注意：这里的坐标不是指屏幕像素的坐标，而是指相对于View的所在位置的坐标。
例如：开始位置0.0表示在View最开始的地方平移（即布局文件定义View所在的位置）。

[]( )三、补间动画实战
===================================================================
[]( )1. 创建工程，设计用户交互界面
布局文件activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp">
<ImageView
android:id="@+id/iv_bean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="145dp"
android:layout_marginRight="145dp"
android:layout_marginBottom="320dp"
android:src="@drawable/icon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="@+id/btn_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/btn_1"/>
<Button
android:id="@+id/btn_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/btn_2"/>
<Button
android:id="@+id/btn_three"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/btn_3"/>
<Button
android:id="@+id/btn_four"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/btn_4"/>
</LinearLayout>
</RelativeLayout>
其中，按钮名称在(res/values/strings.xml)文件中说明，方便程序管理：
<resources>
<string name="app_name">Animation</string>
<string name="btn_1">渐变</string>
<string name="btn_2">旋转</string>
<string name="btn_3">缩放</string>
<string name="btn_4">移动</string>
</resources>
[]( )2. 创建相应的补间动画
在res目录下创建一个anim文件夹，并新建4个XML文件，分别命名为：

• “alpha_animation.xml”（透明度渐变动画）
  
• “rotate_animation.xml” （旋转动画）
  
• “scale_animation.xml” （缩放动画）
  
• “translate_animation.xml”（平移动画）。
  

分别将前面讲解的四个动画的XML代码放入创建的四个文件中。
[]( )3. 编写界面交互代码
在XML文件中定义好补间动画资源后，需要将动画资源设置到控件上。要实现该功能，需要在MainActivity中调用AnimationUtils类的loadAnimation()方法加载动画资源，并为图片（@drawable/icon)设置指定动画，具体代码如下:
文件MainActivity.java编写逻辑代码:
package com.example.animation;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ImageView ivBean;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化组件并添加点击事件
Button buttonOne = findViewById(R.id.btn_one);
Button buttonTwo = findViewById(R.id.btn_two);
Button buttonThree = findViewById(R.id.btn_three);
Button buttonFour = findViewById(R.id.btn_four);
ivBean = findViewById(R.id.iv_bean);
buttonOne.setOnClickListener(this);
buttonTwo.setOnClickListener(this);
buttonThree.setOnClickListener(this);
buttonFour.setOnClickListener(this);
}
public void onClick(View v){
switch(v.getId()){
case R.id.btn_one:
//调用AnimationUtils的loadAnimation()方法加载动画
//单击按钮使用图片渐变
Animation alpha = AnimationUtils.loadAnimation(this,R.anim.alpha_animation);
ivBean.startAnimation(alpha);
break;
case R.id.btn_two:
//单击按钮使图片旋转
Animation rotate = AnimationUtils.loadAnimation(this,R.anim.rotate_animation);
ivBean.startAnimation(rotate);
break;
case R.id.btn_three:
//单击按钮使图像缩放
Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale_animation);
ivBean.startAnimation(scale);
break;
case R.id.btn_four:
//单击按钮使图片移动
Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate_animation);
ivBean.startAnimation(translate);
break;
}
总结
现在新技术层出不穷，如果每次出新的技术，我们都深入的研究的话，很容易分散精力。新的技术可能很久之后我们才会在工作中用得上，当学的新技术无法学以致用，很容易被我们遗忘，到最后真的需要使用的时候，又要从头来过（虽然上手会更快）。
我觉得身为技术人，针对新技术应该是持拥抱态度的，入了这一行你就应该知道这是一个活到老学到老的行业，所以面对新技术，不要抵触，拥抱变化就好了。
Flutter 明显是一种全新的技术，而对于这个新技术在发布之初，花一个月的时间学习它，成本确实过高。但是周末花一天时间体验一下它的开发流程，了解一下它的优缺点、能干什么或者不能干什么。这个时间，并不是我们不能接受的。
如果有时间，其实通读一遍 Flutter 的文档，是最全面的一次对 Flutter 的了解过程。但是如果我们只有 8 小时的时间，我希望能关注一些最值得关注的点。

（跨平台开发(**Fl
《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整资料开源分享

utter**)、java基础与原理，自定义view、NDK、架构设计、性能优化、完整商业项目开发等）

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

</div>
    
    <div id="asideoffset"></div>