登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 2221034|回复: 266

第二十四讲:Android动画入门(一)

  [复制链接]

58

主题

58

帖子

130

安币

程序猿

Rank: 2

发表于 2011-4-24 21:04:19 | 显示全部楼层 |阅读模式
本帖最后由 bigmazhiyu 于 2011-4-24 21:22 编辑

本讲内容:Android 动画入门指南
1、补间动画
2、逐帧动画Android中动画的实现分两种方式,一种方式是补间动画 Tween Animation,就是说你定义一个开始和结束,中间的部分由程序运算得到。另一种叫逐帧动画 Frame Animation,就是说一帧一帧的连起来播放就变成了动画。有点Flash基础的同学理解起来会很容易。接下来我们一个一个学习。一、补间动画 Tween AnimationAndroid中实现补间动画的思路是这样的,
1、首先用XML定义一个动画效果
2、依据这个XML使用AnimationUtils工具类创建一个Animationd对象
3、调用View组件的startAnimation方法实现动画。接下来我们用一个例子来看一下。1、创建一个项目 Lesson24_Animation,主Activity名字叫MainActivity.java2、在res目录下创建一个anim目录,在目录下创建下面五个动画定义文件,需要注意的是这5个文件在是2.2下调试通过的,网上很多文档的xml是无法通过IDE的检查的,可能是新版本检查更严格了。
alpha_animation.xml
1
<?xml version="1.0" encoding="utf-8"?>






composite_animation.xml
1







rotate_animation.xml
  1. <?xml version="1.0" encoding="utf-8"?>
复制代码
scale_animation.xml
  1. <?xml version="1.0" encoding="utf-8"?>
复制代码
translate_animation.xml
  1. <?xml version="1.0" encoding="utf-8"?>
复制代码
3、MainActivity.java的内容如下:


  1. package android.basic.lesson24;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.view.animation.Animation;
  7. import android.view.animation.AnimationUtils;
  8. import android.widget.ImageButton;

  9. public class MainAnimation extends Activity {
  10.         /** Called when the activity is first created. */
  11.         @Override
  12.         public void onCreate(Bundle savedInstanceState) {
  13.                 super.onCreate(savedInstanceState);
  14.                 setContentView(R.layout.main);

  15.                 //定义UI组件
  16.                 final ImageButton ib1 = (ImageButton) findViewById(R.id.ImageButton01);
  17.                 final ImageButton ib2 = (ImageButton) findViewById(R.id.ImageButton02);
  18.                 final ImageButton ib3 = (ImageButton) findViewById(R.id.ImageButton03);
  19.                 final ImageButton ib4 = (ImageButton) findViewById(R.id.ImageButton04);
  20.                 final ImageButton ib5 = (ImageButton) findViewById(R.id.ImageButton05);

  21.                 //定义监听器
  22.                 OnClickListener ocl = new OnClickListener() {

  23.                         @Override
  24.                         public void onClick(View v) {
  25.                                 switch (v.getId()) {
  26.                                 case R.id.ImageButton01:
  27.                                         //创建Animation对象
  28.                                         Animation ani1 = AnimationUtils.loadAnimation(
  29.                                                         getApplicationContext(), R.anim.alpha_animation);
  30.                                         //组件播放动画
  31.                                         ib1.startAnimation(ani1);
  32.                                         break;
  33.                                 case R.id.ImageButton02:
  34.                                         Animation ani2 = AnimationUtils.loadAnimation(
  35.                                                         getApplicationContext(), R.anim.scale_animation);
  36.                                         ib2.startAnimation(ani2);
  37.                                         break;
  38.                                 case R.id.ImageButton03:
  39.                                         Animation ani3 = AnimationUtils.loadAnimation(
  40.                                                         getApplicationContext(), R.anim.translate_animation);
  41.                                         ib3.startAnimation(ani3);
  42.                                         break;
  43.                                 case R.id.ImageButton04:
  44.                                         Animation ani4 = AnimationUtils.loadAnimation(
  45.                                                         getApplicationContext(), R.anim.rotate_animation);
  46.                                         ib4.startAnimation(ani4);
  47.                                         break;
  48.                                 case R.id.ImageButton05:
  49.                                         Animation ani5 = AnimationUtils.loadAnimation(
  50.                                                         getApplicationContext(), R.anim.composite_animation);
  51.                                         ib5.startAnimation(ani5);
  52.                                         break;
  53.                                 }

  54.                         }

  55.                 };

  56.                 //绑定监听器
  57.                 ib1.setOnClickListener(ocl);
  58.                 ib2.setOnClickListener(ocl);
  59.                 ib3.setOnClickListener(ocl);
  60.                 ib4.setOnClickListener(ocl);
  61.                 ib5.setOnClickListener(ocl);
  62.         }
  63. }
复制代码
4、运行程序,查看结果
原始图
点击第一个按钮的透明度变化效果
点击第二个按钮的缩放效果,这里看到的是两个缩放效果同时作用叠加的效果。也就是说默认情况下效果是同时发生的,而不是先后执行的,除非你使用 startoffset属性指定。同学们看这一讲最重要的还是自己练习来体会。
点击第三个按钮的位移效果,这个例子里我们可以清楚看到android:startOffset=”2000″的作用,数独按钮前2秒向右移了300像素,后2秒又回到原处,注意第二个translate中的负值参数,它清晰的告诉我们位移数据是相对自身当时位置的。
点击第四个按钮的旋转效果,负的度数表示逆时针旋转。
点击第五个按钮的复合动画效果,这个效果的代码我是直接粘贴的官方帮助文档里的代码,看着效果还不赖^_^二、逐帧动画我们知道,Android是不支持Gif动画的,也不建议使用Gif动画,比较不幸的是到Android 2.2版本为止也不支持APNG这种png动画格式,所以我们制作只能用多张png图片逐帧播放的方式来实现动画效果。下面我们用一个例子来学习一下逐帧动画。1、新建一个项目 Lesson24_FrameAnimation , 主Acitivy名字叫 MainFrameAnimation.java2、拷贝下列图片到 res/drawable目录下
2、在res/anim目录下,新建一个文件 firefox_animation.xml 内容如下:
  1. <?xml version="1.0" encoding="utf-8"?>
复制代码
3、在res/layout/main.xml中写入如下内容:

  1. <?xml version="1.0" encoding="utf-8"?>

  2.         <button>
  3.         </button>
  4.         <button>
  5.         </button>
复制代码
4、在MainFrameAnimation.javaz中的内容如下:

  1. package android.basic.lesson24;

  2. import android.app.Activity;
  3. import android.graphics.drawable.AnimationDrawable;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.widget.Button;
  8. import android.widget.ImageView;

  9. public class MainFrameAnimaton extends Activity {
  10.         /** Called when the activity is first created. */
  11.         @Override
  12.         public void onCreate(Bundle savedInstanceState) {
  13.                 super.onCreate(savedInstanceState);
  14.                 setContentView(R.layout.main);

  15.                 // 定义UI组件
  16.                 Button b1 = (Button) findViewById(R.id.Button01);
  17.                 Button b2 = (Button) findViewById(R.id.Button02);
  18.                 final ImageView iv = (ImageView) findViewById(R.id.ImageView01);

  19.                 // 定义点击监听器
  20.                 OnClickListener ocl = new OnClickListener() {

  21.                         @Override
  22.                         public void onClick(View v) {

  23.                                 // 定义"动画可画"对象,我起的名字,你看着不顺眼就当不存在^_^
  24.                                 AnimationDrawable ad = (AnimationDrawable) iv.getBackground();

  25.                                 switch (v.getId()) {
  26.                                 case R.id.Button01:
  27.                                         //调用动画可画对象的开始播放方法
  28.                                         ad.start();
  29.                                         break;
  30.                                 case R.id.Button02:
  31.                                         //调用动画可画对象的停止播放方法
  32.                                         ad.stop();
  33.                                         break;
  34.                                 }
  35.                         }
  36.                 };

  37.                 //绑定监听器
  38.                 b1.setOnClickListener(ocl);
  39.                 b2.setOnClickListener(ocl);
  40.         }
  41. }
复制代码
4、运行程序,查看效果:

换个背景再来一张,可以看到png动画的透明就是不一般^_^
顺便提一下,我的这些可爱的小狐狸图标,是在APNG这个项目中找到的,感兴趣的朋友去搜搜APNG吧。本讲就到这里吧。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0

主题

353

帖子

37

安币

初级码农

Rank: 1

发表于 2011-4-25 15:47:38 | 显示全部楼层
可以下载吗!

0

主题

15

帖子

34

安币

初级码农

Rank: 1

发表于 2011-7-14 09:19:17 | 显示全部楼层
不错,很不错

3

主题

37

帖子

192

安币

程序猿

Rank: 2

发表于 2011-7-14 18:01:16 | 显示全部楼层
有太多看不懂的地方啊,赶紧。。。

0

主题

205

帖子

306

安币

攻城狮

Rank: 3Rank: 3

发表于 2011-7-15 23:29:50 | 显示全部楼层
动画 XML 文件内容没有贴出来,最重要的是讲一下设置动画的参数。

1

主题

52

帖子

26

安币

程序猿

Rank: 2

发表于 2011-8-31 13:10:14 | 显示全部楼层
谢谢了,很好的学习哦

1

主题

182

帖子

73

安币

程序猿

Rank: 2

发表于 2011-9-21 14:13:15 | 显示全部楼层
要是能提供下载就好了,中间一些东西没有

0

主题

47

帖子

35

安币

程序猿

Rank: 2

发表于 2011-10-24 23:25:07 | 显示全部楼层
动画 XML 文件内容没有贴出来,最重要的是讲一下设置动画的参数
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区
联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表