Android自定义控件：动画类----alpha、scale、translate、rotate、set的xml属性及用法

一、概述

Android的animation由四种类型组成：C、scale、translate、rotate，对应android官方文档地址：《Animation
Resources》

动画在XML配置文件中

alpha 渐变透明度动画效果
scale 渐变尺寸伸缩动画效果
translate 画面转换位置移动动画效果
rotate 画面转移旋转动画效果

动作定义文件应该存放在res/anim文件夹下，访问时采用R.anim.XXX.xml的方式，位置如图：

二、下面我们逐个讲讲每个标签的属性及用法

1、scale标签——调节尺寸

1> 自有属性

scale标签是缩放动画，可以实现动态调控件尺寸的效果，有下面几个属性：

  • 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，当为数值时，表示在当前View的左上角，即原点处加上50px，做为起始缩放点；如果是50%，表示在当前控件的左上角加上自己宽度的50%做为起始点；如果是50%p，那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。（具体意义，后面会举例演示）
  • android:pivotY           缩放起点Y轴坐标，取值及意义跟android:pivotX一样。

下面看一个实例，当scale里的属性这样设置时，效果会怎样呢：

（1）、pivotX取值数值时（50）

这个控件，宽度和高度都是从0放大到1.4倍，起始点坐标在控件左上角（坐标原点），向x轴正方向和y轴正方向都加上50像素；

根据pivotX,pivotY的意义，控件的左上角即为控件的坐标原点，这里的起始点是在控件的原点的基础上向X轴和Y轴各加上50px，做为起始点，

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.4"
    android:fromYScale="0.0"
    android:toYScale="1.4"
    android:pivotX="50"
    android:pivotY="50"
    android:duration="700"/>

图一                                                             图二

 

（2）、pivotX取值百分数时（50%）

下面再看看当pivotX、pivotY取百分数的时候，起始点又在哪里？

上面我们讲了，pivotX的值，当取50%时，表示在原点坐标的基础上加上的自己宽度的50%，看看效果：

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%"
  8. android:pivotY="50%"
  9. android:duration="700" />

缩放位置大小仍然从0-1.4，只改变pivotX和pivotY;起始点位置如下图中图二所示：

图一                                                                 图二

   

（3）、pivotX取值50%p时

前面说过，当取值在百分数后面加上一个字母p，就表示，取值的基数是父控件，即在原点的基础上增加的值是父标签的百分值。

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%p"
  8. android:pivotY="50%p"
  9. android:duration="700" />

效果图，及起始点坐标图如下所示：

        

2、从Animation类继承的属性

Animation类是所有动画（scale、alpha、translate、rotate）的基类，这里以scale标签为例，讲解一下，Animation类所具有的属性及意义。关于Animation类的官方文档位置为：《Animation》

  • android:duration        动画持续时间，以毫秒为单位
  • android:fillAfter          如果设置为true，控件动画结束时，将保持动画最后时的状态
  • android:fillBefore       如果设置为true,控件动画结束时，还原到开始动画前的状态
  • android:fillEnabled    与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  • android:interpolator  设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

对于android:duration，就不再讲解了，就是动画的持续时长，以毫秒为单位，下面看看android:fillAfter和android:fillBefore

(1)android:fillAfter:保持动画结束的状态

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%"
  8. android:pivotY="50%"
  9. android:duration="700"
  10. android:fillAfter="true"
  11. />

（2）android:fillBefore  还原初始化状态

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%"
  8. android:pivotY="50%"
  9. android:duration="700"
  10. android:fillBefore="true"
  11. />

android:fillBefore="true"                                 android:fillEnable="true"

   

上面顺便列出了，当仅设定fillEanble为true时的效果，这两个的标签的效果完全相同。

（3）、android:repeatMode="restart /reverse"  设定回放类型

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%"
  8. android:pivotY="50%"
  9. android:duration="700"
  10. android:fillBefore="true"
  11. android:repeatCount="1"
  12. android:repeatMode="restart"
  13. />

androidRepeatMode设为restart                       androidRepeatMode设为reverse

 
     

三、alpha标签——调节透明度

1、自身属性

  • android:fromAlpha   动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
  • android:toAlpha       动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明

使用示例：

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromAlpha="1.0"
  4. android:toAlpha="0.1"
  5. android:duration="3000"
  6. android:fillBefore="true">
  7. </alpha>

2、从Animation类继承的属性

  • android:duration        动画持续时间，以毫秒为单位
  • android:fillAfter          如果设置为true，控件动画结束时，将保持动画最后时的状态
  • android:fillBefore       如果设置为true,控件动画结束时，还原到开始动画前的状态
  • android:fillEnabled    与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  • android:interpolator  设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

与scale标签意义一样，就不再缀述。

四、rotate标签——旋转

1、自身属性

  • android:fromDegrees     开始旋转的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
  • android:toDegrees         结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数
  • android:pivotX               缩放起点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
  • android:pivotY               缩放起点Y轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p

[html] view
plain copy

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

围绕自身从0度逆时针旋转650度                            围绕自身从0度顺时针旋转650度

android:fromDegrees="0"                                       android:fromDegrees="0"

android:toDegrees="-650"                                      android:toDegrees="650"

     

2、从Animation类继承的属性

  • android:duration        动画持续时间，以毫秒为单位
  • android:fillAfter          如果设置为true，控件动画结束时，将保持动画最后时的状态
  • android:fillBefore       如果设置为true,控件动画结束时，还原到开始动画前的状态
  • android:fillEnabled    与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  • android:interpolator  设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

与scale标签意义一样，就不再缀述。

五、translate标签 —— 平移

1、自身属性

  • android:fromXDelta     起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，比如 50、50%、50%p，具体意义已在scale标签中讲述，这里就不再重讲
  • android:fromYDelta    起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
  • android:toXDelta         结束点X轴坐标
  • android:toYDelta        结束点Y轴坐标

[html] view
plain copy

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

2、从Animation类继承的属性

  • android:duration        动画持续时间，以毫秒为单位
  • android:fillAfter          如果设置为true，控件动画结束时，将保持动画最后时的状态
  • android:fillBefore       如果设置为true,控件动画结束时，还原到开始动画前的状态
  • android:fillEnabled    与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  • android:interpolator  设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

与scale标签意义一样，就不再缀述。

六、set标签——定义动作合集

前面我们讲解了各个标签动画的意义及用法，但他们都是独立对控件起作用，假设我现在想上面的textView控件做一个动画——从小到大，旋转出场，而且透明度也要从0变成1，即下面的这个效果，该怎么办？

这就需要对指定的控件定义动作合集，Set标签就可以将几个不同的动作定义成一个组；

属性：

set标签自已是没有属性的，他的属性都是从Animation继承而来，但当它们用于Set标签时，就会对Set标签下的所有子控件都产生作用。

属性有：（从Animation类继承的属性）

  • android:duration        动画持续时间，以毫秒为单位
  • android:fillAfter          如果设置为true，控件动画结束时，将保持动画最后时的状态
  • android:fillBefore       如果设置为true,控件动画结束时，还原到开始动画前的状态
  • android:fillEnabled    与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态
  • android:repeatCount 重复次数
  • android:repeatMode 重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。
  • android:interpolator  设定插值器，其实就是指定的动作效果，比如弹跳效果等，不在这小节中讲解，后面会单独列出一单讲解。

与scale标签意义一样，就不再缀述。

上面这个效果，所对应的XML代码为：

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:duration="3000"
  4. android:fillAfter="true">
  5. <alpha
  6. android:fromAlpha="0.0"
  7. android:toAlpha="1.0"/>
  8. <scale
  9. android:fromXScale="0.0"
  10. android:toXScale="1.4"
  11. android:fromYScale="0.0"
  12. android:toYScale="1.4"
  13. android:pivotX="50%"
  14. android:pivotY="50%"/>
  15. <rotate
  16. android:fromDegrees="0"
  17. android:toDegrees="720"
  18. android:pivotX="50%"
  19. android:pivotY="50%"/>
  20. </set>

七、实例——如何将动画XML文件应用于控件中

上面我仅仅是列出了每个标签及其属性的意义及应用之后的效果演示，但上面是如何将定义动画的xml应用到textView控件中的却迟迟没说，这一小节，就以scale动画为例，讲述如何将定义好的scle动作添加到指定控件中。

先看最终效果图：

1、新建工程、新建scale动画文件（scaleanim.xml）

新建一个工程，并且在res文件夹下，新建一个anim文件夹，然后再新建一个scaleanim.xml文件，结构如图所示：

scaleanim.xml的代码为：（从TextView中心点，从0放大到1.4倍，反复一次，最后还原到初始化状态）

[html] view
plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fromXScale="0.0"
  4. android:toXScale="1.4"
  5. android:fromYScale="0.0"
  6. android:toYScale="1.4"
  7. android:pivotX="50%"
  8. android:pivotY="50%"
  9. android:duration="700"
  10. android:fillBefore="true"
  11. android:repeatCount="1"
  12. android:repeatMode="restart"
  13. />

2、XML布局文件

[html] view
plain copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. tools:context="com.harvic.animation_demo.MainActivity" >
  7. <Button android:id="@+id/btn_animation"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:layout_margin="10dip"
  11. android:text="scale animation"/>
  12. <TextView
  13. android:id="@+id/tv"
  14. android:layout_width="100dip"
  15. android:layout_height="200dip"
  16. android:background="#ff00ff"
  17. android:text="@string/hello_world"
  18. android:layout_gravity="center_horizontal"/>
  19. </LinearLayout>

3、JAVA代码

[java] view
plain copy

  1. public class MainActivity extends Activity {
  2. Button scaleBtn ;
  3. Animation scaleAnimation;
  4. TextView tv;
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.activity_main);
  9. scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);
  10. scaleBtn = (Button)findViewById(R.id.btn_animation);
  11. tv =(TextView)findViewById(R.id.tv);
  12. scaleBtn.setOnClickListener(new View.OnClickListener() {
  13. @Override
  14. public void onClick(View v) {
  15. // TODO Auto-generated method stub
  16. tv.startAnimation(scaleAnimation);
  17. }
  18. });
  19. }
  20. }

（1）通过scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);从XML文件中获取动画

（2）利用startAnimation将动画传递给指定控件显示。

至此，本文就结束了，下篇将讲述有关插值器的相关属性及意义。

时间： 2024-10-03 20:58:29

Android自定义控件：动画类----alpha、scale、translate、rotate、set的xml属性及用法的相关文章

自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法

前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随时沟通的时候,总会发来一条条的鼓励短信,让我不自主的开始内疚.哎,多么可爱的用户,多么无耐的现实. 相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 一.概述 Android

Android自定义动画类——实现3D旋转动画

Android中的补间动画分为下面几种: (1)AlphaAnimation :透明度改变的动画. (2)ScaleAnimation:大小缩放的动画. (3)TranslateAnimation:位移变化的动画. (4)RotateAnimation:旋转动画. 然而在实际项目中透明度.缩放.位移.旋转这几种动画并不能满足我们的需求,比如我们需要一个类似下面的3D旋转动画. 这时候就需要用到自定义动画,自定义动画需要继承Animation,并重写applyTransformation(floa

Android自定义控件：类QQ未读消息拖拽效果

QQ的未读消息,算是一个比较好玩的效果,趁着最近时间比较多,参考了网上的一些资料之后,本次实现一个仿照QQ未读消息的拖拽小红点,最终完成效果如下: 首先我们从最基本的原理开始分析,看一张图: 这个图该怎么绘制呢?实际上我们这里是先绘制两个圆,然后将两个圆的切点通过贝塞尔曲线连接起来就达到这个效果了.至于贝塞尔曲线的概念,这里就不多做解释了,百度一下就知道了. 切点怎么算呢,这里我们稍微复习一些初中的数学知识.看了这个图之后,求出四个切点应该是轻而易举了. 现在思路已经很清晰了,按照我们的思路,开

Android 实现动画类

Android JDK为我们提供了4种动画效果,分别是: AlphaAnimation,RotateAnimation, ScaleAnimation, TranslateAnimation.今天我想讲解的是TranslateAnimation这个动画效果.也是本人在做一个移动图片的动画效果的项目时,遇到了一些问题.在网上查了很多资料,搞了好几天.终于明白怎么使用这个TranslateAnimation,在本文中记录下来,以便以后忘记了可以查阅. TranslateAnimation是移动的动画

Android Animation 动画

动画类型 Android的animation由四种类型组成  Android动画模式 Animation主要有两种动画模式:一种是tweened animation(渐变动画) XML中 JavaCode alpha AlphaAnimation scale ScaleAnimation 一种是frame by frame(画面转换动画) XML中 JavaCode translate TranslateAnimation rotate RotateAnimation 如何在XML文件中定义动画

79.Android之动画基础

转载:http://a.codekk.com/detail/Android/lightSky/%E5%85%AC%E5%85%B1%E6%8A%80%E6%9C%AF%E7%82%B9%E4%B9%8B%20Android%20%E5%8A%A8%E7%94%BB%E5%9F%BA%E7%A1%80 一 传统 View 动画(Tween/Frame) 1.1 Tween 动画 主要有 4 中:缩放.平移.渐变.旋转 文件位置: res/anim/filename.xml编译资源的数据类型:an

Android 常用动画

一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha :渐变透明度动画效果 scale :渐变尺寸伸缩动画效果 translate : 画面转换位置移动动画效果 rotate :画面转移旋转动画效果 Java Code代码中 AlphaAnimation : 渐变透明度动画效果 ScaleAnimation :渐变尺寸伸缩动画效果 TranslateAnimation : 画面转换位置移动动画效果

android中动画的实现

1.Animation 动画类型 Android的animation由四种类型组成: XML中 alph 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 JavaCode中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸伸缩动画效果 TranslateAnimation 画面转换位置移动动画效果 RotateAnimation 画面转移旋转动画效果 2.Android

[转]Android自定义控件三部曲系列完全解析(动画, 绘图, 自定义View)

来源:http://blog.csdn.net/harvic880925/article/details/50995268 一.自定义控件三部曲之动画篇 1.<自定义控件三部曲之动画篇(一)——alpha.scale.translate.rotate.set的xml属性及用法>2.<自定义控件三部曲之动画篇(二)——Interpolator插值器>3.<自定义控件三部曲之动画篇(三)—— 代码生成alpha.scale.translate.rotate.set及插值器动画&g