Android动画学习(二)——Tween Animation
2015-11-09 12:08
537 查看
前两天写过一篇Android动画学习的概述,大致的划分了下Android Animation的主要分类,没有看过的同学请移步:Android动画学习(一)——Android动画系统框架简介。今天接着来讲View Animation——Tween Animation。
关于XML实现Animation可以参考Google官方的Animation Resources这一节(请肉身FQ:-))
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实现AlphaAnimation的代码片段(AlphaAnimationFragment.java)
ScaleAnimation:
通过XML实现(anim_scale.xml):
以下是代码和XML实现ScaleAnimation的代码片段(ScaleAnimationFragment.java):
RotateAnimation:
通过XML实现(anim_rotate.xml):
以下是代码和XML实现RotateAnimation的代码片段(RotateAnimationFragment.java):
TranslateAnimation:
通过XML实现(anim_translate.xml):
以下是代码和XML实现TranslateAnimation的代码片段(TranslateAnimationFragment.java):
这里有个有意思的事情,那就是执行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)
代码实现:
关于Tween Animation的使用就总结到这里,这是Tween Animation最简单的用法,等以后有更深入的理解后再来更新。文中涉及到的代码:AndroidDevLearn中的Animation模块。
接下来讲述Frame Animation和Drawable Animation,敬请期待~
关于XML实现Animation可以参考Google官方的Animation Resources这一节(请肉身FQ:-))
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 studio中报error: Apostrophe not preceded by \错误
- Android上ROS开发介绍与安装简介
- android之ScrollView里嵌套ListView
- Android开发:shape和selector和layer-list的(详细说明)
- Android打包的那些事
- android 注册广播代码(备用)
- 深入浅出 - Android系统移植与平台开发(十)- Android编译系统与定制Android平台系统
- Android:LayoutInflater 如何使用
- 深入浅出 - Android系统移植与平台开发(十一)- Android系统的定制
- 简要的汇总Android
- android textview 行间距设置
- Android的AIDL 解释Demo
- Android编译系统详解(三)
- Android电视开发问题收集——在实际开发中遇到的问题及其解决方案
- Android编译系统详解(二)
- Android[初级] Android Develo 4000 per Tools 之 HelloWrold
- Android RelativeLayout 属性
- Android编译系统详解(一)
- Android中Snackbar的介绍以及使用
- Android中Snackbar的介绍以及使用