AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android 中动画的详解(包括视图动画和图片动画)

2023-08-16 51
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android 中动画的详解(包括视图动画和图片动画)

前言：动画的介绍

图片动画详解，移步这篇文章进行查看学习

Android 动画之帧动画(也叫图片动画)的用法

下面讲解视图动画相关的API如下(View Animation)

Animation公用的功能

视图启动动画后，默认是恢复到开始的状态。

下面通过编码和xml两种方式实现视图动画，代码中已给出注释

1、布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activity.AnimationActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeScale"
            android:text="Code Scale" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlScale"
            android:text="Xml Scale" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeRotate"
            android:text="Code Rotate" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlRotate"
            android:text="Xml Rotate" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAlpha"
            android:text="Code Alpha" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAlpha"
            android:text="Xml Alpha" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeTranslate"
            android:text="Code Translation" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlTranslate"
            android:text="Xml Translation" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAnimationSet"
            android:text="Code AnimationSet"
            android:textSize="15sp" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAnimationSet"
            android:text="Xml AnimationSet"
            android:textSize="15sp" />
    </LinearLayout>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="testAnimationListener"
        android:text="Test Animation Listener" />
    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/logo1" />
    <TextView
        android:id="@+id/tv_animation_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示动画描述信息"
        android:textSize="18dp" />
</LinearLayout>

2、AnimationActivity 类

public class AnimationActivity extends AppCompatActivity {
    private TextView tv_animation_msg;
    private ImageView iv_animation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);
        tv_animation_msg = findViewById(R.id.tv_animation_msg);
        iv_animation = findViewById(R.id.iv_animation);
    }
    /**
     * 1.1编码实现缩放动画
     * ScaleAnimation
     * <p>
     * 1.创建动画对象
     * 2.设置
     * 3.启动动画
     */
    public void startCodeScale(View view) {
        tv_animation_msg.setText("Code缩放动画: 宽度从0.5到1.5, 高度从0.0到1.0, 缩放的圆心为顶部中心点,延迟1s开始,持续2s,最终还原");
        //1.创建动画对象
        ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 1.5f, 0.0f, 1.0f,
                Animation.ABSOLUTE, iv_animation.getWidth() / 2, Animation.ABSOLUTE, 0);
        scaleAnimation = new ScaleAnimation(0.5f, 1.5f, 1.0f, 2.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0);
        //2.设置
        //延迟1s开始
        scaleAnimation.setStartOffset(1000);
        //持续2s
        scaleAnimation.setDuration(2000);
        //最终还原
        scaleAnimation.setFillBefore(true);
        //3.启动动画
        iv_animation.startAnimation(scaleAnimation);
    }
    /**
     * 1.2 xml实现:缩放动画
     * 1.定义动画文件
     * 2.加载动画文件得到动画对象
     * 3.启动动画
     * <scale>
     */
    public void startXmlScale(View view) {
        tv_animation_msg.setText("Xml缩放动画: Xml缩放动画: 宽度从0.0到1.5, 高度从0.0到1.0, 延迟1s开始,持续3s,圆心为右下角, 最终固定");
        //1.定义动画文件
        // 2.加载动画文件得到动画对象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_test);
        // 3.启动动画
        iv_animation.startAnimation(animation);
    }
    /**
     * 1.1编码实现旋转动画
     * ScaleAnimation
     * 1.创建动画对象
     * 2.设置
     * 3.启动动画
     */
    public void startCodeRotate(View view) {
        tv_animation_msg.setText("Code旋转动画: 以图片中心点为中心, 从负90度到正90度, 持续5s");
        //1.创建动画对象
        RotateAnimation rotateAnimation = new RotateAnimation(-90, 90, Animation.RELATIVE_TO_SELF, 0.5F,
                Animation.RELATIVE_TO_SELF, 0.5f);
        //2.设置
        rotateAnimation.setDuration(5000);
        iv_animation.startAnimation(rotateAnimation);
    }
    /**
     * 1.2 xml实现:旋转动画
     * 1.定义动画文件
     * 2.加载动画文件得到动画对象
     * 3.启动动画
     * <rotate>
     */
    public void startXmlRotate(View view) {
        tv_animation_msg.setText("Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s");
        //1.定义动画文件
        //* 2.加载动画文件得到动画对象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_test);
        //* 3.启动动画
        iv_animation.startAnimation(animation);
    }
    /*
     * 3.1 编码实现: 透明度动画
     * 完全透明 : 0
     * 完全不透明 : 1
     * AlphaAnimation
     */
    public void startCodeAlpha(View view) {
        tv_animation_msg.setText("Code透明度动画: 从完全透明到完全不透明, 持续2s");
        //1.创建动画对象
        AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
        //2.设置
        alphaAnimation.setDuration(4000);
        //3.启动动画
        iv_animation.startAnimation(alphaAnimation);
    }
    /**
     * 1.2 xml实现:透明度动画
     * 1.定义动画文件
     * 2.加载动画文件得到动画对象
     * 3.启动动画
     * <alpha>
     */
    public void startXmlAlpha(View view) {
        tv_animation_msg.setText("Xml透明度动画: 从完全不透明到完全透明, 持续4s");
        //1.定义动画文件
        //* 2.加载动画文件得到动画对象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_test);
        animation.setFillAfter(true);
        //* 3.启动动画
        iv_animation.startAnimation(animation);
    }
    /**
     * 4.1 编码实现: 平移动画
     * TranslateAnimation
     */
    public void startCodeTranslate(View view) {
        tv_animation_msg.setText("Code移动动画: 向右移动一个自己的宽度, 向下移动一个自己的高度, 持续2s");
        //1.创建动画对象
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1.0f, Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1.0F);
        //设置
        translateAnimation.setDuration(2000);
        //启动动画
        iv_animation.startAnimation(translateAnimation);
    }
    /*
     * 4.2 xml实现: 平移动画
     * <translate>
     */
    public void startXmlTranslate(View view) {
        tv_animation_msg.setText("xml移动动画: 从屏幕的右边逐渐回到原来的位置, 持续2s"); //***此效果用于界面切换的动画效果
        //1.定义动画文件
        //* 2.加载动画文件得到动画对象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_test);
        //* 3.启动动画
        iv_animation.startAnimation(animation);
    }
    /*
     * 5.1 编码实现: 复合动画
     * AnimationSet
     */
    public void startCodeAnimationSet(View view) {
        tv_animation_msg.setText("Code复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续1s");
        //1.创建透明度动画并设置
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(2000);
        //2.创建旋转动画并设置
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(1000);
        rotateAnimation.setStartOffset(2000);//延迟2s后，执行旋转动画
        //3.创建复合动画对象
        //设置为true 表示给AnimationSet设置变化率，会应用到这个复合动画中的所有子动画上面
        AnimationSet animationSet = new AnimationSet(true);
        //4.添加两个动画
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(rotateAnimation);
        //5.启动复合动画对象
        iv_animation.startAnimation(animationSet);
    }
    /*
     * 4.2 xml实现: 平移动画
     * <set>
     */
    public void startXmlAnimationSet(View view) {
        tv_animation_msg.setText("Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s");
        //1. 定义动画文件
        //2. 加载动画文件得到动画对象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_test);
        //3. 启动动画
        iv_animation.startAnimation(animation);
    }
    /*
     * 6. 测试动画监听
     */
    public void testAnimationListener(View view) {
        tv_animation_msg.setText("测试动画监听");
        //1.定义动画文件
        //* 2.加载动画文件得到动画对象
        Animation animation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(1000);
        //设置变化率
        animation.setInterpolator(new LinearInterpolator());
        //设置动画重复次数
        animation.setRepeatCount(Animation.INFINITE);
        //设置动画监听
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.i("TAG", "动画开始");
            }
            @Override
            public void onAnimationEnd(Animation animation) {
                Log.i("TAG", "动画结束");
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.i("TAG", "动画重复");
            }
        });
        //* 3.启动动画
        iv_animation.startAnimation(animation);
    }
}

3、对应的xml文件如下

1、透明度动画alpha_test.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fromAlpha="1"
    android:toAlpha="0">
</alpha><!--Xml透明度动画: 从完全不透明到完全透明, 持续4s-->

2、旋转动画rotate_test.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromDegrees="90"
    android:toDegrees="-90">
</rotate><!--Xml旋转动画: 以左顶点为坐标, 从正90度到负90度, 持续5s-->

3、缩放动画scale_test.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="100%"
    android:pivotY="100%"
    android:startOffset="1000"
    android:toXScale="1.5"
    android:toYScale="1.0">
</scale><!--Xml缩放动画: Xml缩放动画: 宽度从0.0到1.5, 高度从0.0到1.0, 延迟1s开始,持续3s,圆心为右下角, 最终固定-->

4、平移动画translate_test.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="100%p"
    android:fromYDelta="0"
    android:toXDelta="0"
    android:toYDelta="0">
</translate><!--从屏幕的右边逐渐回到原来的位置, 持续2s-->

5、复合动画set_test.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0"
        android:toAlpha="1" />
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:startOffset="2000"
        android:toDegrees="360" />
</set><!--Xml复合动画: 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s-->

具体效果如图所示：


文章标签：
Android开发
数据格式
XML
API
关键词：
Android视图
Android动画
Android图片
Android视图图片
Android动画图片
路宇
目录
相关文章
wljslmz
|
28天前
|
Web App开发 安全 Linux
Firefox 130 现已可供下载，具有新的翻译工具、更好的滚动动画和改进的 Android 性能
【10月更文挑战第14天】
wljslmz
36 0
Firefox 130 现已可供下载，具有新的翻译工具、更好的滚动动画和改进的 Android 性能
shuj
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中，自定义视图犹如一座座小岛，等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程，从浅滩走向深海，逐步揭开自定义视图的神秘面纱。
shuj
37 3
阿迷创客
|
3月前
|
存储 Shell Android开发
基于Android P，自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤，包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
阿迷创客
76 2
基于Android P，自定义Android开机动画的方法
请看我回答~
|
3月前
|
供应链 物联网 区块链
未来触手可及：探索新兴技术的趋势与应用安卓开发中的自定义视图：从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展，新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景，带你领略未来的可能性。
请看我回答~
55 6
请看我回答~
|
3月前
|
测试技术 Android开发 Python
探索软件测试的艺术：从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中，测试是不可或缺的一环。它如同艺术一般，需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言，引领读者从软件测试的基础出发，逐步深入到更复杂的测试策略和工具的使用，最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能，就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
请看我回答~
57 1
天下无贼001
|
12天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
29 4
大树营养快线
|
21天前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现，可以方便地在应用中展示生动的 Gif 动画。在实际应用中，需要根据具体情况进行合理选择和优化，以确保用户体验和性能的平衡。可以通过不断的实践和探索，进一步掌握在 Android 中加载 Gif 动画的技巧和方法，为开发高质量的 Android 应用提供支持。
大树营养快线
37 2
Ant.Dream
|
2月前
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法，包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源，避免图片拉伸变形；并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外，还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
Ant.Dream
64 20
Android经典面试题之图片Bitmap怎么做优化
mrq4nk6ni2neg
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图：从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中，自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌，更是艺术与科技的完美结合。通过掌握自定义视图，开发者能够打破常规，创造出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战应用，一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者，这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密，将你的应用打造成一件艺术品吧！
mrq4nk6ni2neg
60 10
mrq4nk6ni2neg
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中，自定义视图控件是一种高级技巧，它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例，引导你了解如何在安卓项目中实现自定义视图控件，包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者，这篇文章都会为你提供有价值的见解和技巧。
mrq4nk6ni2neg
44 3