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

g小志

发布于 2018-09-11 17:26:56

5140

发布于 2018-09-11 17:26:56

前言

上篇我们介绍了视图动画，说的确切点应该是视图动画中的补间动画(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用代码来实现下：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:repeatCount="2"
       android:repeatMode="reverse"
       android:duration="3000"
       android:fillAfter="true"
       android:fromAlpha="1.0"
       android:toAlpha="0.5">
</alpha>

代码:

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:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="3000"
       android:fillBefore="true"
       android:fromXScale="0.0"
       android:fromYScale="0.0"
       android:pivotX="50%p"
       android:pivotY="50%p"
       android:repeatCount="1"
       android:repeatMode="restart"
       android:toXScale="1.5"
       android:toYScale="1.5">
</scale>

代码：

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使用：

<?xml version="1.0" encoding="utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromDegrees="0"  
    android:toDegrees="-650"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="3000"  
    android:fillAfter="true">  
      
</rotate>

代码：

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使用：

    <?xml version="1.0" encoding="utf-8"?>  
    <translate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromXDelta="0"   
        android:toXDelta="-80"  
        android:fromYDelta="0"  
        android:toYDelta="-80"  
        android:duration="2000"  
        android:fillBefore="true">  
    </translate>

代码：

                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代码：从左进入：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="@android:integer/config_mediumAnimTime" />
</set>

从右进入：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="@android:integer/config_mediumAnimTime" />
</set>

从左退出：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%" android:toXDelta="-100%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0"
           android:duration="@android:integer/config_mediumAnimTime" />
</set>

从右退出：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%p" android:toXDelta="100%"
               android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0"
           android:duration="@android:integer/config_mediumAnimTime" />
</set>

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

图片.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自定义控件三部曲文章

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.01.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度