自定义View学习笔记

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

2018-01-02  本文已影响76人  g小志

前言

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

代码生成动画

<font color=#FF4500 size=3>Animation公共类</font>

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

XML 实体类
scale ScaleAnimation
alpha AlphaAnimation
rotate RotateAnimation
translate TranslateAnimation
set AnimationSet

<font color=#FF4500 size=3>AlphaAnimation</font>
<font color=#006400 >构造函数：</font>

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

<?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所有有父类的共有属性。下面其他几种大同小异。

<font color=#FF4500 size=3>ScaleAnimation</font>
<font color=#006400 >构造函数：</font>

参数对应XML含义如下：

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);

<font color=#FF4500 size=3>RotateAnimation</font>
<font color=#006400 >构造函数：</font>

参数对应XML含义如下：

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);

<font color=#FF4500 size=3>TranslateAnimation</font>
<font color=#006400 >构造函数：</font>

参数对应XML含义如下：

这里没有什么难点就不再细述了。
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);

<font color=#FF4500 size=3>AnimationSet</font>
AnimationSet类对应set标签，定义动作类的集合。
<font color=#006400 >构造函数：</font>

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

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

 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);
    }

我们使用了这个方法：
<font color=#006400 size=2>public void overridePendingTransition(int enterAnim, int exitAnim)</font>

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

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

结语

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

感谢

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

上一篇 下一篇

猜你喜欢

热点阅读