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

前言

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


代码生成动画

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

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

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

XML

实体类

scale

ScaleAnimation

alpha

AlphaAnimation

rotate

RotateAnimation

translate

TranslateAnimation

set

AnimationSet

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

  • <font color=#006400 size=2>AlphaAnimation(Context context, AttributeSet attrs) 同样,从本地XML加载动画,基本不用:</font>
  • <font color=#006400 size=2>AlphaAnimation(float fromAlpha, float toAlpha)</font>

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

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

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

  • <font color=#006400 size=2>ScaleAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到</font>
  • <font color=#006400 size=2>ScaleAnimation(float fromX, float toX, float fromY, float toY)</font>
  • <font color=#006400 size=2>ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)</font>
  • <font color=#006400 size=2>ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)</font>

参数对应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);

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

  • <font color=#006400 size=2>RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到</font>
  • <font color=#006400 size=2> RotateAnimation(float fromDegrees, float toDegrees)</font>
  • <font color=#006400 size=2>RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)</font>
  • <font color=#006400 size=2>RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)</font>

参数对应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);

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

  • <font color=#006400 size=2>RotateAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到</font>
  • <font color=#006400 size=2>TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)</font>
  • <font color=#006400 size=2>TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)</font>

参数对应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);

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

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

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

  • <font color=#006400 size=2>public void addAnimation (Animation a)</font>

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏everhad

[BOT] 一种android中实现“圆角矩形”的方法

内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角。思路是利用“Xfermode ...

3247
来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

7732
来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

2402
来自专栏前端儿

Windows下编程--模拟时钟的实现

(4)   编写显示数字时钟函数。注意要自己用矩形填充(FillRect)擦除背景。

1341
来自专栏me的随笔

给图片添加文字水印

水印图片透明度设置和旋转(下面这段代码和上面一段代码都位于Watermark类中,因为代码量较大,所以分开来展示):

1554
来自专栏Android开发那些事

手把手教你用RecyclerView实现猫眼电影选择效果

在官方推出RecyclerView 控件之后,越来越多的人都使用它代替之前的ListView。除了最普通的列表显示,RecyclerView还可以其他的很多效果...

1510
来自专栏pangguoming

HTML特殊符号对照表

HTML特殊符号对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α &Alpha...

5366
来自专栏小灰灰

Java 实现长图文生成

长图文生成 很久很久以前,就觉得微博的长图文实现得非常有意思,将排版直接以最终的图片输出,收藏查看分享都很方便,现在则自己动手实现一个简单版本的 目标 首先定...

3737
来自专栏Porschev[钟慰]的专栏

项目中对图片的缩放和水印效果

///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

1706
来自专栏潇涧技术专栏

Android Heroes Reading Notes 3

《Android群英传》读书笔记 (3) 第六章 Android绘图机制与处理技巧 + 第七章 Android动画机制与使用技巧

762

扫码关注云+社区

领取腾讯云代金券