零、学习目标

1. 了解安卓实现动画的三种方式
2. 掌握如何实现四种类型的补间动画

一、安卓实现动画的三种方式

1、补间动画（tween animation）

针对同一张图片进行各种变换，比如平移、旋转、缩放、深浅等等。

2、帧式动画（frame animation）

事先准备好动画所需要的每一帧图片，然后利用线程每隔一段时间切换图片，这样来实现的动画效果。

3、属性动画（property animation）

通过动画的方式改变对象的属性。

二、补间动画类型

1. 透明度动画(alpha animation)
2. 缩放动画(scale animation)
3. 平移动画(translate animation)
4. 旋转动画(rotate animation)

三、补间动画案例 - 透明度动画

• 透明度动画可以通过Java代码实现，也可以通过xml配置文件实现。

（一）运行效果

（二）实现步骤

1、创建安卓应用【AlphaAnimation】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp"tools:context=".MainActivity"><ImageViewandroid:id="@+id/ivBelle"android:layout_width="match_parent"android:layout_height="0dp"android:layout_marginBottom="20dp"android:layout_weight="7"android:src="@drawable/belle" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><Buttonandroid:id="@+id/btnAnimationByCode"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByCode"android:text="@string/animation_by_code" /><Buttonandroid:id="@+id/btnAnimationByXML"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByXML"android:text="@string/animation_by_xml" /></LinearLayout>
</LinearLayout>

4、创建透明度动画配置文件

• 在res目录里创建anim目录，在anim里创建alpha_animator.xml
  

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"android:duration="3000"android:fromAlpha="1"android:repeatCount="1"android:repeatMode="reverse"android:toAlpha="0" />

• duration —— 持续时间（单位：毫秒）
• fromAlpha —— 起始透明度（0~1）
• toAlpha —— 终止透明度（0~1）
• repeatMode —— 重复模式（restart，reverse）
• repeatCount —— 重复次数（1、2、3、……、infinite）

5、字符串资源文件strings.xml

<resources><string name="app_name">补间动画 - 透明度动画</string><string name="animation_by_code">通过Java代码实现动画</string><string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

6、主界面类 - MainActivity

• 声明变量
  
• 通过资源标识符获取控件实例
  
• 通过Java代码实现透明度动画
  
• 通过XML配置实现透明度动画
  
• 查看主界面完整源代码

package net.hw.alpha_animation;import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivBelle; // 美女图像控件@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivBelle = findViewById(R.id.ivBelle);}/*** 通过Java代码实现透明度动画** @param view*/public void doAnimationByCode(View view) {// 创建透明度动画对象, 从不透明到透明Animation animation = new AlphaAnimation(1, 0);// 设置动画持续时间animation.setDuration(3000);// 设置动画重复模式（RESTART - 重启；REVERSE - 反向）animation.setRepeatMode(AlphaAnimation.REVERSE);// 设置动画重复次数animation.setRepeatCount(1);// 启动图像控件的透明度动画ivBelle.startAnimation(animation);}/*** 通过XML配置实现透明度动画** @param view*/public void doAnimationByXML(View view) {// 启动图像控件的透明度动画ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha_animator));}
}

7、启动应用，查看效果

四、补间动画案例 - 缩放动画

• 缩放动画可以通过Java代码实现，也可以通过xml配置文件实现。

（一）运行效果

（二）实现步骤

1、创建安卓应用【ScaleAnimation】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp"tools:context=".MainActivity"><ImageViewandroid:id="@+id/ivBelle"android:layout_width="match_parent"android:layout_height="0dp"android:layout_marginBottom="20dp"android:layout_weight="7"android:src="@drawable/belle" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><Buttonandroid:id="@+id/btnAnimationByCode"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByCode"android:text="@string/animation_by_code" /><Buttonandroid:id="@+id/btnAnimationByXML"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByXML"android:text="@string/animation_by_xml" /></LinearLayout>
</LinearLayout>

4、创建缩放动画配置文件

• 在res目录里创建anim目录，在anim目录里创建scale_animator.xml
  

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

• fromXScale —— 起始横向比例（1表示原图大小）
• fromYScale —— 起始纵向比例（1表示原图大小）
• toXScale —— 终止横向比例（0表示缩小到无）
• toYScale —— 终止纵向比例（0表示缩小到无）
• pivotX —— 缩放中心横向比例（50% - 水平居中位置）
• pivotY —— 缩放中心纵向比例（50% - 垂直居中位置）

5、字符串资源文件strings.xml

<resources><string name="app_name">补间动画 - 缩放动画</string><string name="animation_by_code">通过Java代码实现动画</string><string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

6、主界面类 - MainActivity

• 声明变量
  
• 通过资源标识符获取控件实例
  
• 通过Java代码实现缩放动画
  
• 通过XML配置文件实现缩放动画
  
• 查看主界面类完整源代码

package net.hw.scale_animation;import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivBelle; // 美女图像控件@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivBelle = findViewById(R.id.ivBelle);}/*** 通过Java代码实现缩放动画** @param view*/public void doAnimationByCode(View view) {// 创建缩放动画对象，从原尺寸到零尺寸Animation animation = new ScaleAnimation(1, 0, 1, 0,ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);// 设置动画持续时间animation.setDuration(3000);// 设置动画重复模式（RESTART - 重启；REVERSE - 反向）animation.setRepeatMode(AlphaAnimation.REVERSE);// 设置动画重复次数animation.setRepeatCount(1);// 启动图像控件的缩放动画ivBelle.startAnimation(animation);}/*** 通过XML配置文件实现缩放动画** @param view*/public void doAnimationByXML(View view) {// 启动图像控件的缩放动画ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_animator));}
}

7、启动应用，查看效果

8、改变缩放基准点位置

• 将图像控件左上角作为缩放基准点
  
• 启动应用，查看效果
  

五、补间动画案例 - 平移动画

（一）运行效果

（二）实现步骤

1、创建安卓应用【TranslateAnimation】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp"tools:context=".MainActivity"><ImageViewandroid:id="@+id/ivBelle"android:layout_width="match_parent"android:layout_height="0dp"android:layout_marginBottom="20dp"android:layout_weight="7"android:src="@drawable/belle" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><Buttonandroid:id="@+id/btnAnimationByCode"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByCode"android:text="@string/animation_by_code" /><Buttonandroid:id="@+id/btnAnimationByXML"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByXML"android:text="@string/animation_by_xml" /></LinearLayout>
</LinearLayout>

4、创建平移动画配置文件

• 在res目录里创建anim目录，在anim目录里创建translate_animator.xml
  

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"android:duration="3000"android:fromXDelta="-100%"android:fromYDelta="0%"android:repeatCount="1"android:repeatMode="reverse"android:toXDelta="100%"android:toYDelta="0%" />

5、字符串资源文件strings.xml

<resources><string name="app_name">补间动画 - 平移动画</string><string name="animation_by_code">通过Java代码实现动画</string><string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

5、主界面类 - MainActivity

• 声明变量
  
• 通过资源标识符获取控件实例
  
• 通过Java代码实现平移动画
  
• 通过XML动画配置文件实现平移动画
  
• 查看主界面完整源代码

package net.hw.translate_animation;import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivBelle; // 美女图像控件@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivBelle = findViewById(R.id.ivBelle);}/*** 通过Java代码实现平移动画** @param view*/public void doAnimationByCode(View view) {// 创建平移动画对象，设置平移起点与终点Animation animation = new TranslateAnimation(-730.0f, 730.0f, 0.0f, 0.0f);// 设置动画持续时间animation.setDuration(3000);// 设置动画重复模式（RESTART 重启；REVERSE 反向）animation.setRepeatMode(TranslateAnimation.REVERSE);// 设置动画重复次数animation.setRepeatCount(1);// 启动图像控件的平移动画ivBelle.startAnimation(animation);}/*** 通过XML配置文件实现平移动画** @param view*/public void doAnimationByXML(View view) {// 启动图像控件的平移动画ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_animator));}
}

6、启动应用，查看效果

课堂练习：完成从左上角移到右下角的平移动画

六、补间动画 - 旋转动画

（一）运行效果

（二）实现步骤

1、创建安卓应用【RotateAnimation】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="10dp"tools:context=".MainActivity"><ImageViewandroid:id="@+id/ivBelle"android:layout_width="match_parent"android:layout_height="0dp"android:layout_marginBottom="20dp"android:layout_weight="7"android:src="@drawable/belle" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center"android:orientation="horizontal"><Buttonandroid:id="@+id/btnAnimationByCode"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByCode"android:text="@string/animation_by_code" /><Buttonandroid:id="@+id/btnAnimationByXML"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doAnimationByXML"android:text="@string/animation_by_xml" /></LinearLayout>
</LinearLayout>

4、创建旋转动画配置文件

• 在res目录里创建anim目录，在anim目录里创建rotate_animator.xml
  

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

5、字符串资源文件strings.xml

<resources><string name="app_name">补间动画 - 旋转动画</string><string name="animation_by_code">通过Java代码实现动画</string><string name="animation_by_xml">通过xml配置实现动画</string>
</resources>

6、主界面类 - MainActivity

• 声明变量
  

• 通过资源标识符获取控件实例
  

• 通过Java代码实现旋转动画
  

• 通过XML配置文件实现旋转动画
  

• 查看主界面完整源代码

package net.hw.rotate_animation;import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivBelle; // 美女图像控件@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivBelle = findViewById(R.id.ivBelle);}/*** 通过Java代码实现旋转动画** @param view*/public void doAnimationByCode(View view) {// 创建旋转动画对象，起始角，终止角度，以及基准点Animation animation = new RotateAnimation(-60, 60,RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0);// 设置动画持续时间animation.setDuration(3000);// 设置动画重复模式（RESTART 重启；REVERSE 反向）animation.setRepeatMode(TranslateAnimation.REVERSE);// 设置动画重复次数animation.setRepeatCount(3);// 启动图像控件的旋转动画ivBelle.startAnimation(animation);}/*** 通过XML配置文件实现旋转动画** @param view*/public void doAnimationByXML(View view) {// 启动图像控件的旋转动画ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.rotate_animator));}
}

7、启动应用，查看效果

课堂练习：让图像控件绕着自身中心顺时针旋转无限次

七、课后作业

任务：利用动画配置文件实现组合补间动画

安卓学习笔记32：实现补间动画相关推荐

1. 2020年安卓学习笔记目录

   文章目录 一.讲课笔记 二.安卓案例 三.安卓实训项目 四.学生安卓学习博客 五.安卓课后作业 (一)界面设计练习 1.制作登录界面 2.制作部队管理界面 3.制作灭火救援界面 4.制作交付界面 5. ...

2. Android动画学习之补间动画和逐帧动画，移动互联网app开发

   | fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 | | fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 | | toXS ...

3. 学习 PixiJS — 补间动画

   说明 补间动画指的是,我们可以通过为精灵的位置.比例.透明度,等属性,设置开始值和结束值,制作动画,动画中间需要的部分由软件自动计算填充. Pixi 没有内置补间引擎,但是你可以使用很多很好的开源的补 ...

4. 安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet

   全栈工程师开发手册 (作者:栾鹏) 安卓教程全解 安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...

5. 安卓补间动画和属性动画的区别以及实践

   目录 一 .需求 二 .动画实现代码 补间动画代码 属性动画代码 三 .原理分析 四 .总结 一 .需求 需要做一个倒计时3 2 1 的动画(并且进入后台时动画不会被暂停),我们知道可以通过安卓的补间 ...

6. android解锁动画效果,Android开发学习——Day24（火焰燃烧和蒙眼解锁界面动画：关键帧动画和补间动画）...

   学习目的 1.学习使用两类动画:关键帧动画和补间动画 2.运用上述两类动画进行实战练习:火焰燃烧和蒙眼睛解锁 学习过程 认识两类动画的意义及其使用的基本操作,进行实战运用. 技术 一.关键帧动画&am ...

7. Android动画学习记录一（Android动画种类、补间动画和帧动画）

   Android动画学习记录一(动画种类.补间动画和帧动画) 动画种类.补间动画和帧动画 Android动画学习记录一(动画种类.补间动画和帧动画) 一.动画种类 二.View动画 2.1 补间动画 补 ...

8. Android补间动画笔记

   布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...

9. Android学习—补间动画（渐变动画）

   使用xml的方式设置动画属性 1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:an ...

最新文章

1. (2)iOS用UICollectionView实现Gallery效果
2. vs2010MFC D3D播放YUV格式视频详细制作全过程
3. STM32 之十 供电系统及内部参照电压（VREFINT）使用及改善ADC参考电压
4. RoR开发环境搭建 RAILS install log
5. How to Create a Development Package ?
6. 写笔记插件_Java程序员笔记（知识）管理的一点经验
7. 细说HTTP中POST与GET的区别与联系
8. 第三方支付3(易宝支付)
9. CSRF - 跨站请求伪造
10. 【ENVI】利用矢量shp数据做裁剪报错及解决办法
11. SQL语句：联合查询
12. 高端存储架构的前世今生
13. （九）ThunderbirdMail配置QQ邮件服务
14. 学计算机r7000和y7000哪个好,联想拯救者r7000p和y7000p哪个好-联想拯救者r7000p和y7000p评测对比...
15. java基础-宇宙第一YWM：数组数算题目记录
16. 有保证的复制消除（Guaranteed Copy Elision）
17. 司空见惯 - 神奇的数字7
18. 正点原子stm32F407学习笔记1——新建工程模板
19. java IO的学习记录
20. 2019计算机一级msoffice真题,【2019年整理】全国计算机一级MSOFFICE练习题带题解.pdf...

热门文章

1. 小熊派开发板实践：智慧路灯沙箱实验之真实设备接入
2. 【API进阶之路】太秃然了，老板要我一周内检测并导入一万个小时的视频
3. 【华为敏捷/DevOps实践】4. 如何从Excel做项目管理的方式中走出来
4. 等宽分箱_数据分析师-数据挖掘如何分箱以及对箱子中的数据进行平滑处理
5. 【文献学习】矩阵投影
6. sqlite 复合唯一索引_SQLite 索引（Index）
7. 基于python的科技论文_实地科研 | 上海财经大学 | 金融科技、商业分析、人工智能：机器学习、人工智能及其在金融科技中的应用（2021.1.25开课）...
8. 山东大学2016-2017校历
9. java语言复制数组的四种方法
10. es6删除数组某项_es6删除数组元素或者对象元素的方法介绍（代码）