Android动画机制(1):帧动画、补间动画详解及实战演练

 

 作者:

 蒋东国                                                                                         

 时间:

 2017年03月05日 星期日

 应用来源:

 无

 博客地址:

 http://blog.csdn.net/andrexpert/article/details/60480009

      

       情景再现“Android目前包含四种动画:Property Animation、View Animation、Drawable Animation、SVG,其中,属性动画被引入于Android 3.0,它可应用于任何对象;视图动画包含旋转、缩放、移动、透明度动画效果,但只适用于View;SVG矢量动画被引入与Android5.0,通过SVG可以创建更加丰富的动画效果。”

 

1.  逐帧动画(Drawable Animation)

      逐帧动画是利用了人眼的视觉暂留特性,通过依次显示多张静态图片达到播放动画的效果。定义逐帧动画非常简单,只要在< animation-list../>元素中使用子元素定义动画的全部帧,并指定各帧的持续时间。举例如下:

                

       其中,android:oneshot属性用于控制动画是否循环播放。当然,Android也支持在Java代码中使用AnimationDrawable对象,并调用addFrame(Drawable frame,int duration)向该动画中添加一帧。对XML文件的使用如下:

       ImageView mIvLoading =(ImageView) findViewById(R.id.iv_xiaomei);       mIvLoading.setBackgroundResource(R.drawable.animlist_loading_progess);         AnimationDrawablemAnim = (AnimationDrawable) mIvLoading.getBackground();       mAnim.start();

示例:仿美团数据加载动画效果

Android动画机制(1):帧动画、补间动画详解及实战演练_第1张图片

 

2.  补间动画(View Animation)

(1)  缩放动画

     视图缩放动画表示View以(pivotX, pivotY),它在XML文件中用< scale./>属性标识,其Java层对应的类为ScaleAnimation。

 

       其中,android:interpolator属性用于指定动画播放的速度类型,比如android:[email protected]:anim/linear_interpolator"表示缩放动画匀速进行;android:fromX(Y)Scale、android:toX(Y)Scale属性用于指定View在X或Y方向上缩放比例的起止大小,以1.0表示View正常大小;android:pivotX、android:pivotY属性用于指定View进行缩放时的轴中心,比如值分别为50、50时表示以View所在的父组件布局的50%位置为缩放的轴中心,若值分别为50%、50%时表示表示以View自身所在布局区域的50%位置(即View的中心位置)为缩放的轴中心; android:duration属性用于指定动画持续的时间,单位为ms;android:fillAfter属性用于指定view缩放之后的状态,true表示保持view缩放之后的状态。对于的Java代码实现如下:

ScaleAnimationscaleAnim = new ScaleAnimation(0, 1, 0, 1,        //从无缩放大到正常大小Animation.RELATIVE_TO_SELF,0.5F,                                       //以view自身中点为轴中心Animation.RELATIVE_TO_SELF,0.5F);scaleAnim.setInterpolator(newLinearInterpolator());                     //匀速播放scaleAnim.setDuration(1000);                                                         //持续1sscaleAnim.setFillAfter(true);                                                           //保持缩放之后的效果view.startAnimation(scaleAnim);

(2)  移动动画

        视图移动动画表示View在垂直或水平方向进行位置移动,它在XML文件中用< translate ./>属性标识,其Java层对应的类为TranslateAnimation。View的移动动画支持三种数据格式:-100%~100%表示移动的距离以view自身尺寸大小为基准;-100%p~100%p表示移动的距离以view所在的父组件尺寸大小为基准;任意无含%后缀浮点值(如float x)表示移动的距离为相对以view当前位置为原点移动的大小x(dp)。

       其中,android:fromXDelta、android:toXDelta属性用于指定view在X轴方向上的移动起止位置,比如android:fromXDelta=”0%”、 android:toXDelta="50%"表示view从原点向右移动view水平方向尺寸大小的一半距离,android:fromXDelta=”0%p”、 android:toXDelta="50%p"表示view从原点向右移动view所在父组件水平方向尺寸大小的一半距离,android:fromXDelta=”0”、 android:toXDelta="50"表示view从原点向右移动50dp;android:fromYDelta、android:toYDelta属性用于指定view在Y轴方向上的移动起止位置,设置方法同X轴。对于的Java代码实现如下:

TranslateAnimationtranslateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,          //x方向以view父容器的50%大小向右移动Animation.RELATIVE_TO_PARENT,50,        //y方向相对原始位置向下移动100dpAnimation.ABSOLUTE,0, Animation.ABSOLUTE, 100);translateAnimation.setInterpolator(newLinearInterpolator());//匀速播放translateAnimation.setDuration(1000);                                    //持续1stranslateAnimation.setFillAfter(true);                                      //保持移动之后的效果view.startAnimation(translateAnimation);

(3)  旋转动画

       视图旋转动画表示View相对于轴中心(pivotX,pivotY)旋转的角度,它在XML文件中用< rotate.../>属性标识,其Java层对应的类为RotateAnimation。View的旋转动画角度范围-360度~360度,其中0度表示保持不变;旋转的轴中心(pivotX, android:pivotY)的值可用三种不同的形式设置:如果为浮点数坐标(x,y),表示轴中心为相对于view左边缘以外的dp距离;如果为(x%,y%),表示轴中心相对于view左边缘以内的大小百分比;如果为(x%p,y%p),表示轴中心为相对于view父容器左边缘的大小百分百。

     其中,android:fromDegrees、android:toDegrees属性用于指定view旋转的起止角度;android:pivotX、android:pivotY=属性用于指定view旋转时的轴中心。对于Java代码实现为:

RotateAnimationrotateAnimation = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF, 50,  //以view的中心为轴中心旋转360度Animation.RELATIVE_TO_SELF,50);rotateAnimation.setInterpolator(newLinearInterpolator());    //匀速播放rotateAnimation.setDuration(1000);                                         //持续1srotateAnimation.setFillAfter(true);                                           //保持缩放之后的效果view.startAnimation(rotateAnimation);

(4)  淡入淡出动画

视图淡入淡出动画通过修改view的透明度实现淡入淡出的效果,它在XML文件中用属性标识,其Java层对应的类为AlphaAnimation。View的透明度设置范围为0~1,其中0表示完全透明,1表示完全不透明。

     其中,android:fromAlpha、android:toAlpha属性用于指定view的起止透明度,比如android:fromAlpha=”0.5”、 android:toAlpha=”1.0”表示view从半透明状态变化到完全不透明状态。对于Java代码实现为:

AlphaAnimationalphaAnimation = new AlphaAnimation(0.5f, 1.0f);alphaAnimation.setInterpolator(newLinearInterpolator());            //匀速播放alphaAnimation.setDuration(1000);                                                //持续1salphaAnimation.setFillAfter(true);                                                  //保持缩放之后的效果view.startAnimation(alphaAnimation);

3. 实战演练-奔跑中的小美

     除了单独的给view增加旋转、移动、缩放、淡出淡入动画,Android还提供了标签属性实现几种动画的混合使用,该XML属性对应的Java类为AnimationSet。为了演示不同动画的混合使用,我们写这么一个Demo:在仿美团数据加载动画的基础上,我们让小美先原地旋转360度,然后匀速奔跑屏幕的一半宽度的长度,最后再加速奔跑同时逐渐消失。

(1)  res/anim/anim_xiaomei.xml

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

       其中,android:shareInterpolator属性用于指定所有子标签的动画是否使用相同的速度;android:startOffset属性用于设定该动画是否延迟执行,如果希望不同的动画能够依次能够执行,那么当前动画延迟执行的时间应该是上一个动画执行的时间。

(2) AnimationTweenActivity.class

/** * 奔跑中的小美 * * @author Created by jiangdongguoon 2017-3-5下午2:25:57 */public class AnimationTweenActivity extends Activity {       private AnimationDrawablemAnim;       private ImageView mIvLoading;       private Button mBtnRunning;        @Override       protected void onCreate(BundlesavedInstanceState) {              super.onCreate(savedInstanceState);              setContentView(R.layout.anim_tween_activity);              mIvLoading =(ImageView) findViewById(R.id.iv_xiaomei);              mIvLoading.setBackgroundResource(R.drawable.animlist_loading_progess);              final Animation animation= AnimationUtils.loadAnimation(this, R.anim.anim_xiaomei);              //注册动画事件监听器              animation.setAnimationListener(newAnimationListener() {                     @Override                     public voidonAnimationStart(Animation animation) {                      }                      @Override                     public voidonAnimationRepeat(Animation animation) {                      }                      @Override                     public voidonAnimationEnd(Animation animation) {                            mBtnRunning.setText("预备,砰.....");                            mAnim.stop();                     }              });              // 获得AnimationDrawable              mAnim =(AnimationDrawable) mIvLoading.getBackground();               mBtnRunning = (Button)findViewById(R.id.btn_action_running);              mBtnRunning.setOnClickListener(newOnClickListener() {                     @Override                     public voidonClick(View v) {                            mIvLoading.startAnimation(animation);                            mBtnRunning.setText("停止");                            mAnim.start();                     }              });       }}

(3) 效果演示

Android动画机制(1):帧动画、补间动画详解及实战演练_第2张图片

更多相关文章

  1. Android开发中布局属性的使用汇总
  2. android学习——EditText的属性
  3. Android EditText通过imeOptions属性控制软键盘的回车键变化:回车
  4. android:installLocation这个属性

随机推荐

  1. 没搞明白哪里错了 我的天
  2. 我的XGBoost学习经历及动手实践
  3. Linux相关网络基础详解——OSI&TCP/IP&数
  4. 如何优雅地展示机器学习项目!
  5. 数据分析之Pandas合并操作总结
  6. 在期数较短的微观面板数据中使用双重差分
  7. k8s 网络
  8. 手把手解决三道括号相关的算法题
  9. python操作Excel文件报lrd.biffh.XLRDErr
  10. 新手如何通过VMware安装部署CentOS 7(详细