视图动画概述与使用

1、android坐标系 & 视图坐标系

这两个图自己懒得画了,直接从别人博客引用过来了。
https://blog.csdn.net/tst116/article/details/112979388

  • Android坐标系
    在这里插入图片描述
  • 视图坐标系
    在这里插入图片描述

2、视图动画标签和代码实现

视图动画Animation共用属性

属性名称描述
android:duration完成一次动画需要的执行时间
android:repeatCount动画重复执行次数,如果取值为infinite,则无限循环
android:repeatMode动画重复类型,如果是restart,表示表示重放,如果是reverse,则表示倒放
android:fillAfter控制动画执行结束之后,是否保持最后的状态,为true则表示保持
android:fillBefore控制动画执行结束之后,是否还原为初始化状态,为true则还原
android:fillEnabled作用与android:fillBefore一致
android:interpolater设置动画执行差值器

2-1、scale标签和ScaleAnimation

2-1-1、概述

scale标签和ScaleAnimation用来实现缩放视图动画

属性名称描述
android:fromXScale控件动画开始时候,在x轴缩放比例,1.0表示自身无变化,0.5表示缩小了1倍,2表示扩大了一倍
android:toXScale动画结束时候,相对于控件自身的缩放比例
android:fromYScale动画开始时候,在y轴相对控件自身的缩放比例
android:toYScale动画结束时候,在y轴相对控件自身的缩放比例
android:pivotX缩放起始点x轴坐标,支持数值、百分数、百分数p三种格式。(具体介绍见下面介绍)
android:pivotY缩放起始点y轴坐标,支持数值、百分数、百分数p三种格式。
缩放pivot接收类型介绍:

数值:表示相对视图左上角原点坐标+上xxPx值,注意这里值是pixel。
百分数:取原点+自身宽度/高度的百分比,如果是50%,则表示自己中心点为缩放x/y轴坐标起始点。
百分比p:取父控件的自身宽度/高度百分比,加上当前控件原点,作为缩放x/y轴的坐标起始点。

2-1-2、代码实现

下面分别使用xml和代码实现一个相同的缩放效果

  • 使用xml方式实现动画
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toXScale="1.5"
    android:toYScale="1.5" />

在代码中调用

val animation = AnimationUtils.loadAnimation(
    this@ScaleAnimationActivity,
    R.anim.view_animation_scale
)
vScaleWithXml.startAnimation(animation)
  • 使用代码方式实现动画
val scaleAnimation = ScaleAnimation(
        0.5F,
        1.5F,
        0.5F,
        1.5F,
        Animation.RELATIVE_TO_SELF,
        0.5F,
        Animation.RELATIVE_TO_SELF,
        0.5F
    )
scaleAnimation.duration = 1000
scaleAnimation.fillAfter = true
scaleAnimation.repeatCount = 5
scaleAnimation.repeatMode = ScaleAnimation.REVERSE
vScaleWithCode.startAnimation(scaleAnimation)

2-2、alpha标签和AlphaAnimation

2-2-1、概述

alpha故名思意,是用来实现透明度变化的动画

属性名称描述
android:fromAlpha透明度变化开始值,取值区间为0-1
android:toAlpha透明度变化结束值,取值区间为0-1

2-2-2、代码实现

透明度变化的效果过于简单了,所以就不展示图片了(😄,偷个懒,做一次gif好麻烦的)

  • xml方式实现
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromAlpha="0"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toAlpha="1" />

代码中引用

val animation = AnimationUtils.loadAnimation(
    this@AlphaAnimationActivity,
    R.anim.view_animation_alpha
)
vAlphaWithXml.startAnimation(animation)
  • 代码方式实现
val alphaAnimation = AlphaAnimation(0F, 1F)
alphaAnimation.fillAfter = true
alphaAnimation.repeatCount = 5
alphaAnimation.repeatMode = Animation.REVERSE
alphaAnimation.duration = 1000
vAlphaWithCode.startAnimation(alphaAnimation)

2-3、rotate标签和RotateAnimation

2-3-1、概述

rotate是用来实现旋转效果的动画

属性名称描述
android:fromDegrees动画开始的旋转角度位置,正值表示顺时针方向,负值表示逆时针方向
android:toDegrees动画结束的旋转角度位置,正值表示顺时针方向,负值表示逆时针方向
android:pivotX前面介绍过很多次了,不再赘述
android:pivotY前面介绍过很多次了,不再赘述

2-3-2、代码实现

  • xml方式实现
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toDegrees="359" />

代码中调用

 val animation = AnimationUtils.loadAnimation(
  this@RotateAnimationActivity,
     R.anim.view_animation_rotate
 )
 vRotateWithXml.startAnimation(animation)
  • 代码方式实现
val rotateAnimation = RotateAnimation(
    0F,
    359F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
rotateAnimation.fillAfter = true
rotateAnimation.repeatCount = 5
rotateAnimation.repeatMode = Animation.REVERSE
rotateAnimation.duration = 1000
vRotateWithCode.startAnimation(rotateAnimation)

使用RotateAnimation实现的旋转,只能支持平面效果,不能支持沿X或者Y轴线进行旋转,如果需要实现沿轴线旋转效果,需要自己对Animation进行扩展实现,后续文章会专门介绍。

2-4、translate标签和TranslateAnimation

2-4-1、概述

translate是用来实现位移效果的动画

属性名称描述
android:fromXDelta位移起始点x坐标,可以使用三种数据,数值,百分数,百分数p(具体说明与之前scale一致)
android:toXDelta位移结束点x坐标,可以使用三种数据,数值,百分数,百分数p(具体说明与之前scale一致)
android:fromYDelta位移起始点y坐标,可以使用三种数据,数值,百分数,百分数p(具体说明与之前scale一致)
android:toYDelta位移结束点y坐标,可以使用三种数据,数值,百分数,百分数p(具体说明与之前scale一致)

2-4-2、代码实现

  • xml方式实现
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:fromXDelta="-100%"
    android:fromYDelta="-100%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:toXDelta="100%"
    android:toYDelta="100%" />

在代码中调用

val animation = AnimationUtils.loadAnimation(
   this@TranslateAnimationActivity,
    R.anim.view_animation_translate
)
vTranslateWithXml.startAnimation(animation)
  • 代码方式实现
 val translateAnimation = TranslateAnimation(
    Animation.RELATIVE_TO_SELF,
     -1F,
     Animation.RELATIVE_TO_SELF,
     1F,
     Animation.RELATIVE_TO_SELF,
     -1F,
     Animation.RELATIVE_TO_SELF,
     1F
 )
 translateAnimation.duration = 1000
 translateAnimation.fillAfter = true
 translateAnimation.repeatCount = 5
 translateAnimation.repeatMode = Animation.REVERSE
 vTranslateWithCode.startAnimation(translateAnimation)

上面使用的方法public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) 中,需要说明下fromXType。该参数支持三个类型,分别是:

  • Animation.RELATIVE_TO_SELF 相对于自己
  • Animation.RELATIVE_TO_PARENT 相对于父容器
  • Animation.ABSOLUTE 设置具体的数值

如果是设置了Animation.ABSOLUTE,则设置具体的位置移动pixel即可,其他参数的话,取值范围在0~1,也就0%~100%

2-5、set标签和AnimationSet

2-5-1、概述

对于以上的四种动画,如果想要多种组合实现一个动画效果的时候,就需要用到set进行组装。
代码拼装,要使用addAnimation方法添加。

2-5-2、代码实现

  • xml方式
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:repeatMode="reverse">

    <alpha
        android:fromAlpha="0"
        android:repeatCount="5"
        android:toAlpha="1" />
    <scale
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:toXScale="2"
        android:toYScale="2" />
    <rotate
        android:fromDegrees="359"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:toDegrees="0" />
    <translate
        android:fromXDelta="-100"
        android:fromYDelta="-100%"
        android:repeatCount="5"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>

代码调用

val animation =
    AnimationUtils.loadAnimation(this@AnimationSetActivity, R.anim.view_animation_set)
vSetWithXml.startAnimation(animation)
  • 代码方式
val animatorSet = AnimationSet(true)
animatorSet.fillAfter = true
animatorSet.duration = 1000
val alphaAnimation = AlphaAnimation(0F, 1F)
alphaAnimation.repeatCount = 5
alphaAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(alphaAnimation)
val scaleAnimation = ScaleAnimation(
    0.5F,
    2F,
    0.5F,
    2F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
scaleAnimation.repeatCount = 5
scaleAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(scaleAnimation)
val rotateAnimation = RotateAnimation(
    0F,
    359F,
    Animation.RELATIVE_TO_SELF,
    0.5F,
    Animation.RELATIVE_TO_SELF,
    0.5F
)
rotateAnimation.repeatCount = 5
rotateAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(rotateAnimation)
val translateAnimation = TranslateAnimation(
    Animation.RELATIVE_TO_SELF,
    -1F,
    Animation.RELATIVE_TO_SELF,
    1F,
    Animation.RELATIVE_TO_SELF,
    -1F,
    Animation.RELATIVE_TO_SELF,
    1F
)
translateAnimation.repeatCount = 5
translateAnimation.repeatMode = Animation.REVERSE
animatorSet.addAnimation(translateAnimation)
vSetWithCode.startAnimation(animatorSet)

需要注意的一点是,使用AnimationSet设置的animatorSet.repeatMode = 5是没有作用的,需要对于动画单独设置才能生效。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值