豫ICP备17040950号-2

Android开发——帧动画

文章目录
  1. 1. 前言
  2. 2. 应用简介
  3. 3. 设计思路
  4. 4. 实现流程
    1. 4.1. 新建Project
    2. 4.2. 重命名app
    3. 4.3. 准备素材
    4. 4.4. 新建xml文件
    5. 4.5. 添加ImageView控件
    6. 4.6. 修改activity_main.xml
    7. 4.7. 修改MainActivity.java
    8. 4.8. 运行
  5. 5. 效果展示
  6. 6. 代码分享
  7. 7. 后记
  8. 8. 参考资料

前言

获得成就感是学习的灵魂!对于编程,尤其如此。模仿着做一些简单的应用先,之后再补充知识点。This is the plan !

应用简介

单击手机屏幕,播放动画。

设计思路

1、拷贝关键帧(图片)到资源文件夹。
2、在xml文件中定义关键帧、帧顺序、切换时间。
PS:一般切换时间为1/24秒,我们这里用0.1秒。
3、图片显示在ImageView。
4、响应单击事件。
5、使用AnimationDrawable绘制动画。

实现流程

新建Project

新建Project,命名为Demo。

重命名app

app重命名为frameanimation,或者删除app,新建Module,命名为frameanimation。

准备素材

1、百度“帧图片素材”,找到一套自己喜欢的帧图片。
2、图片重命名为以字母开头,这里小编准备的图片名称为fight_01.png到fight_16.png。
3、将图片拷贝到src/main/res/drawable文件夹。
PS:小编尝试在res新建image文件夹,结果不可以使用,不知道为什么。

新建xml文件

右击drawable文件夹,New,Drawable resource file,File name随意(小编起名为frameanimation.xml),Root element选择animation-list。
frameanimation.xml内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/fight_01" android:duration="100" />
<item android:drawable="@drawable/fight_02" android:duration="100" />
<item android:drawable="@drawable/fight_03" android:duration="100" />
<item android:drawable="@drawable/fight_04" android:duration="100" />
<item android:drawable="@drawable/fight_05" android:duration="100" />
<item android:drawable="@drawable/fight_06" android:duration="100" />
<item android:drawable="@drawable/fight_07" android:duration="100" />
<item android:drawable="@drawable/fight_08" android:duration="100" />
<item android:drawable="@drawable/fight_09" android:duration="100" />
<item android:drawable="@drawable/fight_10" android:duration="100" />
<item android:drawable="@drawable/fight_11" android:duration="100" />
<item android:drawable="@drawable/fight_12" android:duration="100" />
<item android:drawable="@drawable/fight_13" android:duration="100" />
<item android:drawable="@drawable/fight_14" android:duration="100" />
<item android:drawable="@drawable/fight_15" android:duration="100" />
<item android:drawable="@drawable/fight_16" android:duration="100" />
</animation-list>

一起来分析一下这个文件:

  • android:oneshot=”true”,默认循环播放,加上这个属性,只播放一遍。

  • android:drawable=”@drawable/fight_01”,原来,.png是需要省略掉的。

  • android:duration=”100”,切换间隔时间100ms。

添加ImageView控件

1、打开activity_main.xml,Design,在Widgets中选中ImageView放到布局中。
2、双击,在src中选择Project>Drawable>frameanimation,OK。
3、指定一个id,添加的第一个ImageView默认为imageView,第二个默认为imageView2,依次类推。
4、拖拉一下,修改一下长宽和大小。

修改activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<RelativeLayout 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:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp" tools:context=".MainActivity">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/imageView"
android:src="@drawable/frameanimation"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true" />


</RelativeLayout>

这一步主要修改了一下ImageView的布局,使其填充整个界面,看起来效果比较好。非必要步骤,可不做。

修改MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package com.voidking.android.demo;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;


public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImageView imageView = (ImageView) findViewById(R.id.imageView);
final AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getDrawable();

imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animationDrawable.stop();
animationDrawable.start();

}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

我们修改的,其实只有OnCreate函数,在里面添加了对ImageView的单击事件的监听和动作。
之所以先stop再start,是因为animationDrawable.start()之后,显示到了最后一个帧,停留在最后一个帧,但是,这时候animationDrawable的运行并没有结束,必须stop之后,才能开始新一轮动画播放。

运行

单击工具栏上的绿色三角形,选择一个AVD,运行即可。

效果展示


代码分享

https://github.com/voidking/android-frameanimation ,需要的同学移步自取。

后记

一步一步,不怕慢,胜在不止!

参考资料

7天学会Android
http://www.duobei.com/room/trial/9152038430

关于我
做官要学曾国藩,经商要学胡雪岩,做人当学杜月笙,编码要学张小龙!
友情链接标签
CPU Docker JVM MYSQL OSGI SQL优化 TCP/SOCKET ajax android angular angularjs aop binlog binutils bower centos centos7 chrome cms coding cookie cpu crawler css c语言 disk dns docker eclipse ewb excel exports fedora freemarker ftp gcc git gitcafe gitignore hadoop hexo hibernate html idea ie jar java javascript java加密 java基础 jdbc jdk jenkins jira jpa jquery js jsp jvm kissy leetcode lfs linux lisp localstorage markdown mathjax matlab maven mongodb mpc mvc mybatis mysql nginx node node.js nodejs notepad++ npm nvm oa openshift oracle php pmp python qq redhat request root samble sass scheme seajs seo servlet session sessionstorage sftp shell socketio spring springboot springcloud springmvc sprite sqlserver ssh struts2 supervisor thinkphp tomcat ubuntu ueditor url validator vim virtualbox vsftpd wifi wiki win7 win8 windows word wordpress xdebug xftp xmpp xshell yum yum源 七牛 万维钢 专注 乔布斯 书签 书籍 乱码 二进制 云栖大会 云片 亦舒 企业网站 优化 健身 光标 内网穿透 冯仑 函数式编程 分布式 前端 前端框架 办公 加密 励志 博士 博客 参数校验 双系统 反向代理 句柄 吴晓波 周云龙 周鸿祎 命令 命令行 响应式 国学 图标 图片上传 域名 外包 大数据 子沫 孙正义 学习 安全 安卓 定点数 寄存器虚拟机 密码 富文本编辑器 小数 小程序 小说 并发信号量 开发经验 引擎 张文亮 张艺谋 形式语义学 微信 心经 快捷键 思考 性能优化 感动 感悟 报错 拍照 指针 接口限流 插件 插件化 操作系统 故障定位 数学 数据库 数据库连接池 文件管理系统 文件系统 文档 新浪博客 方法 易中天 最美 朋友 服务器 机器学习 李银河 杨照 标签 栈式虚拟机 桌面 模块化 模板引擎 正则表达式 毕设 沈奇岚 浮点数 渲染 游戏 演讲 爬虫 牛顿 特殊注释 王纯 理想 生活 画画 白岩松 百度地图 知识工程 短信 禅定 程序员 程序感慨 笑话 笔记 算法 粘贴位 系统 索引原理 缓存 编程 编程心得 编译器 编辑器 缩写 网站 网络 网络机房 网络编程 网页复制 罗西 考研 自动化运维 自动部署 自娱自乐 艾佳生活 薛涌 蚁群算法 街道 计算机 计算机基础 论文 设计模式 语录 读书 读者 课程设计 调试 跨域 转义符 转载 软件 遗传算法 错误 镜像 问题 阮一峰 防火墙 随笔 雷军 音乐 项目 项目管理 项目经理 验证码 高并发 黑客