0
点赞
收藏
分享

微信扫一扫

【达内课程】Android中的动画(上)


文章目录

  • ​​动画分类​​
  • ​​补间动画​​
  • ​​淡入淡出 alpha​​
  • ​​旋转 rotate​​
  • ​​缩放动画 scale​​
  • ​​平移动画translate​​
  • ​​动画通用属性​​
  • ​​综合应用​​

动画分类

Android 中的动画分为:帧动画、补间动画、属性动画。

补间动画

补间动画:Tween Animation

【动画分类】
1、Alpha / 淡入淡出动画,透明度发生变化的动画
2、Rotate / 旋转动画
3、Scale / 缩放动画
4、Translate / 平移动画

淡入淡出 alpha

【Alpha动画属性】
​​​fromAlpha / toAlpha​​ 透明度的值,取值为 float 类型,取值范围在 0-1 之间,其中 0 表示完全透明,1 表示完全不透明

【动画通用属性】
​​​duration​​ 动画的持续时长,取值为 int 类型,以毫秒为单位,例如动画持续 5s,取值为 5000

res 文件夹下 new——Android Resource File

【达内课程】Android中的动画(上)_取值

alpha

<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="5000"
/>
</set>

执行动画代码

Animation animation = AnimationUtils.loadAnimation(this,R.anim.alpha);
tv_hello_world.startAnimation(animation);

效果图
【达内课程】Android中的动画(上)_android_02

透明度设置的范围并非只是在 0.0~1.0 之间,<= 0.0 不可见,>= 1.0 为可见,设置在初始值小于 0.0 或终止值大于 1.0 时显示是有区别的。例:fromAlpha="-2.5" 和 toAlpha=“1.0”,动画时间前 2.5s 均不可见,最后 1s 出现由 0.0->1.0 的透明变化

旋转 rotate

【Rotate 动画属性】
​​​fromDegrees / toDegree​​ 旋转角度,取值为 float 类型,如果 toDegree 的值 大于 fromDegree,表示顺时针旋转,反之为逆时针旋转。取值可以是负数,也可以大于360。

​pivotX / pivotY​​ 中心点坐标位置,取值使用百分比

新建 rotate 文件

rotate

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:duration="5000"/>
</set>

执行动画代码

Animation rotate = AnimationUtils.loadAnimation(this,R.anim.rotate);
tv_hello_world.startAnimation(rotate);

效果图
【达内课程】Android中的动画(上)_取值_03
修改旋转点

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:duration="5000"
android:pivotX="50%"
android:pivotY="50%"/>
</set>

效果图
【达内课程】Android中的动画(上)_Android_04

缩放动画 scale

【Scale动画属性】
​​​fromXScale / fromYScale / toXScale / toYScale​​ 缩小的尺寸,取值使用百分比,以上 4 个属性都是必要属性

​pivotX / pivotY​​ 中心点坐标位置,取值使用百分比

创建scale文件

<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0"
android:toXScale="100%"

android:fromYScale="0"
android:toYScale="100%"

android:pivotX="50%"
android:pivotY="50%"

android:duration="5000"/>
</set>

其中​​android:fromXScale="0.0"​​,fromXScale 代表初始时横向 View 比例,0.0 为从没有开始动画,1.0 即 View 原尺寸,2.0 即 View 原尺寸两倍

​android:pivotX="50%"​​,可以理解为动画起点坐标,可以为整数值、百分数(或者小数)、百分数 + p 三种样式

1、整数值:android:pivotX=“100”
整数值类型是相对于自身 View 来定义,以自身 View 左上角的点为原点,水平向右为正,竖直向下为正的坐标系中计算,设置的整数值为 px,为固定值
2、百分数/小数:android:pivotX=“100%”
百分数/小数类型是相对于自身 View 来定义,与整数值类似,只是坐标点是以自身 View 尺寸比例来计算而非固定值。
3、百分数 + p:android:pivotX=“100%p”
这是相对于父容器的百分比

执行动画代码

Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale);
tv_hello_world.startAnimation(scale);

效果图
【达内课程】Android中的动画(上)_取值_05

平移动画translate

【Translate动画属性】
​​​fromXDelta / toXDelta / fromYDelta / toYDelta​​ 平移的位置,取值使用百分比,以 x 轴的属性为例,如果 toXDelta 的值大于 fromXDelta,则表现为从左至右平移,反之为从右至左平移。取值也可以是附属。如果只需要水平移动,则可以不指定 fromYDelta 和 toYDelta 属性。同理,如果只需要垂直方向移动,则可以不指定 fromXDelta 和 toXDelta 属性。

translate

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="100%"

android:fromYDelta="0"
android:toYDelta="100%"

android:duration="5000"/>
</set>

执行动画代码

Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate);
tv_hello_world.startAnimation(translate);

效果图
【达内课程】Android中的动画(上)_补间动画_06

【达内课程】Android中的动画(上)_android_07
所以从左侧进入屏幕的动画应该是

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0%p"
android:duration="2000"/>
</set>

【达内课程】Android中的动画(上)_xml_08

动画通用属性

【动画通用属性】
​​​duration​​ 动画的持续时长,取值为 int 类型,以毫秒为单位,例如动画持续 5s,则取值为 5000。

​repeatCount​​ 重复次数,即可以设置动画被执行多次,如果希望动画执行 2 次,则取值为 1,即重复次数是 1 次,原始的执行不计入重复次数之内。

​repeatMode​​​重复发模式,取值为​​restart​​​或​​reverse​​​,取值为​​restart​​​时,表示每次重复时,都从头开始执行动画,取值为​​reverse​​​时,表示每次重复时,都会逆向执行前一次的动画。注意:该属性仅当 ​​repeatCount​​属性的值大于或等于 1 时有效。

​startOffset​​ 动画开始执行的时间偏移量,即过多久以后再开始执行动画,取值为以毫秒为单位的数值

【根节点属性】
​​​fillAfter​​ 取值为 true 表示控件将停留在动画之后的状态。

我们会发现执行完动画效果,控件会闪退回控件初始的状态,尝试在根节点增加以下属性,会让控件停留在最后的位置

android:fillAfter="true"

效果图
【达内课程】Android中的动画(上)_android_09

不过应该让动画回到最开始的位置,否则再执行其他动画会出现各种奇怪的bug,可以设置让动画重复执行一次,回到开始位置

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:repeatCount="1"
android:repeatMode="reverse"

android:fromXDelta="0"
android:toXDelta="100%"

android:duration="5000"/>
</set>

效果图
【达内课程】Android中的动画(上)_取值_10

综合应用

新建 set.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.2"
android:toAlpha="1"
android:duration="5000"/>
<rotate
android:fromDegrees="0"
android:toDegrees="1800"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"/>

<scale
android:fromXScale="0"
android:toYScale="100%"

android:fromYScale="0"
android:toXScale="100%"

android:pivotX="50%"
android:pivotY="50"

android:duration="5000"/>

</set>

效果图
【达内课程】Android中的动画(上)_xml_11

可以设置动画的执行顺序,给透明度增加startOffset属性

<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:startOffset="5000"
android:fromAlpha="0.2"
android:toAlpha="1"
android:duration="5000"/>
<rotate
android:fromDegrees="0"
android:toDegrees="1800"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"/>

<scale
android:fromXScale="0"
android:toYScale="100%"

android:fromYScale="0"
android:toXScale="100%"

android:pivotX="50%"
android:pivotY="50"

android:duration="5000"/>

</set>

效果图
【达内课程】Android中的动画(上)_补间动画_12

我们看旋转有一个加速度,这个属性也可以设置,由于不常用,暂不记录

参考:
​​​Android中实现简单的立体旋转​​

举报

相关推荐

0 条评论