【Android】App开发-动画效果篇

2023-11-11

在我们玩手机的过程中,如果我们点击某一个页面时,会出现一个页面动画加载或者动画效果的现象。现在我们就来看看App开发中是如何实现动画效果的。

目录

动画的分类

逐帧动画:

补间动画:


动画的分类

在常见的app使用的动画中,常见的就是逐帧动画、补间动画和属性动画,这三种动画各有优点,下面我们来看看它们是如何是实现的:

逐帧动画:

逐帧动画,顾名思义就是动画的内容是由一张张图片构成的,所以我们只需要设置这些图片的展现次序以及展现的实现就可以实现逐帧动画的效果。

要想实现逐帧的动画,首先我们得有几张动画,我准备了下面6张图片,我计划让它们像放幻灯片一样每隔一段时间来显示:

准备完了照片,接下来就该创建一个动画的列表来播放这些图片:我们在drawable文件下面新创建一个animation(动画)类型的xml文件用于存储这几张要按动画效果播放的图片,这样这些图片就可以按照逐帧的形式展现了。创建完后我们记得将下面红圈位置改成animation-list,这样才能创造一个animation类型的控件:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:ignore="MissingDefaultResource">

    <item android:drawable="@drawable/pic2" android:duration="220"/>
    <item android:drawable="@drawable/pic2" android:duration="220"/>
    <item android:drawable="@drawable/pic3" android:duration="220"/>
    <item android:drawable="@drawable/pic4" android:duration="220"/>
    <item android:drawable="@drawable/pic5" android:duration="220"/>
    <item android:drawable="@drawable/pic6" android:duration="220"/>

</animation-list>

准备完了播放的动画,接下来我们就要准备一个Relativelayout图层来容纳这个动画xml文件,这里的xml文件可以近似看成一张图片,只不过是一张会动的图片,所以我们处理它们的时候可以按照类似图片的方式处理。我们设置背景就是这个动画xml文件,这样就可以将这个动画xml文件逐帧在背景上显示了,这里也可以调整出一个区域来设置设置这张“图片”,这样它不是全屏播放。因为下面我们设置放置这张“图片”的位置是Relativelayout的backgrou即背景。既然我们图片可以作为背景,那么图片也可以在一个区域中显示,所以我们也可以划出一个区域来放置:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/animation"
        android:id="@+id/Relid"
    />

设置完这些我们就可以直接在Main程序里面创建这个图层了,首先我们必须要创建一个Relativelayout的图层,并且将之前我们设置的图层通过findbyid的形式找到并且传递给创建的变量,然后再实例化一个动画类型的变量animation,为了触发这个动画效果,我们还设置调用Relativelayout里面的点击效果函数来设置点击开启动画效果。动画效果的开始就是调用动画类型变量animation里的start方法,结束就是调用stop方法:

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout relativeLayout = findViewById(R.id.Relid);
        AnimationDrawable animationDrawable = (AnimationDrawable) relativeLayout.getBackground();
        relativeLayout.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View view) {
                animationDrawable.start();
            }
        });
    }

补间动画:

在我们看完逐帧动画之后,下面我们就来看一下补间动画。所谓的补间动画就是操作图片进行平移、缩放、旋转和透明度设置的操作。

要对图片进行操作,首先我们要准备一张图片:

    <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:layout_marginStart="54dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="54dp"
        android:src="@drawable/pic5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

准备完了要去操作的图片,进行补间动画的操作我们需要在res文件夹下新创一个文件夹,并且命名为“anim”一定要叫anim,其它名字没有Animation Resource file的文件),然后再在这个文件夹下面创建出一个Animation Resource file的文件:

下图为改了anim名字后的文件,里面没有Animation Resource file的文件:

这个Animation Resource file文件编写记录的是我们的操作,补间动画对图片有四种操作:Alpha、roatate、translate、scales。分别对应:透明度变化、旋转、平移和放缩。下面我们来看看四种变换的实现方式:

alpha:

alpha表示对图片进行透明度处理,当我们在anim目录下新创一个Animation Resource file后,我们会得到一个set的节点,我们再在节点里面创建一个aplha节点,如下图所示。这个节点就是用来配置图片透明度处理信息的。fromalpha表示开始时图片的透明度,这里选择完全不透明,我想要的效果是图片一开始完全不透明,我点击后它会逐渐变透明,所以toalpha我选择0。这里有一个很重要的设置就是duration,它表示这个图片透明度变化的持续时间,必须要设置。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration = "6000"
        />
</set>

变化效果(变化过程中):

rotate:

这个表示图片旋转动画,与前面类似,只不过配置方法不同。这里的fromDegrees表示开始时图片的角度,我设置为0度,旋转完成后的角度为toDegrees,我设置为180度,旋转轴为pivotX和pivotY,它们分别表示旋转轴在图片的哪个位置,50%、50%表示在X、Y轴一半处,也就是中心。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "6000"
        />
</set>

旋转效果(变化过程中):

 translate:

这种变换是平移变换,既然是平移,就需要初始位置和末尾位置,初始位置fromXdelta和fromYDelta就直接设置为0,0。末尾位置就设置为移动量为X是20和Y是300处。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="20"
        android:toYDelta="100"
        android:duration = "6000"

        />
</set>

移动过程:

 

scale:

这个操作表示缩放效果,它也要有一个缩放的中心轴。这里我们就照旧设置为中点。既然缩放,那就免不了有缩放前的比例和缩放后的比例。缩放前的fromXScale和fromYScale我们就设置为1,就是原始状态。而缩放后的toXScale和toYScale就设置为都是0.5即可。这个变换表示将长、宽图片按0.5比例缩小。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="0.5"
        android:toYScale="0.5"
        android:duration = "6000"
        />
</set>

缩放效果(变化过程中):

了解完四种变化效果,接下来就要将变化效果设置到图片中去了。首先照旧在Main方法里创建出来图片,并且设置点击方法。这里我们要想用到动画效果,就需要将动画效果加载到图片中。首先我们实例化出一个动画效果的对象an。然后将这个对象通过AnimationUtils的loadAnimation方法加载到an里面这个loadAnimation方法两个参数,一个是上下文,另一个是我们之前创建的4中动画效果,要加载哪一种就找到它将它传进去即可。最后就是调用图片控件的startAnimation方法,将动画效果的对象作为参数传递进去即可。

ImageView imageView = findViewById(R.id.img1);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation an = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scales);
                imageView.startAnimation(an);
            }
        });

​​​​​​​

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Android】App开发-动画效果篇 的相关文章

  • 如何清除所有WebView存储的信息?

    我有一个 Android 浏览器 我可以选择清除缓存 存储 cookie 等 代码如下所示 webView clearCache true webView clearFormData webView clearHistory webView
  • 如何重试已消耗的 Observable?

    我正在尝试重新执行失败的已定义可观察对象 一起使用 Retrofit2 和 RxJava2 我想在单击按钮时重试特定请求及其订阅和行为 那可能吗 service excecuteLoginService url tokenModel Ret
  • Sqlite数据库生命周期?关闭应用程序后它会被删除吗?

    我正在遵循一个简单的教程 该教程创建一个从 SQLiteOpenHelper 扩展的类 并创建一个包含一个表和 5 行的数据库 好的 但我需要更多地了解 android Sqlite 数据库 例如 如果应用程序关闭或手机关机会发生什么 数据
  • Android - 从资产中解析巨大(超大)JSON 文件的最佳方法

    我正在尝试从资产文件夹中解析一些巨大的 JSON 文件 我如何加载并添加到 RecyclerView 我想知道解析这种大文件 大约 6MB 的最佳方法是什么 以及您是否知道可以帮助我处理此文件的良好 API 我建议您使用GSON lib h
  • 在 ViewPager Fragments 中使用 Master/Detail 模板(下载链接)

    工作代码 https github com lukeallison ViewPagerMasterDetail https github com lukeallison ViewPagerMasterDetail Android 主 详细流
  • 谷歌坐标认证

    当我尝试连接到 Google 坐标时 总是出现异常GoogleAuthException 我拥有 Google 地图协调中心许可证 我确实使用我的包应用程序名称和 SHA1 在 google 控制台中创建了我的客户端 ID 我将权限添加到清
  • 如何在android中获取Camera2 API的当前曝光

    In android hardware Camera旧的 我使用下面的代码获取当前曝光并获取它Camera Camera Parameters param mCamera getParameters currentExposure para
  • 是否可以将数组或对象添加到 Android 上的 SharedPreferences

    我有一个ArrayList具有名称和图标指针的对象 我想将其保存在SharedPreferences 我能怎么做 注意 我不想使用数据库 无论 API 级别如何 请检查SharedPreferences 中的字符串数组和对象数组 http
  • Android:捕获的图像未显示在图库中(媒体扫描仪意图不起作用)

    我遇到以下问题 我正在开发一个应用程序 用户可以在其中拍照 附加到帖子中 并将图片保存到外部存储中 我希望这张照片也显示在图片库中 并且我正在使用媒体扫描仪意图 但它似乎不起作用 我在编写代码时遵循官方的Android开发人员指南 所以我不
  • 无法展开 RemoteViews - 错误通知

    最近 我收到越来越多的用户收到 RemoteServiceException 错误的报告 我每次给出的堆栈跟踪如下 android app RemoteServiceException Bad notification posted fro
  • 控制Android的前置LED灯

    我试图在用户按下某个按钮时在前面的 LED 上实现 1 秒红色闪烁 但我很难找到有关如何访问和使用前置 LED 的文档 教程甚至代码示例 我的意思是位于 自拍 相机和触摸屏附近的 LED 我已经看到了使用手电筒和相机类 已弃用 的示例 但我
  • 如何使用 IF 检查 TextView 可见性

    我有一个 onCheckedChangeListener 来根据选择的单选按钮显示文本视图 我有 1 个疑问和 1 个难题 想知道是否有人可以帮助我 问题 您能否将单选组默认检查值设置为 否 单选按钮 以便一开始就不会检查任何内容 问题 如
  • 尝试在 ubuntu 中编译 android 内核时出错

    我正在尝试从源代码编译 Android 内核 并且我已经下载了所有正确的软件包来执行此操作 但由于某种原因我收到此错误 arm linux androideabi gcc error unrecognized command line op
  • Android Studio - Windows 7 上的 Android SDK 问题

    我对 Google i o 2013 上发布的最新开发工具 Android Studio 有疑问 我已经成功安装了该程序并且能够正常启动 我可以导入现有项目并对其进行编辑 但是 当我尝试单击 SDK 管理器图标或 AVD 管理器图标时 或者
  • 如何根据 gradle 风格设置变量

    我想传递一个变量test我为每种风格设置了不同的值作为 NDK 的定义 但出于某种原因 他总是忽略了最后味道的价值 这是 build gradle apply plugin com android library def test andr
  • 在activity_main.xml中注释

    我是安卓新手 据我所知 XML 中的注释与 HTML 中的注释相同 使用 形式 我想在 Android 项目的 Activity main xml 配置文件中写一些注释 但它给了我错误 值得注意的是 我使用的是 Eclipse 但目前 我直
  • 一次显示两条Toast消息?

    我希望在一个位置显示一条 Toast 消息 并在另一位置同时显示另一条 Toast 消息 多个 Toast 消息似乎总是按顺序排队和显示 是否可以同时显示两条消息 是否有一种解决方法至少可以提供这种外观并且不涉及扰乱活动布局 Edit 看来
  • Firebase 添加新节点

    如何将这些节点放入用户节点中 并创建另一个节点来存储帖子 我的数据库参考 databaseReference child user getUid setValue userInformations 您需要使用以下代码 databaseRef
  • 捕获的图像分辨率太大

    我在做什么 我允许用户捕获图像 将其存储到 SD 卡中并上传到服务器 但捕获图像的分辨率为宽度 4608 像素和高度 2592 像素 现在我想要什么 如何在不影响质量的情况下获得小分辨率图像 例如我可以获取或设置捕获的图像分辨率为原始图像分
  • 如何将 google+ 登录集成到我的 Android 应用程序中?

    大家好 实际上我需要通过我的应用程序从 google 登录人们 现在我阅读了 google 上的文档 其中指出 要允许用户登录 请将 Google Sign In 集成到您的应用中 初始化 GoogleApiClient 对象时 请求 PL

随机推荐

  • 利用OpenSSL实现非阻塞通讯C++代码

    可以转载 转载请注明出处 谢谢 关于OpenSSL的原理以及OpenSSL如何安装 使用 测试demo请参看我之前的两篇博文 这篇博文主要实现了如何在win64下基于VS2012实现OpenSSL的非阻塞通讯 参考了以下几篇博文的内容 表示
  • gcov lcov, 部分代码无法生成 gcda 的原因解决

    参考http blog csdn net lostaway article details 40948841 配置 项目有多个module 组成 一部分有gcda 生成 一部分没有 原因是这部分module 在循环处理 永远不退出 使用 k
  • ResNet系列及其变体(六)—DarkNet53

    本篇主要介绍DarkNet53 其他ResNet系列及其变体介绍见如下blog ResNet系列及其变体目录 DarkNet53 YOLOv3 An Incremental Improvement Darknet53是经典的一个深层网络 结
  • 51单片机的步进电机控制系统(仿真+程序+报告+原理图)

    1 主要功能 该系统由AT89C51单片机 数码管模块 步进电机模块 按键模块构成 可实现功能 1 按键控制步进电机正反转 加减速 停止 2 2个发光二极管显示正反转 1位7段LED数码管显示当前转速档位 共9个档位 3 4个红色LED 指
  • java 8 stream 处理对于 List<Map<String,Object>> 数据的分组求和

    java 8 stream 处理对于 List
  • [914]linux如何批量关闭进程

    碰到需要杀掉某一类进程的时候 如何批量杀掉这些进程 使用awk命令是很好的选择 代码 ps ef grep aaa grep v grep awk print kill 9 2 sh ps ef grep aaa grep v grep 这
  • 查看Linux下网卡状态

    ip link 命令 或者 通过mii tool指令 root localhost root mii tool eth0 negotiated 100baseTx FD link ok eth1 no link 或 root localho
  • 网络通信的整个流程

    1 网络通信流程 你的电脑打开浏览器 访问www baidu com 先将请求信息发给了交换机 然后交给了路由器 路由发给DNS服务器 通过DNS协议去找我们要访问的百度的IP地址 查到的百度服务器对应的IP地址之后 路由器通过路由协议找到
  • 【Unity开发】Unity实现英雄联盟选择皮肤效果

    using UnityEngine using System Collections
  • 突破存储边界 赋能开放计算

    2022年8月10日 开放计算中国社区技术峰会 OCP China Day 2022在北京拉开帷幕 开放计算中国社区技术峰会 OCP China Day 是全球开放计算最具规模的生态峰会之一 此次大会以 开放 向未来 绿色 融合 赋能 为主
  • springboot默认数据源究竟是什么?

    springboot默认数据源究竟是什么 springboot默认使用的数据源是druid hikaricp dbcp2还是tomcat pooling 网上很多都说是hikaricp 其实这样的说法是不准确的 根据springboot官方
  • elementui form 正则表达式校验手机号

    data var checkPhone rule value callback gt if value return callback new Error 手机号不能为空 else const reg 1 3 4 5 7 8 0 9 d 8
  • 【Linux】使用Xshell远程链接Linux服务器踩坑合辑

    使用Xshell远程链接Linux服务器踩坑合辑 Xshell远程连接服务器 1 无法解析主机 2 Xshell连接服务器 导入密钥文件失败 Xshell远程连接服务器 Xshell是一个常用的远程连接服务器工具 日常使用十分方便便捷 在连
  • docker在镜像和本地之间拷贝文件

    一 从容器里面拷文件到宿主机 docker cp b76a6e929470 home nacos conf Users king Desktop docker cp 容器ID 要拷贝的文件在容器中的位置 要拷贝到本地宿主机的位置 二 从宿主
  • error: (-215:Assertion failed) !_src.empty() in function ‘cv::cvtColor‘...

    解决 error 215 Assertion failed src empty in function cv cvtColor 报错如下 分析原因 解决方法 代码实现 报错如下 分析原因 可能是照片无效问题 即cv2 imread返回的值为
  • 常用linux命令

    1 创建文件目录 mkdir 2 创建文件 vi filename eg vi test txt 3 移动文件 mv source destination eg mv test txt study 重命名文件 mv test txt hel
  • VScode 黄色波浪线,Import “[module]“ could not be resolvedPylance

    文章目录 问题描述 解决方案 1 修改vscode的python环境 2 修改 vscode seteing json 文件 问题描述 大致的错误截图 第三方包 自己的代码库 导入不成功 显示黄色波浪线 代码自动提示功能受限 解决方案 可按
  • 斯坦福 机器学习-第二章 生成学习算法

    CS229 Lecture notes 原作者 Andrew Ng 吴恩达 翻译 CycleUser Part IV 生成学习算法 Generative Learning algorithms 目前为止 我们讲过的学习算法的模型都是p y
  • java--基础--17.1--线程--实现多线程,线程方法

    java 基础 17 1 线程 实现多线程 线程方法 1 概念 进程 正在运行的程序 每个进程可以由多个线程组成 线程 是进程中的单个顺序控制流 是一条执行路径 并行 指在某一个时间点执行多个任务 并发 指在某一个时间段执行多个任务 2 实
  • 【Android】App开发-动画效果篇

    在我们玩手机的过程中 如果我们点击某一个页面时 会出现一个页面动画加载或者动画效果的现象 现在我们就来看看App开发中是如何实现动画效果的 目录 动画的分类 逐帧动画 补间动画 动画的分类 在常见的app使用的动画中 常见的就是逐帧动画 补