视图动画概述与使用

已于 2022-11-14 22:17:10 修改
阅读量1.3k 收藏 7
点赞数 1
分类专栏： 动画与过度 android 文章标签： android 动画 View Animation
于 2021-05-18 00:34:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanggang514260663/article/details/116885558
版权

视图动画概述与使用

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是没有作用的，需要对于动画单独设置才能生效。

王先生技术栈
关注
专栏目录
一行代码为特定状态绑定SwiftUI视图动画
享受开发，颠倒银河
06-22 310
在本篇博文中，我们学习了仅用一行代码在任意视图上绑定独立状态对应的动画效果，化生硬为灵动，棒棒哒！
MSC Adams：Adams视图与动画制作教程
最新发布
kkchenjj的博客
08-27 942
在MSC Adams中，动画的创建基于模拟结果，通过关键帧来定义模型在不同时间点的位置和姿态。动画原理涉及模型在三维空间中的运动学和动力学分析，利用Adams的后处理功能，可以将这些分析结果可视化，生成动态的模型运动过程。
视图切换的动画效果
04-14
NULL 博文链接：https://eric-gao.iteye.com/blog/1122130
视图动画
qq_22893529的博客
03-18 279
视图动画2.1视图动画标签2.1.1 概述2.1.2 scale标签2.1.3 alpha标签2.1.4 rotate标签2.1.5 translate标签2.1.6 set标签2.2视图动画代码实现2.2.1 概述2.2.2 ScaleAniamtion2.2.3 AlphaAniamtion2.2.4 RotateAniamtion2.2.5 TranslateAniamtion2.2.6 AniamtionSet2.2.7 Aniamtion2.3差值器初探2.3.1 AccelerateDecele
View Animation（视图动画）
swt369的博客
08-27 1048
Android Developers视图动画部分翻译
视图动画介绍
qq_37776700的博客
10-14 397
视图动画介绍
正方形中干净且易于使用的动画进度视图。-Android开发
05-26
BoxLoaderView概述在一个正方形中，一个干净且易于使用的动画进度视图。 用法在build.gradle（app）依赖项中添加依赖项{编译'com.github.nipun-birla：BoxLoaderView：0.0.1'BoxLoaderView概述在Square中，一个干净...
在Windows Mobile上动画化视图过渡
04-11
使用CAnimationController的AddTransition方法，将动画变量与视图的属性关联起来。这确保了视图属性随时间的推移自动更新。 5. **启动动画** 一旦所有过渡动画设置完毕，通过调用CAnimationController的Animate...
Android 视图动画(View Animation) 使用详解
whdAlive 's blog
05-10 1202
谨以文章记录学习历程，如有错误还请指明。 动画综述 Google大大对动画的总述如下： Animations can add visual cues that notify users about what’s going on in your app. They are especially useful when the UI changes state, such a...
Android动画(一)：视图动画
kayyoo的博客
03-31 488
Android视图动画
Android动画之视图动画
freeCode
09-17 3115
前言       动画在Android中是一个相当于重要的知识点，使用场景也很多，炫酷的界面效果少不了动画来提升，这里我们就先来说说Android中的动画，在说Android的动画之前，我们先来了解一下动画这个效果的通用含义。什么是动画？       我们在平常生活中，经常会遇到动画这个词，大家也不要想歪了，可不是大家理解的岛国xx片哦！，那动画究竟是什么呐？在不同的场景中，这个词的名词解释都不一样
自定义控件——视图动画
LVEfrist的博客
02-27 1374
Android中的动画主要分为两大类，视图动画和属性动画。我相信这在我们参加面试的时候面试官必问的问题。但是关键的是当面试官问这一知识点的时候我们通常都是过不了关的。那么这里我们就着重讲一下视图动画这个分支。什么叫视图动画呢，顾名思义它主要针对的就是View视图。 视图动画又可分为两个分支：补间动画、逐帧动画 一、补间动画 根据不同的动画效果，补间动画又分为4种动画： 平移动画（Tr...
Android视图动画浅析
宿罪的博客
09-19 974
视图动画 视图动画共有四种，分别为透明度，旋转，平移，缩放动画，如同名字所说一样，它是一种视图上的动画，改变的只是视觉上的效果，实际上View的属性如位置，大小，透明度等并没有受到动画的影响。下面将演示四种视图动画的代码及xml定义使用。代码定义：public void alpha(View v){ AlphaAnimation alphaAnimation = new AlphaAnima
视图动画配置XML实现
a1003434346的博客
04-09 318
概述: Android的视图动画由5种类型组成: alpha: 渐变透明度动画效果 scale: 渐变尺寸伸缩动画效果 translate: ...
视图动画的常用用法
DASHBB的博客
02-26 932
动画的种类 Android动画大体可以分为以下3种： 逐帧动画(Drawable Animation) 视图动画(View Animation) 属性动画(Property Animation) 一般来说，属性动画是首选的使用方法，因为它更灵活，并提供更多功能。视图动画和逐帧动画仿佛将退出历史的舞台，但有时使用起来也挺方便的。 下面来看一下视图动画的四种动画 1.平移(translate) <?xml version="1.0" encoding="utf-8"?> <set xmlns:
Android应用开发之所有动画使用详解
2401_84814467的博客
05-07 651
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
一、Android动画学习---视图动画
weixin_58208047的博客
07-20 557
Android动画（视图动画、属性动画）
android 动画 ——视图动画(View Animation)
彭思正的博客
07-01 6106
android动画分为视图动画(View Animation)、属性动画（Property Animation） 想看属性动画（Property Animation）：请移步至 这里我们来说下视图动画（View Animation）的纯代码写法，还有一种是xml调用， 对于xml调用可以去看 http://blog.csdn.net/u013424496/article/details/51
Android 3D视图旋转动画详解与代码实现
作者首先概述了实现3D旋转动画的基本原理，然后通过自定义动画类`Rotate3dAnimation`来展示具体步骤。 `Rotate3dAnimation`类是基于`Animation`类的扩展，其核心在于`applyTransformation()`方法，这个方法在动画...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值