Android实现漂亮的波纹动画

embedded/2025/3/1 11:01:09/

Android实现漂亮的波纹动画

本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果（波纹大小变化、画笔透明度变化、画笔粗细变化）

一、UI界面

界面主要分为三部分
第一部分：输入框，根据输入x轴、Y轴、Z轴倾斜角度绘制波纹动画立体效果
第二部分：点击按钮PLAY：开始绘制动画；点击按钮STOP：停止绘制动画
第三部分：绘制波纹动画的自定义view
在这里插入图片描述
activity_main.xml实现如下：

java"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="16dp"android:gravity="center"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_marginBottom="8dp"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"android:gravity="center_horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="X轴倾斜" /><EditTextandroid:id="@+id/editText_X"android:layout_width="match_parent"android:layout_height="wrap_content"android:inputType="number"android:text="0"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"android:gravity="center_horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Y轴倾斜" /><EditTextandroid:id="@+id/editText_Y"android:layout_width="match_parent"android:layout_height="wrap_content"android:inputType="number"android:text="0"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"android:gravity="center_horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Z轴倾斜" /><EditTextandroid:id="@+id/editText_Z"android:layout_width="match_parent"android:layout_height="wrap_content"android:inputType="number"android:text="0"/></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center"android:paddingTop="16dp"><Buttonandroid:id="@+id/playButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Play"android:layout_marginEnd="8dp"/><Buttonandroid:id="@+id/stopButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Stop"android:layout_marginEnd="8dp"/></LinearLayout><FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:layout_gravity="center"><!-- WaveView --><com.example.waveanimationbysingleview.animation.WaveViewandroid:id="@+id/wave_view"android:layout_width="match_parent"android:layout_height="606dp"android:layout_gravity="center" /></FrameLayout></LinearLayout>

二、自定义view实现

新建一个WaveView类继承自View，声明类成员变量和实现构造函数初始化

java">public class WaveView extends View{private RippleAnimationInfo mRippleInfo;//动画属性类，包括最大、最小半径，光圈等private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);private float centerX, centerY; //绘制画布中心点private float[] mRadiusArray;  // 存储当前绘制每圈光波的半径private float[] mAlphaArray;   //存储当前绘制每圈光波的透明度private float[] mStrokenArray; //存储当前绘制每圈光波的画笔宽度private final Camera mCamera = new Camera();//相机private final Matrix mMatrix = new Matrix();//矩阵private final RectF mRectF = new RectF();private Boolean mIsDrawing = false;//是否绘制标志位private Bitmap mLogoBitmap;//中心点表情😝logoprivate AnimatorSet mAnimatorSet = new AnimatorSet();//多动画组合类private List<Animator> mAnimatorList = new ArrayList<>();//存储动画列表public WaveView(Context context) {super(context);init();}public WaveView(Context context, AttributeSet attrs) {super(context, attrs);init();}public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}

构造函数初始化

添加动画

  1. 圆圈等比变大动画
  2. 透明度渐变动画
  3. 画笔由细变粗动画
java">private void initAnimation() {int rippleDelay = mRippleInfo.durationTime/mRippleInfo.rippleCount;for (int i = 0; i < mRippleInfo.rippleCount; i++) {//动画1-半径变大final int index = i;ValueAnimator radiusAnimator = ValueAnimator.ofFloat(mRippleInfo.minRadius, mRippleInfo.maxRadius);radiusAnimator.setDuration(mRippleInfo.durationTime); // 动画持续时间radiusAnimator.setStartDelay(i * rippleDelay); // 延迟启动radiusAnimator.setRepeatCount(ValueAnimator.INFINITE);radiusAnimator.setRepeatMode(ValueAnimator.RESTART);radiusAnimator.addUpdateListener(animation -> {mRadiusArray[index] = (float) animation.getAnimatedValue();invalidate(); // 重绘视图});//动画2-画笔变粗ValueAnimator strokeAnimator = ObjectAnimator.ofFloat(mRippleInfo.minStrokenWidth, mRippleInfo.maxStrokenWidth);strokeAnimator.setDuration(mRippleInfo.durationTime); // 动画持续时间strokeAnimator.setStartDelay(i * rippleDelay); // 延迟启动strokeAnimator.setRepeatCount(ValueAnimator.INFINITE);strokeAnimator.setRepeatMode(ValueAnimator.RESTART);strokeAnimator.addUpdateListener(animation -> {mStrokenArray[index] = (float) animation.getAnimatedValue();invalidate(); // 重绘视图});//动画3-颜色淡出ValueAnimator alphaAnimator = ObjectAnimator.ofFloat( 0.1f, 0.8f, 0.8f,0.4f, 0);alphaAnimator.setDuration(mRippleInfo.durationTime); // 动画持续时间alphaAnimator.setStartDelay(i * rippleDelay); // 延迟启动alphaAnimator.setRepeatCount(ValueAnimator.INFINITE);alphaAnimator.setRepeatMode(ValueAnimator.RESTART);alphaAnimator.addUpdateListener(animation -> {mAlphaArray[index] = (float) animation.getAnimatedValue();invalidate(); // 重绘视图});mAnimatorList.add(radiusAnimator);mAnimatorList.add(strokeAnimator);mAnimatorList.add(alphaAnimator);}mAnimatorSet.playTogether(mAnimatorList);}

应用矩阵变换

重写ondraw

java">@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (!mIsDrawing){return;}canvas.save();// 计算中心点centerX = getWidth() / 2.0f;centerY = getHeight() / 2.0f;canvas.concat(mMatrix);// 将矩阵应用到画布上//绘制多圈波纹for (int i = 0; i < mRippleInfo.rippleCount; i++) {if (mRadiusArray[i] > 0) {paint.setStrokeWidth(mStrokenArray[i]);paint.setAlpha((int)(255 * mAlphaArray[i]));canvas.drawCircle(centerX, centerY,mRadiusArray[i],paint);}}// 中心点绘制 logocanvas.drawBitmap(mLogoBitmap, (getWidth()- mRippleInfo.minRadius)/2, (getHeight()- mRippleInfo.minRadius)/2, null);canvas.restore();}

二、二维波纹动画

waveAnimation_2D

三、三维波纹动画

waveAnimation_3D


http://www.ppmy.cn/embedded/169036.html

相关文章

【MySQL】数据库开发技术：内外连接与表的索引穿透深度解析

【MySQL】数据库开发技术：内外连接与表的索引穿透深度解析

**前言:**本节内容主要讲解表的内连和外连以及索引的一部分。 注意&#xff1a; 索引是很重要的知识点。务必学习&#xff01;&#xff01;本节将会主要谈一谈什么是索引&#xff0c;如何理解索引。 以及怎么理解MySQL与磁盘的关系。 下面友友们开始学习吧&#xff01; ps&…
阅读更多...
【北京迅为】iTOP-RK3568OpenHarmony系统南向驱动开发-第2章 内核HDF驱动框架架构

【北京迅为】iTOP-RK3568OpenHarmony系统南向驱动开发-第2章 内核HDF驱动框架架构

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
自动化测试无法启动(java.net.SocketException)

自动化测试无法启动(java.net.SocketException)

在运行测试代码,对浏览器进行自动化操作时,遇到了以下问题,添加依赖,编写了测试代码,但是程序无法运行 这个有两种原因(我使用的是谷歌浏览器): 网络问题: 因为需要从GitHub上下载对应包,所以有时候可能会出现网络问题,这个时候可以打开VPN之后,重新对程序进行启动 浏览器版本…
阅读更多...
Linux系统软件管理

Linux系统软件管理

systemctl 控制软件启动和关闭 Linux系统很多软件支持使用systemctl命令控制&#xff1a;启动&#xff0c;停止&#xff0c;开启自启。 能被systemctl管理的软件&#xff0c;一般被称为&#xff1a;服务。 语法&#xff1a;systemctl start|stop|status|enable|disable 服务名…
阅读更多...
FFmpeg av_read_frame 和iOS系统提供的 AVAudioRecorder 实现音频录制的区别

FFmpeg av_read_frame 和iOS系统提供的 AVAudioRecorder 实现音频录制的区别

1. 第一种方式：使用 FFmpeg 的 av_read_frame 特点 底层实现：基于 FFmpeg，这是一个强大的多媒体处理库，直接操作音频流。灵活性：非常灵活，可以处理多种音频格式、编解码器和输入设备。复杂性：需要手动管理音频流、数据包（AVPacket）、内存释放等，代码复杂度较高。跨平…
阅读更多...
ChatGPT Deep Research：重塑智能研究的未来边界

ChatGPT Deep Research：重塑智能研究的未来边界

目录 **ChatGPT Deep Research：重塑智能研究的未来边界****核心功能与技术突破****技术架构与性能优势****部署计划与用户价值****未来展望与挑战****结语**ChatGPT Deep Research：重塑智能研究的未来边界 引言 在人工智能技术飞速迭代的今天，OpenAI推出的Deep Research功能…
阅读更多...
C++11相较于C++98的新特性介绍:列表初始化，右值引用与移动语义

C++11相较于C++98的新特性介绍:列表初始化，右值引用与移动语义

一&#xff0c;列表初始化 1.1C98中传统的{} C98中一般数组和结构体可以使用{}进行初始化&#xff1a; struct Date {int _year;int _month;int _day; };int main() {int a[] { 1,2,3,4,5 };Date _date { 2025,2,27 };return 0; } 1.2C11中的{} C11以后想统一初始化方式&…
阅读更多...
Redis 深度解析

Redis 深度解析

Redis 是一个开源的、内存中的数据结构存储系统&#xff0c;它支持多种类型的数据结构&#xff0c;如字符串&#xff08;strings&#xff09;、哈希&#xff08;hashes&#xff09;、列表&#xff08;lists&#xff09;、集合&#xff08;sets&#xff09;、有序集合&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023