前两天写过一篇Android动画学习的概述,大致的划分了下Android Animation的主要分类,没有看过的同学请移步:Android动画学习(一)——Android动画系统框架简介。今天接着来讲View Animation——Tween Animation。

   关于XML实现Animation可以参考Google官方的Animation Resources这一节(请肉身翻墙:-))

  Tween Animation,即补间动画,它提供了淡入淡出(alpha)、缩放(scale)、旋转(rotate)、移动(translate)等效果。它涉及的主要类如下图所示:

  其中,AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation、AnimationSet都为Animation的子类。AnimationSet为动画集,可以用addAnimation()方法将动画添加进去。

  下面开始分别讲诉通过代码和XML实现AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation动画效果。

  AlphaAnimation:

  通过XML实现(anim_alpha.xml):

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillBefore="true"
android:fillEnabled="false">
<!-- 两者同时设置,最终只显示fillAfter的效果 --> <!--
fromAlpha:Float.起始动画时的不透明度,0.0表示透明,1.0表示不透明
toAlpha:Float.结束动画时的不透明度,0.0表示透明,1.0表示不透明
-->
<!-- 透明度从1.0变到0.1,且动画结束后保留最后一帧的效果 -->
<alpha
android:duration="@integer/animation_duration"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>

  以下是代码和XML实现AlphaAnimation的代码片段(AlphaAnimationFragment.java)

 public void onClick(View v) {
switch (v.getId()) {
//XML实现Alpha动画效果
case R.id.btn_alpha_animation_xml:
//AnimationUtils.loadAnimation()方法返回Animation对象,所以alphaAnimation为Animation
alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha);
mAlphaTv.startAnimation(alphaAnimation);
break;
//Code实现Alpha动画效果
case R.id.btn_alpha_animation_code:
//AlphaAnimation(float fromAlpha,float toAlpha)
//fromAlpha:起始动画时的不透明度,0.0表示透明,1.0表示不透明
//toAlpha:结束动画时的不透明度,0.0表示透明,1.0表示不透明
//透明度从0.1——>1.0
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//设置动画时间
alphaAnimation.setDuration(getResources().getInteger(R.integer.animation_duration));
//开始动画
mAlphaTv.startAnimation(alphaAnimation);
break;
default:
break;
}
}

  ScaleAnimation:

  通过XML实现(anim_scale.xml):

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"> <!--
fromXScale & toXScale:Float.动画起始、结束时X坐标上的伸缩尺寸
fromYScale & toYScale:Float.动画起始、结束时Y坐标上的伸缩尺寸
pivotX & pivotY:Float.表示看不到任何效果
-->
<!-- X、Y轴从0.1伸展到1.0 -->
<scale
android:duration="@integer/animation_duration"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>

  以下是代码和XML实现ScaleAnimation的代码片段(ScaleAnimationFragment.java):

 public void onClick(View v) {
switch (v.getId()) {
//XML实现Scale动画效果
case R.id.btn_zoom_in:
//AnimationUtils.loadAnimation()方法返回Animation对象,所以alphaAnimation为Animation
scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale);
mScaleTargetTv.startAnimation(scaleAnimation);
break;
//Code实现Scale动画效果,从1.0缩到0.1
case R.id.btn_zoom_out:
//ScaleAnimation(float fromX, float toX, float fromY, float toY)
//第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
//第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。
//另外还有pivotXType、pivotYType:伸缩模式,
//pivotXValue、pivotYValue伸缩动画相对于x,y 坐标的开始位置
scaleAnimation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f);
scaleAnimation.setDuration(3000);
mScaleTargetTv.startAnimation(scaleAnimation);
break;
default:
break;
}
}

  RotateAnimation:

  通过XML实现(anim_rotate.xml):

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"> <!--
fromDegrees:Float.动画开始时的角度
toDegrees:Float.动画结束时的角度
pivotX & pivotY:Float or percentage.用Float(如(x,y)=(5,5))代表中心为整个布局的左上角(5,5),用百分比(如(x,y)=(50%,50%))代表中心为该控件的中心,用百分比(如(x,y)=(50%p,50%p))代表中心为该控件的父控件的中心
-->
<!-- 以自身为中心,在1500ms内旋转720度 -->
<rotate
android:duration="@integer/animation_duration"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" />
</set>

  以下是代码和XML实现RotateAnimation的代码片段(RotateAnimationFragment.java):

 public void onClick(View v) {
switch (v.getId()) {
//XML实现Rotate动画效果
case R.id.btn_rotate_xml:
//AnimationUtils.loadAnimation()方法返回Animation对象,所以rotateAnimation为Animation
rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate);
mRotateTv.startAnimation(rotateAnimation);
break;
//Code实现Rotate动画效果:每次点击都以自身中心点选择90度
case R.id.btn_rotate_code:
//RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)
//fromDegrees:动画开始时的角度
//toDegrees:动画结束时的角度
//pivotXType、pivotYType:中心点类型,主要有Animation.ABSOLUTE、Animation.RELATIVE_TO_PARENT、Animation.RELATIVE_TO_SELF
//pivotXValue、pivotYValue:根据pivotType决定旋转效果
rotateAnimation = new RotateAnimation(degree, degree + 90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(getResources().getInteger(R.integer.animation_duration));
//设置动画结束时是否停留在最后一帧
rotateAnimation.setFillAfter(true);
mRotateTv.startAnimation(rotateAnimation);
degree += 90;
break;
default:
break;
}
}

  TranslateAnimation:

  通过XML实现(anim_translate.xml):

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"> <!--
fromXDelta & toXDelta:位移开始和结束时x的位置。
fromYDelta & toYDelta:位移开始和结束时y的位置。
-->
<!-- 从(0,0)位移到(100,100) -->
<translate
android:duration="@integer/animation_duration"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="100" />
</set>

  以下是代码和XML实现TranslateAnimation的代码片段(TranslateAnimationFragment.java):

 public void onClick(View v) {
switch (v.getId()) {
//XML实现Translate动画效果
case R.id.btn_translate_xml:
//AnimationUtils.loadAnimation()方法返回Animation对象,所以translateAnimation为Animation
translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate);
translateAnimation.setFillAfter(true);
mTranslateTv.setText("点我点我,看看我是不是在新的位置!");
mTranslateTv.startAnimation(translateAnimation);
break;
//Code实现Translate动画效果
case R.id.btn_translate_code:
//TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
translateAnimation = new TranslateAnimation(0, 100, 0, 100);
translateAnimation.setFillAfter(true);
translateAnimation.setDuration(3000);
mTranslateTv.setText("点我点我,看看我是不是在新的位置!");
mTranslateTv.startAnimation(translateAnimation);
break;
case R.id.tv_translate:
Toast.makeText(getActivity(), "让你发现了,我还在老位置上!", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}

  这里有个有意思的事情,那就是执行TranslateAnimation动画之后,其实执行动画的那个View位置并没有改变而是依旧停留在老位置。用ScaleAnimation、RotateAnimation测试都可以得出相同的结论,AlphaAnimation测试的效果不太好展示,但是应该也是相同的。即:Tween Animation并不会改变View的位置、大小等属性,只会改变View的显示效果。

  

  把AlphaAnimation、ScaleAnimation、RotateAnimation、TranslateAnimation各自的效果都展示了一遍,最后就用AnimationSet来实现一个复杂的动画(MutipleAnimation)。

  实现MutipleAnimation也有多种方式,一种是将前面的xml动画全部用AnimationUtils.loadAnimation()方法生成Animation对象,然后用addAnimation添加到AnimationSet对象里,调用View的startAnimation执行(之前有说过AnimationSet是Animation的子类)。另一种是写一个anim_mutiple.xml,然后用AnimationUtils.loadAnimation()方法生成Animation对象,调用View的startAnimation执行。

  Mutiple Animation实现: 

  XML动画实现(anim_mutiple.xml)

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"> <!-- 各种单独特效的杂糅 -->
<alpha
android:duration="@integer/animation_duration"
android:fromAlpha="1.0"
android:toAlpha="0.1" /> <rotate
android:duration="@integer/animation_duration"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" /> <scale
android:duration="@integer/animation_duration"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1.0"
android:toYScale="1.0" /> <translate
android:duration="@integer/animation_duration"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="100" />
</set>

  代码实现:

 public void onClick(View v) {
switch (v.getId()) {
//Mutiple Animation实现方法一
case R.id.btn_mutiple_anim_one:
animationSet = new AnimationSet(true);
Animation alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha);
Animation scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale);
Animation rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate);
Animation translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
mMutipleTv.startAnimation(animationSet);
break;
//Mutiple Animation实现方法二
case R.id.btn_mutiple_anim_two:
Animation mutipleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_mutiple);
mMutipleTv.startAnimation(mutipleAnimation);
break;
default:
break;
}
}

  关于Tween Animation的使用就总结到这里,这是Tween Animation最简单的用法,等以后有更深入的理解后再来更新。文中涉及到的代码:AndroidDevLearn中的Animation模块。

  接下来讲述Frame Animation和Drawable Animation,敬请期待~

Android动画学习(二)——Tween Animation的更多相关文章

  1. Android动画效果之Tween Animation(补间动画)

    前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation ...

  2. Android动画效果之Property Animation进阶(属性动画)

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  3. Android动画效果之Frame Animation(逐帧动画)

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  4. Android动画学习笔记-Android Animation

    Android动画学习笔记-Android Animation   3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...

  5. android动画学习

    android动画学习   转载自:http://www.open-open.com/lib/view/open1329994048671.html 3.0以前,android支持两种动画模式,twe ...

  6. android拾遗——Android 动画学习笔记

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  7. Android JNI学习(二)——实战JNI之“hello world”

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  8. Android动画之二:View Animation

    作为一个博客<Android其中的动画:Drawable Animation>.android动画主要分为三大部分.上一篇博客已经解说Drawable Animation的使用方法,即逐帧 ...

  9. 安卓开发_浅谈Android动画(二)

    在学习了四个基本动画之后,现在要学习一些更有用的效果 先给出所有的动画xml <?xml version="1.0" encoding="utf-8"?& ...

随机推荐

  1. 整理react native的资料

    http://blog.csdn.net/jj120522/article/details/51900016  -----RN常见的错误 http://www.mamicode.com/info-de ...

  2. iOS地图

    地图 1.主要用到了地图展示和定位功能 CoreLocation框架的使用: 导入头文件        #import <CoreLocation/CoreLocation.h>CoreL ...

  3. 《社交网络》里的评分公式——ELO排名系统

    <社交网络>里的Mark Zackburg被女朋友甩后,在舍友的启发下,充分发挥了技术宅男自娱自乐的恶搞天分,做出了Facemash网站,对学校女生的相貌进行排名打分,结果网站访问流量过大 ...

  4. webstorm2016注册码

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  5. DSY2748*音量调节

    Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开始之前他想要改 ...

  6. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

  7. WPF整理-使用用户选择主题的颜色和字体

    “Sometimes it's useful to use one of the selected colors or fonts the user has chosen in theWindows ...

  8. wpf 逻辑树与可视化树

    XAML天生就是用来呈现用户界面的,这是由于它具有层次化的特性.在WPF中,用户界面由一个对象树构建而成,这棵树叫作逻辑树.逻辑树的概念很直观,但是为什么要关注它呢?因为几乎WPF的每一方面(属性.事 ...

  9. iOS开发系列--C语言之预处理

    概述 大家都知道一个C程序的运行包括编译和链接两个阶段,其实在编译之前预处理器首先要进行预处理操作,将处理完产生的一个新的源文件进行编译.由于预处理指令是在编译之前就进行了,因此很多时候它要比在程序运 ...

  10. [.net 面向对象程序设计进阶] (14) 缓存(Cache) (一) 认识缓存技术

    [.net 面向对象程序设计进阶] (14) 缓存(Cache)(一) 认识缓存技术 本节导读: 缓存(Cache)是一种用空间换时间的技术,在.NET程序设计中合理利用,可以极大的提高程序的运行效率 ...