帧动画、补间动画详解、对话框

帧动画

帧动画很简单,我们首先看一下Google官方解释This is a traditional animation in the sense that it is created with a sequence of different images。

意思表达的很明了,一个传统的动画是由一组不同的图片组成的。帧动画,就像GIF图片,通过一系列Drawable依次显示来模拟动画的效果。

创建一帧动画分为一下几步(支持4.0以上):①在项目工程下,创建res/drawable目录;

②创建一个以<animation-list>为根元素的xml文件,并在根节点下面,添加一组<item>结点,用来加载图片。

============>③将一组图片放置在res/drawable目录下

④在layout布局文件中,添加一个<ImageView> 并在代码中找到,并且设置相关的资源。

// 找到ImageView控件ImageView iv = (ImageView) findViewById(R.id.iv);// 为IV设置背景资源iv.setBackgroundResource(R.drawable.girl);// 创建帧动画并开始AnimationDrawable rocketAnimation = (AnimationDrawable) iv.getBackground();rocketAnimation.start();补间动画(Tween Animation)

补间动画的名称来源是flash,在做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。

先介绍一些关键的方法:Animation: ★ setDuration设置动画的执行时间 ★ setRepeatCount 设置动画的重复次数 ★ setRepeatMode指定重复的模式(如:反转) ★ setFillAfter指示动画指定完毕之后控件的状态是否停留在动画停 止的时候 ★ setAnimationListener 设置动画的事件监听器ImageView: ★ startAnimation(Animation a) 让ImageView执行某动画补间动画分为(透明、旋转、缩放、位移)等四种:

①透明(Alpha),动画涉及到很多操作,详细的注释已经添加到代码中了

fromAlpha = 1.0f;float toAlpha = 0.0f;AlphaAnimation aa = new AlphaAnimation(fromAlpha, toAlpha);// 动画的配置aa.setDuration(2 * 1000); // 动画持续多久aa.setFillAfter(true); // 设为true之后,界面会停留在动画播放完时的界面aa.setRepeatCount(1); // 设置动画重复的次数aa.setRepeatMode(Animation.RESTART); // 动画重启或逆转,默认值为重启动画// 启动动画iv.startAnimation(aa);

②旋转(roate),涉及到很多概念,代码下面也会以图例解释的

// 旋转的起始角度float fromDegrees = 0;// 旋转的目标角度float toDegrees = 360;pivotXType = Animation.RELATIVE_TO_SELF;pivotXValue = 0.0f;// Y轴的原点的类型int pivotYType = Animation.RELATIVE_TO_SELF;// 开始伸缩时的Y轴的原点float pivotYValue = 0.0f;/* *这里对pivotXValue和pivotYValue的值详细说明一下 *在Android中的坐标轴Y轴向下是增张的,X轴向右是增长的; *pivotXValue在API中被说明为:旋转的X轴坐标的值,一般被指定为一个百分比数;1.0代表着100% *也就是说,当我们指定为0.0f时,代表作是图片的X轴的0点;当指定为0.5f时,代表图片的width/2的位置;当被指定为1.0f时,代表图片的width位置; */RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);// 动画的配置ra.setDuration(2 * 1000); // 动画持续多久ra.setRepeatCount(1); // 设置动画重复的次数ra.setStartOffset(2 * 1000); // 设置动画启动时间的偏移量,简单来说就是多长时间后启动动画// 启动动画iv.startAnimation(ra);

大家肯定会对pivotXValue和pivotYValue很困惑,pivot是中心点的意思,也就是代表旋转动画X轴的坐标和旋转动画Y轴的坐标,亲,请看图吧。

我觉得画的还是挺清晰的。

③缩放(scale)

fromX = 0.0f;// 水平方向比例尺的终值float toX = 2.0f;// 垂直方向比例尺的起始值float fromY = 0.0f;// 垂直方向比例尺的终值float toY = 2.0f;// X轴的原点的类型(相对于自己而言还是相对于父容器而言)int pivotXType = Animation.RELATIVE_TO_SELF;// 开始伸缩时的X轴的原点(例:0.5就是指以图片宽度的二分之一的位置作为X轴的原点)float pivotXValue = 0.0f;int pivotYType = Animation.RELATIVE_TO_SELF;float pivotYValue = 0.0f;ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);sa.setDuration(2 * 1000);// 整个动画会呈现,从左上角向右下加放大2倍iv.startAnimation(sa);

图片示例如下:

④位移(translate),下面是位移的代码,参数很多,但是不太好解释,所以还是用图片来说说明

// 位移的x轴起始坐标的类型(相对于自己还是相对父容器)int fromXType = Animation.RELATIVE_TO_PARENT;// x轴起点float fromXValue = -0.5f;int toXType = Animation.RELATIVE_TO_PARENT;// X轴的终点float toXValue = 0.5f;int fromYType = Animation.RELATIVE_TO_PARENT;// Y轴的起始坐标float fromYValue = -0.5f;int toYType = Animation.RELATIVE_TO_PARENT;// Y轴的终点坐标float toYValue = 0.5f;TranslateAnimation ta = new TranslateAnimation(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);ta.setDuration(2 * 1000);iv.startAnimation(ta);

位移示意图:

我们可以看到,在位移中,屏幕中央是(0.0f,0.0f),左上角的坐标为(-0.5f,-0.5f),右下角为(0.5f,0.5f);当以上面的代码运行时,图片会从左上角平移到右下角。

别小看任何人,越不起眼的人。往往会做些让人想不到的事。

帧动画、补间动画详解、对话框

相关文章:

你感兴趣的文章:

标签云: