Android View动画整理

news2025/1/20 19:10:20

此前也有写 View 动画相关的内容,但都只是记录代码,没有特别分析。以此篇作为汇总、整理、分析。

Android View 动画有4中,分别是

  • 平移动画 TranslateAnimation
  • 缩放动画 ScaleAnimation
  • 旋转动画 RotateAnimation
  • 透明度动画 AlphaAnimation

View 动画可以单独使用,也可以一起使用,一起使用就叫复合动画。

实现 View 动画有 2 种方式,java 方式和 xml 方式。

Demo 图说明,动画作用在图片上。图片显示在左上角,图片右侧和下方的线是为了方便看出 View 动画前后的位置、大小对比,无实际作用。
在这里插入图片描述

平移动画 TranslateAnimation

对 View 做水平或者竖直方向上的移动。

java 方式

import android.view.animation.TranslateAnimation;

TranslateAnimation translateAnimation = new TranslateAnimation(0,imageView.getWidth(),0,0);
translateAnimation.setDuration(3000);//动画时长
translateAnimation.setFillAfter(true);//true :view停留在动画结束的地方。false :动画结束后 view 返回原位
imageView.startAnimation(translateAnimation);

xml 方式

用 AS 可以很方便地创建 anim 目录和动画文件。
在这里插入图片描述

在 res/anim/view_anim_translate.xml 创建文件,写入

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--
    android:fromXDelta
    Float or percentage. 移动起始点的x坐标. 表示形式有三种:
    1 相对于自己的左边界的距离,单位像素值。(例如 "5")
    2 相对于自己的左边界的距离与自身宽度的百分比。(例如  "5%")
    3 相对于父View的左边界的距离与父View宽度的百分比。(例如 "5%p")

    android:toXDelta
    Float or percentage. 移动结束点的x坐标. 表现形式同上

    android:fromYDelta
    Float or percentage. 移动起始点的y坐标. 表示形式有三种:
    1 相对于自己的上边界的距离,单位像素值。(例如 "5")
    2 相对于自己的上边界的距离与自身高度的百分比。(例如  "5%")
    3 相对于父View的上边界的距离与父View高度的百分比。(例如 "5%p")

    android:toYDelta
    Float or percentage. 移动结束点的y坐标. 表现形式同上
    -->

    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="800"
        android:toYDelta="0"/>
</set>

然后通过 AnimationUtils 实现,

Animation animTran = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_translate);
animTran.setFillAfter(true);
imageView.startAnimation(animTran);

实现效果:View 向右平移自身宽度的距离。
在这里插入图片描述

缩放动画 ScaleAnimation

对 View 进行缩放操作。

java 方式

import android.view.animation.AccelerateInterpolator;
import android.view.animation.ScaleAnimation;

ScaleAnimation scaleAnimation = new ScaleAnimation(1 ,1.5f ,1 ,1.5f);// X轴 Y轴都放大 1.5 倍
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
scaleAnimation.setInterpolator(new AccelerateInterpolator());// 设置动画插值起,用来控制动画速度,这是加速插值器,动画速度会越来越快
imageView.startAnimation(scaleAnimation);

xml 方式

创建 res/anim/view_anim_translate.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--
        android:fromXScale
        Float. 水平方向缩放比例的初始值,1.0是没有变化。

        android:toXScale
        Float. 水平方向缩放比例的结束值,1.0是没有变化。

        android:fromYScale
        Float. 竖直方向缩放比例的初始值,1.0是没有变化。

        android:toYScale
        Float. 竖直方向缩放比例的结束值,1.0是没有变化。

        android:pivotX
        Float. 缩放中心点的x坐标

        android:pivotY
        Float. 缩放中心点的y坐标
    -->

    <scale
        android:duration="3000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

然后通过 AnimationUtils 实现,

Animation animScale = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_scale);
animScale.setFillAfter(true);
imageView.startAnimation(animScale);

实现效果:View 在竖直和水平方向上都放大 1.5 倍。
在这里插入图片描述

旋转动画 RotateAnimation

对 View 进行旋转。

默认以 View 的左上角为中心点旋转,也可以指定旋转中心的坐标。

java 方式

import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.ScaleAnimation;

RotateAnimation rotateAnimation = new RotateAnimation(0,180, imageView.getWidth(), imageView.getHeight());
rotateAnimation.setFillAfter(false);
rotateAnimation.setDuration(3000);
rotateAnimation.setRepeatCount(1);//重复1次
rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());// 设置动画插值起,用来控制动画速度,这是加速减速插值器,动画速度先快后慢
imageView.startAnimation(rotateAnimation);

xml 方式

创建 res/anim/view_anim_rotate.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!--
    android:fromDegrees
    Float. 旋转初始的角度。
    android:toDegrees
    Float. 旋转结束的角度。
    android:pivotX
    Float or percentage. 旋转中心点x坐标,表示形式有三种:
    1 相对于自己的左边界的距离,单位像素值。(例如 "5")
    2 相对于自己的左边界的距离与自身宽度的百分比。(例如 "5%")
    3 相对于父View的左边界的距离与父View宽度的百分比。(例如 "5%p")
    android:pivotY
    Float or percentage. 旋转中心点y坐标,表示形式有三种:
    1 相对于自己的上边界的距离,单位像素值。(例如 "5")
    2 相对于自己的上边界的距离与自身宽度的百分比。(例如 "5%")
    3 相对于父View的上边界的距离与父View高度的百分比。(例如 "5%p")
    -->

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="100%"
        android:pivotY="100%"
        android:toDegrees="+180"
        android:repeatCount="1" />
</set>

然后通过 AnimationUtils 实现,

Animation animRotate = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_rotate);
animRotate.setFillAfter(false);
imageView.startAnimation(animRotate);

实现效果:绕着 View 的右下角旋转 180° ,重复1次。
在这里插入图片描述

透明度动画 AlphaAnimation

对 View 进行透明度操作。

java 方式

import android.view.animation.AlphaAnimation;

AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0);
alphaAnim.setDuration(2000);
alphaAnim.setFillAfter(true);
imageView.startAnimation(alphaAnim);

xml 方式

创建 res/anim/view_anim_alpha.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
        android:fromAlpha
        Float. 设置透明度的初始值,其中0.0是透明,1.0是不透明的。

        android:toAlpha
        Float. 设置透明度的结束值,其中0.0是透明,1.0是不透明的。
    -->

    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

然后通过 AnimationUtils 实现,

Animation alphaAnimation = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_alpha);
alphaAnimation.setFillAfter(true);
imageView.startAnimation(alphaAnimation);

实现效果:View 变为不透明。
在这里插入图片描述

复合动画

复合动画就是把 View 动画结合使用。也是通过 java 方式和 xml 方式实现。

平移+透明度

import android.view.animation.AnimationSet;

AnimationSet set1 = new AnimationSet(true);
TranslateAnimation tAnimation1 = new TranslateAnimation(0,imageView.getWidth(),0,0);
AlphaAnimation aAnim1 = new AlphaAnimation(1f, 0.2f);

set1.addAnimation(tAnimation1);
set1.addAnimation(aAnim1);
set1.setDuration(2500);
set1.setFillAfter(true);
imageView.startAnimation(set1);

实现效果:View 向右平移自身宽度的距离,透明度逐渐变为 0.2f 。
在这里插入图片描述

平移+缩放

AnimationSet set2 = new AnimationSet(true);
TranslateAnimation tAnimation2 = new TranslateAnimation(0,(float) imageView.getWidth()/4,0,(float) imageView.getHeight()/8);

ScaleAnimation sAnimation2 = new ScaleAnimation(1 ,1.5f ,1 ,1.5f);

set2.addAnimation(tAnimation2);
set2.addAnimation(sAnimation2);
set2.setDuration(2500);
set2.setFillAfter(true);
imageView.startAnimation(set2);

实现效果:View 向右平移自身宽度 1/4 的距离,向下平移自身高度 1/8 的距离,放大 1.5 倍 。
在这里插入图片描述

平移+旋转

AnimationSet set3 = new AnimationSet(true);
TranslateAnimation tAnimation3 = new TranslateAnimation(0,imageView.getWidth(),0,imageView.getHeight());
RotateAnimation rAnimation3 = new RotateAnimation(0,360, imageView.getWidth(), imageView.getHeight());

set3.addAnimation(tAnimation3);
set3.addAnimation(rAnimation3);
set3.setDuration(2500);
set3.setFillAfter(true);
imageView.startAnimation(set3);

实现效果:View 向右平移自身宽度的距离,向下平移自身高度的距离,绕着右下角旋转 360°
在这里插入图片描述

平移+旋转+透明度

java 方式

AnimationSet set4 = new AnimationSet(false);
RotateAnimation rAnimation4 = new RotateAnimation(0,720, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
rAnimation4.setInterpolator(new AccelerateDecelerateInterpolator());
rAnimation4.setDuration(3500);

AlphaAnimation aAnim4 = new AlphaAnimation(1f, 0.5f);
aAnim4.setInterpolator(new AccelerateInterpolator());
aAnim4.setDuration(3000);

ScaleAnimation sAnimation4 = new ScaleAnimation(1 ,0.5f ,1 ,0.5f, (float) imageView.getWidth()/2, (float) imageView.getHeight()/2);
sAnimation4.setInterpolator(new LinearInterpolator());
sAnimation4.setDuration(2500);

set4.addAnimation(rAnimation4);
set4.addAnimation(aAnim4);
set4.addAnimation(sAnimation4);
set4.setFillAfter(true);
set4.setStartOffset(500);
mageView.startAnimation(set4);

xml 方式

创建 res/anim/view_anim_set4.xml 文件,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <rotate
        android:duration="3500"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />

    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.5" />

    <scale
        android:duration="2500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" />
</set>

然后通过 AnimationUtils 实现,

Animation anim4 = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);
anim4.setFillAfter(true);
imageView.startAnimation(anim4);

实现效果:以 View 的中心旋转 720° ,缩小为 0.5 倍 ,透明度逐渐变为 0.5f 。
在这里插入图片描述

监听动画过程

使用 Animation.setAnimationListener(AnimationListener listener) 方法即可监听动画过程,

Animation anim4 = AnimationUtils.loadAnimation(ViewAnimationActivity.this, R.anim.view_anim_set4);
                anim4.setFillAfter(true);
                anim4.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                imageView.startAnimation(anim4);

对点击事件的影响

View 动画对点击事件无影响。

即 View 的大小、位置变化后,点击 View 的原始位置,点击事件还是有的。

如果动画使 View 超出了原始位置,超出的部分,是无法响应点击事件的。

插值器

插值器用来控制动画的执行速度。

通过 Animation.setInterpolator(Interpolator i) 方法可以设置动画的插值器,

也可以用 xml 的方式,

<scale
        android:interpolator="@android:anim/linear_interpolator"
 />

系统预设的插值器有:

插值器说明
AccelerateDecelerateInterpolator开始和结束速度慢,中间加速
AccelerateInterpolator开始慢,逐渐加速
AnticipateInterpolator先反方向执行动画再正方向执行
AnticipateOvershootInterpolatorAnticipateInterpolator 结合 OvershootInterpolator ,先反方向执行动画再正方向执行,到动画终点后继续前进一段距离然后回到动画终点
BounceInterpolator自由落体,到终点后回弹几下再回到终点,类似乒乓球落地效果
CycleInterpolator正弦曲线,先正方向执行动画再反方向执行动画
DecelerateInterpolator开始快,结束慢
LinearInterpolator线性、匀速
OvershootInterpolator动画终点后继续前进一段距离然后回到动画终点
PathInterpolator暂时空着,后续补上
LinearOutSlowInInterpolatorandroidx里的,类似 DecelerateInterpolator ,开始速度快,逐渐减速,速度曲线用的贝塞尔曲线
FastOutLinearInInterpolatorandroidx里的,类似 AccelerateInterpolator ,逐渐加速,速度曲线用的贝塞尔曲线
FastOutSlowInInterpolatorandroidx里的,类似 AccelerateDecelerateInterpolator ,先加速再减速,速度曲线用的贝塞尔曲线

这些插值器基本满足了日常需求。

效果对比:
在这里插入图片描述
除了 CycleInterpolator ,绿色线是所有动画的终点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/925523.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习模型优化:提高训练效率和精度的技巧

文章目录 1. 数据预处理2. 批量归一化&#xff08;Batch Normalization&#xff09;3. 学习率调整4. 提前停止&#xff08;Early Stopping&#xff09;5. 模型压缩与剪枝6. 模型并行与分布式训练7. 自动化超参数调整结论 &#x1f389;欢迎来到AIGC人工智能专栏~探索Java中的静…

【MySQL】2、MySQL数据库的管理

常用 describe user; Field:字段名称 Type:数据类型 Null :是否允许为空 Key :主键 Type:数据类型 Null :是否允许为空key :主键 Default :默认值 Extra :扩展属性&#xff0c;例如:标志符列&#xff08;标识了种子&#xff0c;增量/步长&#xff09;1 2 id&#xff1a;1 3 5 …

机器视觉工程师,2023年最大忠告,没实力,别辞职

最近很多粉丝频繁联系我&#xff0c;太难了&#xff0c;想辞职&#xff0c;干不下去&#xff0c;想要要辞职。 我会慢慢和他分析他当前的优势和劣势&#xff0c;从目前掌握各家公司招聘的信息来看&#xff0c;分以下几种情况&#xff1a; 第一&#xff1a;员工流动性大的公司&…

badgerdb 压缩合并

压缩合并原因 badgerdb是lsm tree派系的数据库&#xff0c;put&#xff0c;delete接口都是通过追加写日志的方式来保存的&#xff0c;日志如果一直不清理&#xff0c;会导致读性能越来越差&#xff0c;占用的存储空间也越来越大&#xff0c;badgerdb为了解决这些问题&#xff0…

深入解析:树结构及其应用

文章目录 学习树的基本概念理解树的遍历方式学习堆和优先队列的应用案例分析&#xff1a;使用堆进行Top K元素的查找结论 &#x1f389;欢迎来到数据结构学习专栏~深入解析&#xff1a;树结构及其应用 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈…

提高生产力的强大开发工具

在当今快速发展的软件开发领域&#xff0c;提高生产效率和质量是每个开发团队追求的目标。JNPF&#xff08;Java Non-Enterprise Application Framework&#xff09;作为一种灵活且强大的开发工具&#xff0c;旨在帮助开发团队实现这一目标。本文将深入探讨JNPF如何提高生产力&…

非凸联合创始人李佐凡受邀出席复旦DSBA项目座谈会

8月17日&#xff0c;非凸科技联合创始人&CTO李佐凡受邀参加复旦管院数据科学与商业分析专业硕士&#xff08;DS&BA&#xff09;项目发展座谈会&#xff0c;与学校教授、老师在生源背景、课程教学、职业发展、学生培养和企业合作方面进行深入交流&#xff0c;旨在更好地…

【衍射光栅】用于Matlab的交互式衍射光栅模型研究

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【C++STL基础入门】vector运算和遍历、排序、乱序算法

文章目录 前言一、vector运算符1.1 比较运算符vector有哪些比较运算符&#xff1f;示例代码注意 1.2 下标运算符 二、算法2.1 算法需要的头文件2.2 遍历算法2.3 排序算法从大到小从小到大 2.4 乱序算法 总结 前言 C标准库提供了丰富的容器和算法&#xff0c;其中vector是最常用…

基本概念【算术、 关系、逻辑、位、字符串、条件、优先级等运算符】(三)-全面详解(学习总结---从入门到深化)

文章目录 运算符(operator) 算术运算符 赋值及其扩展赋值运算符 关系运算符 逻辑运算符 位运算符 字符串连接符 条件运算符 运算符优先级的问题 数据类型的转换 自动类型转换 强制类型转换 Scanner 处理键盘输入 运算符(operator) 计算机的基本用途就是执行数学运…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及Elasticsearch示例(2)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

每日一题 113路径总和||(递归)

题目 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSum 22…

脱离束缚:数字化工厂中ARM控制器的革命性应用!

近年来&#xff0c;中国数字经济体系已进入高速增长阶段。制造业作为中国经济高质量发展的重要支撑力量&#xff0c;在面临生产成本不断上涨、关键装备和核心零部件“受制于人”等挑战时&#xff0c;建设数字化工厂已成必然。 数字化工厂数据采集出现的问题 在数字工厂的建设…

两个步骤让图片动起来!

在当今数字时代&#xff0c;动态图片已经成为了网页设计和移动应用设计的标配之一。动态图片能够吸引用户的注意力&#xff0c;提高用户体验和页面交互性。那么&#xff0c;图片怎么动起来&#xff1f;有什么好用的方法呢&#xff1f;下面我们来一起探讨一下。 通常我们认知的动…

【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构

MinIO背景介绍 MinIO创始者是Anand Babu Periasamy, Harshavardhana&#xff08;戒日王&#xff09;等人&#xff0c; Anand是GlusterFS的初始开发者、Gluster公司的创始人与CTO&#xff0c;Harshavardhana曾经是GlusterFS的开发人员&#xff0c;直到2011年红帽收购了Gluster公…

Web安全测试(三):SQL注入漏洞

一、前言 结合内部资料&#xff0c;与安全渗透部门同事合力整理的安全测试相关资料教程&#xff0c;全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试&#xff0c;覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬&#xff01; 全部…

IDEA启动两个Tomcat服务的方式 使用nginx进行反向代理 JMeter测试分布式情况下synchronized锁失效

目录 引出IDEA启动Tomcat两个端口的方式1.编辑配置2.添加新的端口-Dserver.port80833.service里面管理4.启动后进行测试 使用nginx进行反向代理反向代理多个端口运行日志查看启动关闭重启 分布式情况下synchronized失效synchronized锁代码启动tomcat两个端口nginx反向代理JMete…

实验七 Linux 内核移植

【实验目的】 掌握 Linux 内核配置和编译的基本方法 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台交叉编译工具&#xff1a;arm-none-linux-gnueabi- 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&#xff0c;以“#”开头的命令表 示在开发板下…

C++信息学奥赛1139:整理药名

#include <iostream> #include <string> using namespace std; int main() {int n;// 输入整数ncin>>n;cin.ignore();string arr[n];// 循环读取n行字符串for (int i 0; i<n ;i){getline(cin,arr[i]);}for (int i 0; i<n ;i){for(int j0;j<arr[i]…