一、逐帧动画

（一）逐帧动画概念

• 逐帧动画（Frame-by-Frame Animation）是一种常见的动画形式，其原理是在“连续关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担，而且最终输出的文件量也很大，但它的优势也很明显，逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

（二）逐帧动画实现方式

1. 利用动画资源文件实现逐帧动画
2. 利用Thread和Handler来实现逐帧动画
3. 利用Timer和TimerTask来实现逐帧动画

二、利用动画资源文件实现逐帧动画 - 功夫熊猫

（一）运行效果

（二）涉及知识点

1. 线性布局（LinearLayout）
2. 图像控件（ImageView）
3. 按钮（Button）
4. 动画可绘制对象（AnimationDrawable）
5. 动画资源文件

（三）实现步骤

1、创建安卓应用【PandaAnimation01】

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

3、创建动画资源文件 - panda_animator.xml

• 在drawable目录里创建panda_animator.xml
  

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false" > <!-- 表明动画要一直循环播放 --><!-- 添加多帧图片 --><itemandroid:drawable="@drawable/fat_po_f1"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f2"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f3"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f4"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f5"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f6"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f7"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f8"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f9"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f10"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f11"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f12"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f13"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f14"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f15"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f16"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f17"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f18"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f19"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f20"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f21"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f22"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f23"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f24"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f25"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f26"android:duration="60"/><itemandroid:drawable="@drawable/fat_po_f27"android:duration="60"/>
</animation-list>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivPanda"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/panda_animator" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center" ><Buttonandroid:id="@+id/btnPlay"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doPlay"android:text="@string/play" /><Buttonandroid:id="@+id/btnStop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doStop"android:text="@string/stop" /></LinearLayout>
</LinearLayout>

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

<resources><string name="app_name">功夫熊猫（利用动画资源文件实现逐帧动画）</string><string name="play">播放</string><string name="stop">停止</string>
</resources>

6、主界面类 - MainActivity

• 声明变量
  

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

• 实例化动画可绘制对象
  

• 编写播放按钮单击事件处理方法
  

• 编写停止按钮单击事件处理方法
  

• 查看主界面类完整源代码

package net.hw.panda_animation_01;import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivPanda; // 熊猫图像控件private AnimationDrawable ad; // 动画可绘制对象@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivPanda = findViewById(R.id.ivPanda);// 实例化动画可绘制对象ad = (AnimationDrawable) ivPanda.getBackground();}/*** 播放按钮单击事件处理方法** @param view*/public void doPlay(View view) {ad.start(); // 启动动画}/*** 停止按钮单击事件处理方法** @param view*/public void doStop(View view) {ad.stop(); // 停止动画}
}

7、启动应用，查看效果

三、利用Thread和Handler来实现逐帧动画 - 功夫熊猫

（一）运行效果

（二）涉及知识点

1. 线性布局（LinearLayout）
2. 图像控件（ImageView）
3. 按钮（Button）
4. 线程（Thread）
5. Runnable接口
6. 异步消息处理器（Handler）

（三）实现步骤

1、创建安卓应用【PandaAnimation02】

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

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivPanda"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/fat_po_f1" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center" ><Buttonandroid:id="@+id/btnPlay"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doPlay"android:text="@string/play" /><Buttonandroid:id="@+id/btnStop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doStop"android:text="@string/stop" /></LinearLayout>
</LinearLayout>

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

<resources><string name="app_name">功夫熊猫（利用Thread和Handler来实现逐帧动画）</string><string name="play">播放</string><string name="stop">停止</string>
</resources>

5、主界面类 - MainActivity

• 声明变量与常量
  
• 通过资源标识符获取控件实例
  
• 初始化图像标识符数组
  
• 创建消息处理器，复制接受和处理子线程发送的消息，完成图像切换任务
  
• 编写播放按钮单击事件处理方法
  
• 编写停止按钮单击事件处理方法
  
• 查看主界面类完整源代码

package net.hw.panda_animation_02;import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private ImageView ivPanda; // 熊猫图像控件private int[] imgIds; // 图像标识符数组private int imgIndex; // 图像索引private final int IMG_COUNT = 27; // 图像总数private Thread thread; // 线程private boolean isRunning; // 线程循环控制变量private Handler handler; // 消息处理器@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivPanda = findViewById(R.id.ivPanda);// 初始化图像标识符数组imgIds = new int[IMG_COUNT];for (int i = 0; i < IMG_COUNT; i++) {imgIds[i] = getResources().getIdentifier("fat_po_f" + (i + 1),"drawable", "net.hw.panda_animation_02");}// 创建消息处理器，复制接受和处理子线程发送的消息，完成图像切换任务handler = new Handler() {@Overridepublic void handleMessage(@NonNull Message msg) {super.handleMessage(msg);// 接受指定的消息if (msg.what == 0x001) {// 更新图像索引imgIndex++;// 保证图像索引不越界imgIndex = imgIndex % IMG_COUNT;// 用更新后的图像设置图像控件背景ivPanda.setBackgroundResource(imgIds[imgIndex]);}}};}/*** 播放按钮单击事件处理方法** @param view*/public void doPlay(View view) {// 设置线程循环控制变量为真isRunning = true;// 创建线程，发送消息给主线程thread = new Thread(new Runnable() {@Overridepublic void run() {// 线程循环操作while (isRunning) {// 发送消息handler.sendEmptyMessage(0x001);try {// 让线程睡眠60毫秒Thread.sleep(60);} catch (InterruptedException e) {e.printStackTrace();}}}});// 启动线程thread.start();}/*** 停止按钮单击事件处理方法** @param view*/public void doStop(View view) {// 设置线程循环控制变量为假isRunning = false;// 销毁线程thread = null;}
}

6、启动应用，查看效果

四、利用Timer和TimerTask来实现逐帧动画 - 功夫熊猫

（一）运行效果

（二）涉及知识点

1. 线性布局（LinearLayout）
2. 图像视图（ImageView）
3. 按钮（Button）
4. 定时器（Timer）
5. 定时器任务（TimerTask）
6. 消息处理器（Handler）

（三）实现步骤

1、创建安卓应用【PandaAnimation03】

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

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical" ><ImageViewandroid:id="@+id/ivPanda"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/fat_po_f1" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center" ><Buttonandroid:id="@+id/btnPlay"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doPlay"android:text="@string/play" /><Buttonandroid:id="@+id/btnStop"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="doStop"android:text="@string/stop" /></LinearLayout>
</LinearLayout>

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

<resources><string name="app_name">功夫熊猫（利用Timer和TimerTask来实现逐帧动画）</string><string name="play">播放</string><string name="stop">停止</string>
</resources>

5、主界面类 - Mainactivity

• 声明变量与常量
  
• 通过资源标识符获取控件实例
  
• 初始化图像标识符数组
  
• 创建消息处理器，复制接受和处理子线程发送的消息，完成图像切换任务
  
• 编写播放按钮单击事件处理方法
  
• 编写停止按钮单击事件处理方法
  
• 查看主界面类完整源代码

package net.hw.panda_animation_03;import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.ImageView;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;import java.util.Timer;
import java.util.TimerTask;public class MainActivity extends AppCompatActivity {private ImageView ivPanda; // 熊猫图像控件private int[] imgIds; // 图像标识符数组private int imgIndex; // 图像索引private final int IMG_COUNT = 27; // 图像总数private Timer timer; // 定时器private TimerTask task; // 定时器任务private Handler handler; // 消息处理器@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivPanda = findViewById(R.id.ivPanda);// 初始化图像标识符数组imgIds = new int[IMG_COUNT];for (int i = 0; i < IMG_COUNT; i++) {imgIds[i] = getResources().getIdentifier("fat_po_f" + (i + 1),"drawable", "net.hw.panda_animation_03");}// 创建消息处理器，复制接受和处理子线程发送的消息，完成图像切换任务handler = new Handler() {@Overridepublic void handleMessage(@NonNull Message msg) {super.handleMessage(msg);// 接受指定的消息if (msg.what == 0x001) {// 更新图像索引imgIndex++;// 保证图像索引不越界imgIndex = imgIndex % IMG_COUNT;// 用更新后的图像设置图像控件背景ivPanda.setBackgroundResource(imgIds[imgIndex]);}}};}/*** 播放按钮单击事件处理方法** @param view*/public void doPlay(View view) {// 创建定时器任务task = new TimerTask() {@Overridepublic void run() {// 发送消息handler.sendEmptyMessage(0x001);}};// 实例化定时器timer = new Timer();// 通过定时器来调度定时器任务（参数1：任务；参数2：延迟时间；参数3：周期）timer.scheduleAtFixedRate(task, 0, 60);}/*** 停止按钮单击事件处理方法** @param view*/public void doStop(View view) {// 取消定时器任务if (timer != null) {timer.cancel();}}
}

6、启动应用，查看效果

安卓学习笔记33：实现逐帧动画相关推荐

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

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

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

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

3. 安卓案例：利用定时器实现逐帧动画

   安卓案例:利用定时器实现逐帧动画 一.运行效果 单击[开始]按钮,可以看到逐帧动画效果: 单击[停止]按钮,可以停止动画效果. 二.涉及知识点 1.图像视图(ImageView) 2.按钮(Butto ...

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

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

5. 【Android笔记25】Android中的动画效果之逐帧动画

   这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录 一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<

6. html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画

   本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...

7. Android 高级编程【6个实战案例(附源码)：刮刮卡、补间动画、逐帧动画、Fragment、RecyclerView、下拉刷新】

   目   录 刮刮卡案例[ScratchCard] 结构图 activity_main.xml MainActivity.java 运行效果图 补间动画(Tween Animation) 逐帧动画(Fr ...

8. 1.逐帧动画shader

   最近项目压力不大,抽时间看了些关于shader和游戏引擎的书籍,准备开始shader的学习. 在网上看到这位前辈(http://blog.sina.com.cn/s/articlelist_23127 ...

9. 计算机类说课比赛视频,全国“xx杯”计算机类说课大赛课件一等奖作品：制作逐帧动画说课课件...

   <全国"xx杯"计算机类说课大赛课件一等奖作品:制作逐帧动画说课课件>由会员分享,可在线阅读,更多相关<全国"xx杯"计算机类说课大赛课件一等 ...

最新文章

1. 关于oracle的基础增删改查操作总结
2. Go 学习笔记（28）— nil（nil 不能比较、不是关键字或保留字、nil 没有默认类型、不同类型的 nil 指针是一样的、不同类型的 nil 是不能比较的、相同类型的 nil 可能也无法比较）
3. 使用R构建Xgboost模型并绘制ROC曲线
4. Java与C语法上的区别
5. nginx:模块讲解
6. ES6-1 ES6版本过渡历史
7. Jmeter远程启动负载机
8. java windowbuilder下载_Java WindowBuilder 安装及基本使用的教程
9. Eclipse中SVN分支与合并
10. JSONObject.fromObject 找不到这个方法或是报错
11. 续：~英语 1038个词根 217个后缀！
12. 机器学习--红酒质量检测分析(包含数据集，直接可用)
13. linux里php如何执行文件,linux如何执行文件
14. Kaggle—共享单车数据分析
15. Xiaocao's first blog post
16. 如何确保数据的准确性
17. 某笔试的一道简单题目
18. 关于nova服务项目的使用方法
19. 有关在html中修改select标签的option selected默认选中属性实现
20. android 手机 恢复数据恢复,恢复安卓手机丢失的数据

热门文章

1. 如何在软件发布计划中自动化语义化版本与变更日志
2. 【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
3. 大型情感剧集Selenium：2_options设置 #华为云·寻找黑马程序员#
4. 在xml中自定义属性 app
5. 关于Word2016敲入公式的新方法
6. 如何清空一个数组内容
7. HTML左侧下拉列表,HTML中的下拉列表 select
8. bool函数_PHP变量类型测试函数的使用：一、is_bool的用法
9. python怎么测试uwsgi并发量_nginx + uWSGI 为 django 提供高并发
10. _Linux内核分析(二)-内核模块简介和简单内核模块实现