第七章 实现炫酷效果—图像和动画（5）

7.7渐变动画—Tween Animation

7.7.1Tween Animation简介

一个Tween动画将对视图对象中的内容进行一系列简单的转换（位置，大小，旋转，透明性）。如果你有一个文本视图对象，你可以移动它，旋转它，让它变大或让它变小，如果文字下面还有背景图像，背景图像也会随着文件进行转换。

可以使用XML来定义Tween Animation。首先将动画的XML文件在工程中res/anim目录，这个文件必须包含一个根元素，可以使<alpha><scale> <translate> <rotate>插值元素或者是把上面的元素都放入<set>元素组中，默认情况下，所以的动画指令都是同时发生的，为了让他们按序列发生，需要设置一个特殊的属性startOffset。动画的指令定义了你想要发生什么样的转换，当他们发生了，应该执行多长时间，转换可以是连续的也可以使同时的。例如，你让文本内容从左边移动到右边，然后旋转180度，或者在移动的过程中同时旋转，没个转换需要设置一些特殊的参数（开始和结束的大小尺寸的大小变化，开始和结束的旋转角度等等，也可以设置些基本的参数（例如，开始时间与周期），如果让几个转换同时发生，可以给它们设置相同的开始时间，如果按序列的话，计算开始时间加上其周期。

7.7.2Tween Animation共同的属性

下面来说明下Tween Animation共同的节点属性。

l  android:duration[long]—属性为动画持续时间   时间以毫秒为单位。

l  android:fillAfter[boolean] —当设置为true，该动画转化在动画结束后被应用。

l  android:fillBefore[boolean—当设置为true，该动画转化在动画开始前被应用。

l  android:interpolator—指定一个动画的插入器有一些常见的插入器。

n  accelerate_decelerate_interpolator—加速-减速 动画插入器。

n  accelerate_interpolator—加速-动画插入器。

n  decelerate_interpolator—减速- 动画插入器。

l  android:repeatCount[int]—动画的重复次数。-1表示无限循环

l  android:RepeatMode[int]—定义重复的行为，1：重新开始  2：plays backward。

l  android:startOffset[long]—动画之间的时间间隔，从上次动画停多少时间开始执行下个动画。

l  android:zAdjustment[int]—定义动画的Z Order的改变    0：保持Z Order不变，1：保持在最上层，-1：保持在最下层。

7.7.3淡进淡出—AlphaAnimation

AlphaAnimation是通过修改图片的透明度来实现的动画效果，如图7-6所示。

    

图7-6 AlphaAnimation动画效果

下面我们来解析AlphaAnimation的构造XML文档：


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

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<alpha

android:fromAlpha="0.1"

android:toAlpha="1.0"

android:duration="3000"

/>

<!-- 透明度控制动画效果 alpha

浮点型值：

fromAlpha 属性为动画起始时透明度

toAlpha   属性为动画结束时透明度

说明:

0.0表示完全透明

1.0表示完全不透明

以上值取0.0-1.0之间的float数据类型的数字

-->

</set>

在代码中的AlphaAnimation：


// 初始化函数：

// AlphaAnimation(float fromAlpha, float toAlpha)

// 第一个参数fromAlpha为动画开始时候透明度,对应XML中的fromAlpha属性

// 第二个参数toAlpha为动画结束时候透明度,对应XML中的toAlpha属性

AlphaAnimation mAlphaAnimation =new AlphaAnimation(0.1f, 1.0f);

// 设置时间持续时间为 5000毫秒

mAlphaAnimation.setDuration(5000);

7.7.4忽大忽小—ScaleAnimation

ScaleAnimation是通过修改图片的大小的动画效果，如图7-7所示。

 

图7-7 ScaleAnimation动画效果

下面我们来解析ScaleAnimation的构造XML文档：


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

<set xmlns:android="http://schemas.android.com/apk/res/android">

<scale

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:fillAfter="false"

android:duration="700" />

</set>

<!—大小伸缩动画效果 scale

属性：interpolator 指定一个动画的插入器

浮点型值：

fromXScale 属性为动画起始时 X坐标上的伸缩尺寸

toXScale   属性为动画结束时 X坐标上的伸缩尺寸

fromYScale 属性为动画起始时Y坐标上的伸缩尺寸

toYScale   属性为动画结束时Y坐标上的伸缩尺寸

(以上四种属性值, 0.0表示收缩到没有，1.0表示正常无伸缩

值小于1.0表示收缩 ，值大于1.0表示放大)

pivotX     属性为动画相对于物件的X坐标的开始位置

pivotY     属性为动画相对于物件的Y坐标的开始位置

(以上两个属性值 从0%-100%中取值,

50%为物件的X或Y方向坐标上的中点位置)

-->

在代码中的ScaleAnimation：


// 初始化函数：

// ScaleAnimation(float fromX, float toX, float fromY, float toY,

//           int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

// 第一个参数fromX为动画起始时 X坐标上的伸缩尺寸

// 第二个参数toX为动画结束时 X坐标上的伸缩尺寸

// 第三个参数fromY为动画起始时Y坐标上的伸缩尺寸

// 第四个参数toY为动画结束时Y坐标上的伸缩尺寸

// 第五个参数pivotXType为动画在X轴相对于物件位置类型

// 第六个参数pivotXValue为动画相对于物件的X坐标的开始位置

// 第七个参数pivotXType为动画在Y轴相对于物件位置类型

// 第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置

ScaleAnimation  mScaleAnimation =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// 设置时间持续时间为 700毫秒

mScaleAnimation.setDuration(700);

7.7.5平移—TranslateAnimation

TranslateAnimation是通过修改图片的位置的动画效果，如图7-8所示：

 

图7-8 TranslateAnimation动画效果

下面我们来解析TranslateAnimation的构造XML文档：


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

<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate

android:fromXDelta="30"

android:toXDelta="-80"

android:fromYDelta="30"

android:toYDelta="300"

android:duration="2000"

/>

<!-- translate 位置转移动画效果

整型值:

fromXDelta 属性为动画起始时 X坐标上的位置

toXDelta   属性为动画结束时 X坐标上的位置

fromYDelta 属性为动画起始时 Y坐标上的位置

toYDelta   属性为动画结束时 Y坐标上的位置

-->

</set>

在代码中的TranslateAnimation：


// 初始化函数：

// TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

// 第一个参数fromXDelta为动画起始时 X坐标上的移动位置

// 第二个参数toXDelta为动画结束时 X坐标上的移动位置

// 第三个参数fromYDelta为动画起始时Y坐标上的移动位置

// 第四个参数toYDelta为动画结束时Y坐标上的移动位置

TranslateAnimation  mTranslateAnimation = TranslateAnimation(0f, 100f, 0f, 100f) ;

// 设置时间持续时间为 700毫秒

mTranslateAnimation.setDuration(700);

7.7.6旋转—RotateAnimation

RotateAnimation是旋转图片的动画效果，如图7-9所示：

 

图7-9 RotateAnimation动画效果

下面我们来解析RotateAnimation的构造XML文档：


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

<set xmlns:android="http://schemas.android.com/apk/res/android">

<rotate

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromDegrees="0"

android:toDegrees="+350"

android:pivotX="50%"

android:pivotY="50%"

android:duration="3000" />

<!-- rotate 旋转动画效果

属性：interpolator 指定一个动画的插入器

浮点数型值:

fromDegrees 属性为动画起始时物件的角度

toDegrees   属性为动画结束时物件旋转的角度 可以大于360度

(当角度为负数——表示逆时针旋转

当角度为正数——表示顺时针旋转

(负数from——to正数:顺时针旋转)

(负数from——to负数:逆时针旋转)

(正数from——to正数:顺时针旋转)

(正数from——to负数:逆时针旋转) )

pivotX     属性为动画相对于物件的X坐标的开始位置

pivotY     属性为动画相对于物件的Y坐标的开始位置

(以上两个属性值 从0%-100%中取值

50%为物件的X或Y方向坐标上的中点位置)

-->

</set>

在代码中的RotateAnimation：


// 初始化函数：

// RotateAnimation(float fromDegrees, float toDegrees,

//    int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

// 第一个参数fromDegrees为动画起始时的旋转角度

// 第二个参数toDegrees为动画旋转到的角度

// 第三个参数pivotXType为动画在X轴相对于物件位置类型

// 第四个参数pivotXValue为动画相对于物件的X坐标的开始位置

// 第五个参数pivotXType为动画在Y轴相对于物件位置类型

// 第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置

RotateAnimation mRotateAnimation =new RotateAnimation(0.0f, +350.0f,

Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

// 设置时间持续时间为 700毫秒

mRotateAnimation.setDuration(700);

7.7.7实现一个自己的TweenAnimation

下面我们来将上面的知识综合起来实现一个自己的TweenAnimation。

1）在工程中res/anim目录下构建一个TweenAnimation文件animation_1.xml如下：


<set android:shareInterpolator="false"

xmlns:android="http://schemas.android.com/apk/res/android">

<scale

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromXScale="1.0"

android:toXScale="1.4"

android:fromYScale="1.0"

android:toYScale="0.6"

android:pivotX="50%"

android:pivotY="50%"

android:fillAfter="false"

android:duration="700" />

<set android:interpolator="@android:anim/decelerate_interpolator">

<scale

android:fromXScale="1.4"

android:toXScale="0.0"

android:fromYScale="0.6"

android:toYScale="0.0"

android:pivotX="50%"

android:pivotY="50%"

android:startOffset="700"

android:duration="400"

android:fillBefore="false" />

<rotate

android:fromDegrees="0"

android:toDegrees="-45"

android:toYScale="0.0"

android:pivotX="50%"

android:pivotY="50%"

android:startOffset="700"

android:duration="400" />

</set>

</set>

2）在java代码中载入并执行动画：


// import略

public class myAnimation extends Activity implements OnClickListener {

private Button mButton;

private Animation mAnimation;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

mButton = (Button) findViewById(R.id.button_id);

mButton.setOnClickListener(this);

}

public void onClick(View button) {

switch (button.getId()) {

case R.id.button_id: {

mAnimation= AnimationUtils.loadAnimation(this,R.anim. animation_1);

mButton.startAnimation(mAnimation);

}

break;

}

}

}

经验分享：

与AnimationDrawable不同，如果animation.start();在onCreate()中执行的话，是可以播放出来的，就是一进来就播放动画了。

同时我们也通过animation_1.xml文件发现，多个TweenAnimation是可以写在一起的，他们会按照顺序来实现动画。
时间： 2024-08-30 08:19:35

第七章 实现炫酷效果—图像和动画（5）的相关文章

第七章 实现炫酷效果—图像和动画（1）

第七章实现炫酷效果-图像和动画 学完上一章,相信读者对Android画图核心部分有了一定的了解.为了实现更加炫酷的效果,我们可能会在我们的应用中使用大量的图像和动画效果. 本章我们将详细介绍Android中的各种图像对象的使用,以及动画的使用.学习完本章,相信读者可以独立开发出有着绚丽的视觉效果的Android应用了. 7.1 Android的几种常用图像类型 Android中的图像对象,主要有android.graphics.Bitmap(位图).android.graphics.drawab

第七章 实现炫酷效果—图像和动画（3）

7.3.6超炫的特效-ShapeDrawable 当你想去使用一些常用的图形,ShapeDrawable对象可能会对你有很大的帮助.当然通过ShapeDrawable,你可以通过编程画出任何你想到的图像与样式,因为ShapeDrawable有自己的draw()方法. ShapeDrawable继承了Drawable,所以你可以调用Drawable里有的函数,使用方法和其他的Drawable的子类差不多.下面我们来介绍它的特色. 通过ShapeDrawable的XML构造文件来了解ShapeDra

第七章 实现炫酷效果—图像和动画（2）

7.3变化多端-Drawable(绘图类) Drawable资源是Android系统中使用最广泛.最灵活的资源,可以直接使用png.jpg.gif.9.png等图片做为资源文件,也可以使用多种XML文件做为资源文件. 下面详细介绍下各种Drawable资源. 7.3.1Drawable的一些常用子类 Android平台的Drawable代表可以绘制在屏幕上的资源,可以使用getDrawable(int)从资源文件中获取Drawable资源,或者在XML资源文件中采用@drawable方式来引用一

第七章 实现炫酷效果—图像和动画（6）

7.8渐变动画-Frame Animation FrameAnimation是按顺序播放事先做好的图像,跟播放电影类似.可以参考前面的7.3.7章节--<简单的帧动画-AnimationDrawable>. 经验分享: AnimationDrawable也可以通过代码来生成AnimationDrawable对象: AnimationDrawable mAnimationDrawable = new AnimationDrawable(); mAnimationDrawable.addFrame

10大炫酷的HTML5文字动画特效欣赏

文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HTML5和CSS3的强大之处就在于此.本文分享的10款炫酷的HTML5文字动画特效非常不错,一起来看看吧. 1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

开源分享三（炫酷的Android Loading动画）

开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用户注意力,不会显得那么烦躁,所以你可以看到市面上一些App中的各种各样的Loading动画,从这些实现思路上可以打开你们自己的思维,没准也会有创新的Loading动画出现. android-shapeLoadingView 新版58同城加载页面动画. CircleProgress 一个效果很酷炫很创

8个经典炫酷的HTML5 Canvas动画欣赏

HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮助. 1.HTML5 Canvas可拖动的弹性大树摇摆动画 今天让我们继续来分享一个炫酷的HTML5动画,它是一款基于HTML5 Canvas的大树摇摆动画,这款HTML5动画的特点是我们可以拖拽树枝,从而让整棵树摇摆起来,这样就真实地模拟了大树从摇摆到静止的整个过程,相当逼真. 在线演示     

经典炫酷的HTML5/jQuery动画应用示例及源码

jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富多彩,因为利用HTML5,我们可以制作更加绚丽动感的动画特效,HTML5结合jQuery,真是我们开发者的福利啊.本文分享了一些经典炫酷的HTML5/jQuery动画应用,喜欢的朋友可以分享和收藏. jquery视差滑块幻灯特效 很传统的一款jQuery焦点图插件,但是该焦点图插件是宽屏的,整体看起