自定义View(二)-动画- 代码生成View动画

前言

上篇我们介绍了视图动画,说的确切点应该是视图动画中的补间动画(Tween Animation),关于逐帧动画(Frame Animation)用法更简单,这里先不做介绍后期再自定义View的使用会用到,到时候讲解。这篇我们来一起学习将上篇用XML实现的动画用试着用代码来生成,毕竟有些时候我们是用代码来控制动画的。


代码生成动画

Animation公共类

这里给大家发一个网站里面XML,类属性都能查到,这个是Animation官方文档
里面的方法比较多,但是重要的就如下几个:

  • android:duration 对应代码: setDuration(long) 动画持续时间,以毫秒为单位
  • android:fillAfter 对应代码: setFillAfter(boolean) 如果设置为true,控件动画结束时,将保持动画最后时的状态
  • android:fillBefore 对应代码: setFillBefore(boolean) 如果设置为true,控件动画结束时,还原到开始动画前的状态
  • android:fillEnabled 对应代码: setFillEnabled(boolean) 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
  • android:repeatCount 对应代码: setRepeatCount(int) 重复次数
  • android:repeatMode 对应代码: setRepeatMode(int) 重复类型,有reverse和restart两个值,取值为RESTART或 REVERSE,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
  • android:interpolator 对应代码: setInterpolator(Interpolator) 设定插值器,其实就是指定的动作效果,比如弹跳效果等
    可以看到,在XML设置的属性基本都可以用代码来控制。从官方文档中我们可以看到。它有5个子类。正好对应之前我们在XML中学到的5中动画的属性,如下:
XML 实体类
scale ScaleAnimation
alpha AlphaAnimation
rotate RotateAnimation
translate TranslateAnimation
set AnimationSet

AlphaAnimation
构造函数:

  • AlphaAnimation(Context context, AttributeSet attrs) 同样,从本地XML加载动画,基本不用:
  • AlphaAnimation(float fromAlpha, float toAlpha)

这里第二个构造函数的参数为:

  • android:fromAlpha 动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
  • android:toAlpha 动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
    那么我们就可以将前一篇中的XML用代码来实现下:



代码:

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);
alphaAnimation.setDuration(3000);
alphaAnimation.setRepeatCount(2);
alphaAnimation.setRepeatMode(Animation.REVERSE);
alphaAnimation.setFillAfter(true);
mTextView.setAnimation(alphaAnimation);

效果与之前是一样的。由于继承父类Animation所有有父类的共有属性。下面其他几种大同小异。

ScaleAnimation
构造函数:

  • ScaleAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到
  • ScaleAnimation(float fromX, float toX, float fromY, float toY)
  • ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
  • ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数对应XML含义如下:

  • android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
  • android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
  • android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
  • android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
  • android:pivotY 缩放起点Y轴坐标,取值及意义跟android:pivotX一样。
    这里与XML是一一对应的只是名字有一点点不同而已。需要注意的是这里的pivotYType的取值有三个,Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT分别对应数,百分数,百分数p;下面我们来使用下:

XML:




代码:

ScaleAnimation scaleAnimation = new ScaleAnimation(0f, 1.5f, 0, 1.5f,Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillBefore(true);
scaleAnimation.setRepeatCount(1);
scaleAnimation.setRepeatMode(Animation.RESTART);
mTextView.setAnimation(scaleAnimation);

RotateAnimation
构造函数:

  • RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到
  • RotateAnimation(float fromDegrees, float toDegrees)
  • RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
  • RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数对应XML含义如下:

  • android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
  • android:pivotY 缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

XML使用:

  
  
      
 

代码:

RotateAnimation rotateAnim = new RotateAnimation(0, -650, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnim.setDuration(3000);
rotateAnim.setFillAfter(true);
mTextView.setAnimation(rotateAnim);

TranslateAnimation
构造函数:

  • RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到
  • TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
  • TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

参数对应XML含义如下:

  • android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
  • android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
  • android:toXDelta 结束点X轴坐标
  • android:toYDelta 结束点Y轴坐标

这里没有什么难点就不再细述了。
XML使用:

      
      
        

代码:


                TranslateAnimation translateAnim = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, -80,
                        Animation.ABSOLUTE, 0, Animation.ABSOLUTE, -80);
                translateAnim.setDuration(2000);
                translateAnim.setFillBefore(true);
                mTextView.setAnimation(translateAnim);

AnimationSet
AnimationSet类对应set标签,定义动作类的集合。
构造函数:

  • AnimationSet(boolean shareInterpolator) shareInterpolator取值true或false,取true时,指在AnimationSet中定义一个插值器(interpolater),它下面的所有动画共同。如果设为false,则表示它下面的动画自己定义各自的插值器。

增加动画的函数为:(更多函数,请参看SDK文档)

  • public void addAnimation (Animation a)

这里我们就将前面动画的属性加在一起:

 setAnim = new AnimationSet(true);
setAnim.addAnimation(alphaAnimation);
setAnim.addAnimation(scaleAnimation);
setAnim.addAnimation(rotateAnim);

setAnim.setDuration(3000);
setAnim.setFillAfter(true);
mTextView.setAnimation(setAnim);

使用插值器:

ScaleAnimation interpolateScaleAnim=new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);  
interpolateScaleAnim.setInterpolator(new BounceInterpolator());  
interpolateScaleAnim.setDuration(3000);  

这里的插值器的种类与上篇一致,使用方法都是一样的都是通过创建对象就可以了

其他插值器大家自己试验下。 效果图就不发了。


实战

View动画讲到这基本上也就差不多了,那么我们用个小例子在实际中运用一下。
下面这个例子就是百篮应用中Activi ty进入与退出动画。我们就可以用我们学到的View动画来去实现。首先看下效果:

anim.gif

我们先来分析下这个动画:
进入时->当前Activity向左退出 由完全可见变成完全不可见 即将进入的Activity反之 那么此时就是两个动画->从右进入,从左退出
退出时->当前Activity向右退出 由完全可见变成完全不可见 即将进入的Activity反之 那么此时就是两个动画->从右退出,从左进入
那么就清楚了这里应该有四个动画,每个动画为组合动画:平移与渐变
那么我们来看下XML代码:
从左进入:



    
    

从右进入:



    
    

从左退出:



    
    

从右退出:



    
    

这里大家再看下就很清楚了。大家可能对于平移的参数有些模糊,这里我用一张图:

图片.png

从上图可以看出,以手机屏幕下面边未X轴,屏幕左边为Y轴,当Activity在X轴值为-100%p时,刚好在屏幕的左边(位置1),当X轴值为0%p时,刚好再屏幕内(位置2),当X=100%p时刚好在屏幕右边(位置3)。
在清楚了这点后我们看下代码:

 /**
     * 设置进入 动画
     */
    @Override
    public void startActivity(Intent intent) {
        super.startActivity(intent);
        overridePendingTransition(R.anim.anim_slide_in_right,R.anim.anim_slide_out_left);

    }  
    
     /**
     * 设置退出 动画
     */
    @Override
    public void finish() {
        super.finish();
        overridePendingTransition(R.anim.anim_slide_in_left,R.anim.anim_slide_out_right);
    }
    

我们使用了这个方法:
public void overridePendingTransition(int enterAnim, int exitAnim)

enterAnim 定义Activity进入屏幕时的动画
exitAnim 定义Activity退出屏幕时的动画
overridePendingTransition 方法必须在startActivity()或者 finish()方法的后面
最后效果:

animAc.gif

是不是很简单很酷炫。嘿嘿!!!如果想全局使用就要封装在基类Activity中。


结语

下一篇我们一起来学习一下属性动画。 我们下篇见

感谢

站在巨人的肩膀上可以让我们看的更远。
Android自定义控件三部曲文章

你可能感兴趣的:(自定义View(二)-动画- 代码生成View动画)