Android动画学习(二)——Tween Animation
来源:互联网 发布:淘宝怎样刷好评 编辑:程序博客网 时间:2024/06/06 12:45
关于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):
1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:android="http://schemas.android.com/apk/res/android" 3 android:fillAfter="true" 4 android:fillBefore="true" 5 android:fillEnabled="false"> 6 <!-- 两者同时设置,最终只显示fillAfter的效果 --> 7 8 <!-- 9 fromAlpha:Float.起始动画时的不透明度,0.0表示透明,1.0表示不透明10 toAlpha:Float.结束动画时的不透明度,0.0表示透明,1.0表示不透明11 -->12 <!-- 透明度从1.0变到0.1,且动画结束后保留最后一帧的效果 -->13 <alpha14 android:duration="@integer/animation_duration"15 android:fromAlpha="1.0"16 android:toAlpha="0.1" />17 </set>
以下是代码和XML实现AlphaAnimation的代码片段(AlphaAnimationFragment.java)
1 public void onClick(View v) { 2 switch (v.getId()) { 3 //XML实现Alpha动画效果 4 case R.id.btn_alpha_animation_xml: 5 //AnimationUtils.loadAnimation()方法返回Animation对象,所以alphaAnimation为Animation 6 alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha); 7 mAlphaTv.startAnimation(alphaAnimation); 8 break; 9 //Code实现Alpha动画效果10 case R.id.btn_alpha_animation_code:11 //AlphaAnimation(float fromAlpha,float toAlpha)12 //fromAlpha:起始动画时的不透明度,0.0表示透明,1.0表示不透明13 //toAlpha:结束动画时的不透明度,0.0表示透明,1.0表示不透明14 //透明度从0.1——>1.015 alphaAnimation = new AlphaAnimation(0.1f, 1.0f);16 //设置动画时间17 alphaAnimation.setDuration(getResources().getInteger(R.integer.animation_duration));18 //开始动画19 mAlphaTv.startAnimation(alphaAnimation);20 break;21 default:22 break;23 }24 }
ScaleAnimation:
通过XML实现(anim_scale.xml):
1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <!-- 5 fromXScale & toXScale:Float.动画起始、结束时X坐标上的伸缩尺寸 6 fromYScale & toYScale:Float.动画起始、结束时Y坐标上的伸缩尺寸 7 pivotX & pivotY:Float.表示看不到任何效果 8 --> 9 <!-- X、Y轴从0.1伸展到1.0 -->10 <scale11 android:duration="@integer/animation_duration"12 android:fromXScale="0.1"13 android:fromYScale="0.1"14 android:toXScale="1.0"15 android:toYScale="1.0" />16 </set>
以下是代码和XML实现ScaleAnimation的代码片段(ScaleAnimationFragment.java):
1 public void onClick(View v) { 2 switch (v.getId()) { 3 //XML实现Scale动画效果 4 case R.id.btn_zoom_in: 5 //AnimationUtils.loadAnimation()方法返回Animation对象,所以alphaAnimation为Animation 6 scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale); 7 mScaleTargetTv.startAnimation(scaleAnimation); 8 break; 9 //Code实现Scale动画效果,从1.0缩到0.110 case R.id.btn_zoom_out:11 //ScaleAnimation(float fromX, float toX, float fromY, float toY)12 //第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。13 //第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。14 //另外还有pivotXType、pivotYType:伸缩模式,15 //pivotXValue、pivotYValue伸缩动画相对于x,y 坐标的开始位置16 scaleAnimation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f);17 scaleAnimation.setDuration(3000);18 mScaleTargetTv.startAnimation(scaleAnimation);19 break;20 default:21 break;22 }23 }
RotateAnimation:
通过XML实现(anim_rotate.xml):
1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:android="http://schemas.android.com/apk/res/android" 3 android:fillAfter="true"> 4 5 <!-- 6 fromDegrees:Float.动画开始时的角度 7 toDegrees:Float.动画结束时的角度 8 pivotX & pivotY:Float or percentage.用Float(如(x,y)=(5,5))代表中心为整个布局的左上角(5,5),用百分比(如(x,y)=(50%,50%))代表中心为该控件的中心,用百分比(如(x,y)=(50%p,50%p))代表中心为该控件的父控件的中心 9 -->10 <!-- 以自身为中心,在1500ms内旋转720度 -->11 <rotate12 android:duration="@integer/animation_duration"13 android:fromDegrees="0"14 android:pivotX="50%"15 android:pivotY="50%"16 android:toDegrees="720" />17 </set>
以下是代码和XML实现RotateAnimation的代码片段(RotateAnimationFragment.java):
1 public void onClick(View v) { 2 switch (v.getId()) { 3 //XML实现Rotate动画效果 4 case R.id.btn_rotate_xml: 5 //AnimationUtils.loadAnimation()方法返回Animation对象,所以rotateAnimation为Animation 6 rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate); 7 mRotateTv.startAnimation(rotateAnimation); 8 break; 9 //Code实现Rotate动画效果:每次点击都以自身中心点选择90度10 case R.id.btn_rotate_code:11 //RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)12 //fromDegrees:动画开始时的角度13 //toDegrees:动画结束时的角度14 //pivotXType、pivotYType:中心点类型,主要有Animation.ABSOLUTE、Animation.RELATIVE_TO_PARENT、Animation.RELATIVE_TO_SELF15 //pivotXValue、pivotYValue:根据pivotType决定旋转效果16 rotateAnimation = new RotateAnimation(degree, degree + 90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);17 rotateAnimation.setDuration(getResources().getInteger(R.integer.animation_duration));18 //设置动画结束时是否停留在最后一帧19 rotateAnimation.setFillAfter(true);20 mRotateTv.startAnimation(rotateAnimation);21 degree += 90;22 break;23 default:24 break;25 }26 }
TranslateAnimation:
通过XML实现(anim_translate.xml):
1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:android="http://schemas.android.com/apk/res/android" 3 android:fillAfter="true"> 4 5 <!-- 6 fromXDelta & toXDelta:位移开始和结束时x的位置。 7 fromYDelta & toYDelta:位移开始和结束时y的位置。 8 --> 9 <!-- 从(0,0)位移到(100,100) -->10 <translate11 android:duration="@integer/animation_duration"12 android:fillAfter="true"13 android:fromXDelta="0"14 android:fromYDelta="0"15 android:toXDelta="100"16 android:toYDelta="100" />17 </set>
以下是代码和XML实现TranslateAnimation的代码片段(TranslateAnimationFragment.java):
1 public void onClick(View v) { 2 switch (v.getId()) { 3 //XML实现Translate动画效果 4 case R.id.btn_translate_xml: 5 //AnimationUtils.loadAnimation()方法返回Animation对象,所以translateAnimation为Animation 6 translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate); 7 translateAnimation.setFillAfter(true); 8 mTranslateTv.setText("点我点我,看看我是不是在新的位置!"); 9 mTranslateTv.startAnimation(translateAnimation);10 break;11 //Code实现Translate动画效果12 case R.id.btn_translate_code:13 //TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)14 translateAnimation = new TranslateAnimation(0, 100, 0, 100);15 translateAnimation.setFillAfter(true);16 translateAnimation.setDuration(3000);17 mTranslateTv.setText("点我点我,看看我是不是在新的位置!");18 mTranslateTv.startAnimation(translateAnimation);19 break;20 case R.id.tv_translate:21 Toast.makeText(getActivity(), "让你发现了,我还在老位置上!", Toast.LENGTH_SHORT).show();22 break;23 default:24 break;25 }26 }
这里有个有意思的事情,那就是执行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)
1 <?xml version="1.0" encoding="utf-8"?> 2 <set xmlns:android="http://schemas.android.com/apk/res/android" 3 android:fillAfter="true"> 4 5 <!-- 各种单独特效的杂糅 --> 6 <alpha 7 android:duration="@integer/animation_duration" 8 android:fromAlpha="1.0" 9 android:toAlpha="0.1" />10 11 <rotate12 android:duration="@integer/animation_duration"13 android:fromDegrees="0"14 android:pivotX="50%"15 android:pivotY="50%"16 android:toDegrees="720" />17 18 <scale19 android:duration="@integer/animation_duration"20 android:fromXScale="0.1"21 android:fromYScale="0.1"22 android:toXScale="1.0"23 android:toYScale="1.0" />24 25 <translate26 android:duration="@integer/animation_duration"27 android:fillAfter="true"28 android:fromXDelta="0"29 android:fromYDelta="0"30 android:toXDelta="100"31 android:toYDelta="100" />32 </set>
代码实现:
1 public void onClick(View v) { 2 switch (v.getId()) { 3 //Mutiple Animation实现方法一 4 case R.id.btn_mutiple_anim_one: 5 animationSet = new AnimationSet(true); 6 Animation alphaAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_alpha); 7 Animation scaleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_scale); 8 Animation rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_rotate); 9 Animation translateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_translate);10 animationSet.addAnimation(alphaAnimation);11 animationSet.addAnimation(scaleAnimation);12 animationSet.addAnimation(rotateAnimation);13 animationSet.addAnimation(translateAnimation);14 mMutipleTv.startAnimation(animationSet);15 break;16 //Mutiple Animation实现方法二17 case R.id.btn_mutiple_anim_two:18 Animation mutipleAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_mutiple);19 mMutipleTv.startAnimation(mutipleAnimation);20 break;21 default:22 break;23 }24 }
关于Tween Animation的使用就总结到这里,这是Tween Animation最简单的用法,等以后有更深入的理解后再来更新。文中涉及到的代码:AndroidDevLearn中的Animation模块。
接下来讲述Frame Animation和Drawable Animation,敬请期待~
- Android动画学习(二)——Tween Animation
- Android动画学习——Tween Animation
- Android 动画——Frame Animation与Tween Animation
- Android 动画——Frame Animation与Tween Animation
- Android Tween Animation 动画(二)
- Android动画解析(二)—— Tween Animation(补间动画)
- Android开发之动画(Animation)——Tween动画
- Android动画——补间动画(Tween Animation)
- android-animation Tween动画
- Android当中的动画3—自定义Tween Animation
- android 动画-Tween Animation(二) 动画的简单使用
- Android 动画解析(二) 补间动画(Tween Animation)
- Android 动画之二 View Animation —— 补间(Tween)动画与Interpolator的介绍
- Android学习篇章18-动画:Tween动画Animation
- Android学习——Tween动画
- 【UX】Android动画 - Tween Animation
- Android动画之Tween Animation
- Android动画介绍-Tween Animation
- 将博客搬至CSDN
- google 的autodraw
- Android LayoutInflater 源码分析及个人总结
- java输出实心菱形
- Nuttx 工作队列 work queue
- Android动画学习(二)——Tween Animation
- 2011年09月05日
- 详谈String类
- 区域内的人数预测算法对比实验分析
- 欢迎使用 MWeb
- 详谈StringBuffer
- Ionic2中的相册选择和拍照上传——ImgService
- 【热文】 为什么程序员痴迷于猫?
- 时间和日期的格式化和解析