Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

摘要:
˃效果图,及起始点坐标图如下所示:2、从Animation类继承的属性Animation类是所有动画的基类,这里以scale标签为例,讲解一下,Animation类所具有的属性及意义。

一、概述

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

1、XML配置文件中

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

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

2、动作文件存放位置

动作定义文件应该存放在res/anim文件夹下,访问时采用R.anim.XXX.xml的方式,位置如图:
Animation 动画详解(一)——alpha、scale、translate、rotate、set的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. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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"/>

(1)、pivotX取值数值时(50)

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

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

图一 图二
Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第4张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第5张

(2)、pivotX取值百分数时(50%)
下面再看看当pivotX、pivotY取百分数的时候,起始点又在哪里?

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

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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;起始点位置如下图中图二所示:

图一 图二

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第8张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第9张
(3)、pivotX取值50%p时

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

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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"/>

效果图,及起始点坐标图如下所示:

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第12张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第13张

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:保持动画结束的状态

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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. />

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第16张

(2)android:fillBefore 还原初始化状态

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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"

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第19张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第20张

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

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

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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
Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第23张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第24张

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

1、自身属性

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

使用示例:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <alphaxmlns: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>

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第27张

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
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <rotatexmlns: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"

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第30张Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第31张

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轴坐标
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <translatexmlns: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>

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第34张

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,即下面的这个效果,该怎么办?

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第35张

这就需要对指定的控件定义动作合集,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代码为:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns: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动作添加到指定控件中。

先看最终效果图:

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第38张

1、新建工程、新建scale动画文件(scaleanim.xml)

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

Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法第39张

scaleanim.xml的代码为:(从TextView中心点,从0放大到1.4倍,反复一次,最后还原到初始化状态)

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <scalexmlns: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布局文件

  1. <LinearLayoutxmlns: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. <Buttonandroid:id="@+id/btn_animation"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:layout_margin="10dip"
  11. android:text="scaleanimation"/>
  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代码

  1. publicclassMainActivityextendsActivity{
  2. ButtonscaleBtn;
  3. AnimationscaleAnimation;
  4. TextViewtv;
  5. @Override
  6. protectedvoidonCreate(BundlesavedInstanceState){
  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(newView.OnClickListener(){
  13. @Override
  14. publicvoidonClick(Viewv){
  15. //TODOAuto-generatedmethodstub
  16. tv.startAnimation(scaleAnimation);
  17. }
  18. });
  19. }
  20. }

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

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

免责声明:文章转载自《Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Mysql-锁pytorch中torch.unsqueeze()函数与np.expand_dims()下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧。 1. animation-delay...

关于html5 -- plus Webview模块管理应用窗口界面

Webview模块管理应用窗口界面,通过plus.webview可获取应用界面管理对象。 方法: all:获取所有的webview窗口 close:关闭webview窗口 create:创建新的webview窗口 currentWebview:获取当前窗口的webviewObject对象 getWebviewById:查找指定标识的webviewObje...

Vue动画操作

概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js Vue...

【WPF学习】第四十九章 基本动画

  在前一章已经学习过WPF动画的第一条规则——每个动画依赖于一个依赖项属性。然而,还有另一个限制。为了实现属性的动态化(换句话说,使用基于时间的方式改变属性的值),需要有支持相应数据类型的动画类。例如,Button.Width属性使用双精度数据类型。为实现属性的动态化,需要使用DoubleAnimation类。但Button.Paddin属性使用的是Th...

AndroidTv Home界面实现原理(二)——Leanback 库的主页卡位缩放动画源码解析

本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 先看个效果图: 上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback 库是怎么实现的。 如果要我们自己实现的话,思路应该不难,就是写个放大、缩小动画,然后在卡位获得焦点时应用放大动画,失去焦点时应用缩小动画,所以关键点只是在...

CSS3学习笔记(3)—左右飞入的文字

前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~(≧▽≦)/~啦啦啦 下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软件有问题,所以不是很清晰,但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上关闭截图,不要被这个干扰~~~~ 一、页面的主体布局...