Android App开发中集合动画和属性动画的讲解及实战演示(附源码 简单易懂 可直接使用)

简介: Android App开发中集合动画和属性动画的讲解及实战演示(附源码 简单易懂 可直接使用)

需要图片集和源码请点赞关注收藏后评论区留言~~~

一、集合动画

有时一个动画效果会加入多种动画,比如一个旋转一边缩放,这时便会用到集合动画AnimationSet把几个补间动画组装起来,实现让某视图同时呈现多种动画的效果

因为集合动画和补间动画一样继承自Animation类,所以拥有补间动画的基本方法,集合动画不像一般补间动画那样提供构造方法,而是通过addAnimation方法把别的补间动画加入本集合动画中

效果如下 它可以把补间动画中多种情况得以演示效果合成一个动画,因此也成为集合动画

集合动画

代码如下

Java类

package com.example.animation;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
public class AnimSetActivity extends AppCompatActivity implements AnimationListener {
    private ImageView iv_anim_set; // 声明一个图像视图对象
    private AnimationSet setAnim; // 声明一个集合动画对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anim_set);
        iv_anim_set = findViewById(R.id.iv_anim_set);
        iv_anim_set.setOnClickListener(v -> startAnim());
        initAnimation(); // 初始化集合动画
    }
    // 初始化集合动画
    private void initAnimation() {
        // 创建一个灰度动画
        Animation alphaAnim = new AlphaAnimation(1.0f, 0.1f);
        alphaAnim.setDuration(3000); // 设置动画的播放时长
        alphaAnim.setFillAfter(true); // 设置维持结束画面
        // 创建一个平移动画
        Animation translateAnim = new TranslateAnimation(1.0f, -200f, 1.0f, 1.0f);
        translateAnim.setDuration(3000); // 设置动画的播放时长
        translateAnim.setFillAfter(true); // 设置维持结束画面
        // 创建一个缩放动画
        Animation scaleAnim = new ScaleAnimation(1.0f, 1.0f, 1.0f, 0.5f);
        scaleAnim.setDuration(3000); // 设置动画的播放时长
        scaleAnim.setFillAfter(true); // 设置维持结束画面
        // 创建一个旋转动画
        Animation rotateAnim = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnim.setDuration(3000); // 设置动画的播放时长
        rotateAnim.setFillAfter(true); // 设置维持结束画面
        // 创建一个集合动画
        setAnim = new AnimationSet(true);
        // 下面在代码中添加集合动画
        setAnim.addAnimation(alphaAnim); // 给集合动画添加灰度动画
        setAnim.addAnimation(translateAnim); // 给集合动画添加平移动画
        setAnim.addAnimation(scaleAnim); // 给集合动画添加缩放动画
        setAnim.addAnimation(rotateAnim); // 给集合动画添加旋转动画
        setAnim.setFillAfter(true); // 设置维持结束画面
        startAnim(); // 开始播放集合动画
    }
    // 开始播放集合动画
    private void startAnim() {
        iv_anim_set.startAnimation(setAnim); // 开始播放动画
        setAnim.setAnimationListener(this); // 设置动画事件监听器
    }
    // 在补间动画开始播放时触发
    @Override
    public void onAnimationStart(Animation animation) {}
    // 在补间动画结束播放时触发
    @Override
    public void onAnimationEnd(Animation animation) {
        if (animation.equals(setAnim)) { // 原集合动画播放完毕,接着播放倒过来的集合动画
            // 创建一个灰度动画
            Animation alphaAnim2 = new AlphaAnimation(0.1f, 1.0f);
            alphaAnim2.setDuration(3000); // 设置动画的播放时长
            alphaAnim2.setFillAfter(true); // 设置维持结束画面
            // 创建一个平移动画
            Animation translateAnim2 = new TranslateAnimation(-200f, 1.0f, 1.0f, 1.0f);
            translateAnim2.setDuration(3000); // 设置动画的播放时长
            translateAnim2.setFillAfter(true); // 设置维持结束画面
            // 创建一个缩放动画
            Animation scaleAnim2 = new ScaleAnimation(1.0f, 1.0f, 0.5f, 1.0f);
            scaleAnim2.setDuration(3000); // 设置动画的播放时长
            scaleAnim2.setFillAfter(true); // 设置维持结束画面
            // 创建一个旋转动画
            Animation rotateAnim2 = new RotateAnimation(0f, -360f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotateAnim2.setDuration(3000); // 设置动画的播放时长
            rotateAnim2.setFillAfter(true); // 设置维持结束画面
            // 创建一个集合动画
            AnimationSet setAnim2 = new AnimationSet(true);
            setAnim2.addAnimation(alphaAnim2); // 给集合动画添加灰度动画
            setAnim2.addAnimation(translateAnim2); // 给集合动画添加平移动画
            setAnim2.addAnimation(scaleAnim2); // 给集合动画添加缩放动画
            setAnim2.addAnimation(rotateAnim2); // 给集合动画添加旋转动画
            setAnim2.setFillAfter(true); // 设置维持结束画面
            iv_anim_set.startAnimation(setAnim2); // 开始播放动画
        }
    }
    // 在补间动画重复播放时触发
    @Override
    public void onAnimationRepeat(Animation animation) {}
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/iv_anim_set"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/oval" />
</LinearLayout>

二、属性动画

属性动画突破了补间动画的局限,允许视图的所有属性都能实现渐变的动画效果,例如背景颜色,文字颜色,文字大小等等。只要设定某属性的起始值与终止值,渐变的持续时间,属性动画就可以实现渐变效果。 下面是ObjectAnimator的常用方法

ofInt 定义整形属性的属性动画

ofFloat 定义浮点型属性的属性动画

ofArgb 定义颜色属性的属性动画

ofObject 定义对象属性的属性动画

以上四个of方法的第一个参数为宿主视图对象,第二个参数为需要变化的属性名称,从第三个参数开始以及后面的参数为属性变化的各个状态值。

下面是用属性动画分别实现透明度,平移,缩放,旋转等变换操作的效果

可以在下拉框选项中选择自己想要的动画类型

裁剪动画

 

代码如下

Java类

package com.example.animation;
import android.animation.RectEvaluator;
import android.animation.ObjectAnimator;
import android.graphics.Rect;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.AdapterView.OnItemSelectedListener;
public class ObjectAnimActivity extends AppCompatActivity {
    private ImageView iv_object_anim; // 声明一个图像视图对象
    private ObjectAnimator alphaAnim, translateAnim, scaleAnim, rotateAnim; // 声明四个属性动画对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_object_anim);
        iv_object_anim = findViewById(R.id.iv_object_anim);
        initObjectAnim(); // 初始化属性动画
        initObjectSpinner(); // 初始化动画类型下拉框
    }
    // 初始化属性动画
    private void initObjectAnim() {
        // 构造一个在透明度上变化的属性动画
        alphaAnim = ObjectAnimator.ofFloat(iv_object_anim, "alpha", 1f, 0.1f, 1f);
        // 构造一个在横轴上平移的属性动画
        translateAnim = ObjectAnimator.ofFloat(iv_object_anim, "translationX", 0f, -200f, 0f, 200f, 0f);
        // 构造一个在纵轴上缩放的属性动画
        scaleAnim = ObjectAnimator.ofFloat(iv_object_anim, "scaleY", 1f, 0.5f, 1f);
        // 构造一个围绕中心点旋转的属性动画
        rotateAnim = ObjectAnimator.ofFloat(iv_object_anim, "rotation", 0f, 360f, 0f);
    }
    // 初始化动画类型下拉框
    private void initObjectSpinner() {
        ArrayAdapter<String> objectAdapter = new ArrayAdapter<>(this,
                R.layout.item_select, objectArray);
        Spinner sp_object = findViewById(R.id.sp_object);
        sp_object.setPrompt("请选择属性动画类型");
        sp_object.setAdapter(objectAdapter);
        sp_object.setOnItemSelectedListener(new ObjectSelectedListener());
        sp_object.setSelection(0);
    }
    private String[] objectArray = {"灰度动画", "平移动画", "缩放动画", "旋转动画", "裁剪动画"};
    class ObjectSelectedListener implements OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            playObjectAnim(arg2); // 播放指定类型的属性动画
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
    // 播放指定类型的属性动画
    private void playObjectAnim(int type) {
        ObjectAnimator anim = null;
        if (type == 0) { // 灰度动画
            anim = alphaAnim;
        } else if (type == 1) { // 平移动画
            anim = translateAnim;
        } else if (type == 2) { // 缩放动画
            anim = scaleAnim;
        } else if (type == 3) { // 旋转动画
            anim = rotateAnim;
        } else if (type == 4) { // 裁剪动画
            int width = iv_object_anim.getWidth();
            int height = iv_object_anim.getHeight();
            // 构造一个从四周向中间裁剪的属性动画
            ObjectAnimator clipAnim = ObjectAnimator.ofObject(iv_object_anim, "clipBounds",
                    new RectEvaluator(), new Rect(0, 0, width, height),
                    new Rect(width / 3, height / 3, width / 3 * 2, height / 3 * 2),
                    new Rect(0, 0, width, height));
            anim = clipAnim;
        }
        if (anim != null) {
            anim.setDuration(3000); // 设置动画的播放时长
            anim.start(); // 开始播放属性动画
        }
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:text="属性动画类型:"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_object"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_object_anim"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/oval" />
</LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

相关文章
|
10月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
6月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1130 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
885 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
10月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
10月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
6月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1026 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
11月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
226 0
|
6月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
332 0

热门文章

最新文章