Android实现漂亮的波纹动画

Android实现漂亮的波纹动画

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

一、UI界面

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

<?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，声明类成员变量和实现构造函数初始化

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. 画笔由细变粗动画
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

@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.mzph.cn/pingmian/70973.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Datawhale 数学建模导论二 笔记5 多模数据与智能模型

Datawhale 数学建模导论二 笔记5 多模数据与智能模型

主要涉及到的知识点有&#xff1a; 数字图像处理与计算机视觉 计算语言学与自然语言处理 数字信号处理与智能感知 10.1 数字图像处理与计算机视觉 视觉信息是我们第一种非常规的数据模式&#xff0c;在Python当中可以使用opencv处理数字图像&#xff0c;并提取出视觉特征用…
阅读更多...
API网关相关知识点

API网关相关知识点

目录 API网关基础知识总结 | JavaGuide Spring Cloud Gateway常见问题总结 | JavaGuide API网关 | 小傅哥 bugstack 虫洞栈 美团: 百亿规模API网关服务Shepherd的设计与实现 vivo: 微服务 API 网关架构实践 唯品会: 高吞吐消息网关的探索与思考 API网关基础知识总结 | J…
阅读更多...
nacos数据同步原理能说下吗？

nacos数据同步原理能说下吗？

Nacos 是一个用于服务发现、配置管理和服务治理的平台&#xff0c;其数据同步原理涉及到多个方面&#xff0c;包括服务注册与发现的数据同步以及配置数据的同步。以下是详细介绍&#xff1a; 服务注册与发现的数据同步 服务提供者注册&#xff1a;当服务提供者启动时&#xff…
阅读更多...
python-leetcode-下一个排列

python-leetcode-下一个排列

31. 下一个排列 - 力扣&#xff08;LeetCode&#xff09; class Solution:def nextPermutation(self, nums: List[int]) -> None:"""Do not return anything, modify nums in-place instead."""# Step 1: Find the first decreasing element …
阅读更多...
tomcat转东方通

tomcat转东方通

目录 前言登录服务器tomcat部署应用东方通部署东方通配置 启动参数配置-JVM参数启动参数配置-服务器参数WEB容器配置-虚拟主机管理WEB容器配置-HTTP通道管理 东方通密码重置 前言 本文简要Linux环境介绍tomcat部署的服务&#xff0c;换成中间件是东方通之后如何部署。 登录…
阅读更多...
leetcode_动态规划/递归 279**. 完全平方数

leetcode_动态规划/递归 279**. 完全平方数

279. 完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 …
阅读更多...
算法之领域算法

算法之领域算法

领域算法 ♥一些领域算法知识体系♥ | Java 全栈知识体系
阅读更多...
Jsmoke-一款强大的js检测工具，浏览器部署即用,使用方便且高效

Jsmoke-一款强大的js检测工具，浏览器部署即用,使用方便且高效

目录标题 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt使用方式界面预览功能特性支持的敏感信息类型 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt ​ 该插件由 Yn8rt师傅 开发&#xff0c;插件可以理解为主动版的hae和apifinder&#xff0c;因为其中的大多数规则我都引用了&a…
阅读更多...
DeepSeek赋能大模型内容安全，网易易盾AIGC内容风控解决方案三大升级

DeepSeek赋能大模型内容安全，网易易盾AIGC内容风控解决方案三大升级

在近两年由AI引发的生产力革命的背后&#xff0c;一场关乎数字世界秩序的攻防战正在上演&#xff1a;AI生成的深度伪造视频导致企业品牌声誉损失日均超千万&#xff0c;批量生成的侵权内容使版权纠纷量与日俱增&#xff0c;黑灰产利用AI技术持续发起欺诈攻击。 与此同时&#…
阅读更多...
【动手学深度学习】基于Python动手实现线性神经网络

【动手学深度学习】基于Python动手实现线性神经网络

深度学习入门&#xff1a;基于Python动手实现线性回归 1&#xff0c;走进深度学习2&#xff0c;配置说明3&#xff0c;线性神经网络4&#xff0c;线性回归从0开始实现4.1&#xff0c;导入相关库4.2&#xff0c;生成数据4.3&#xff0c;读取数据集4.4&#xff0c;初始化模型参数…
阅读更多...
VMware17下Ubuntu22.04设置本地共享文件夹

VMware17下Ubuntu22.04设置本地共享文件夹

VMware17下使用Ubuntu22.04设置共享文件夹 在日常的开发与学习中&#xff0c;我们常常需要在主机&#xff08;通常是Windows系统&#xff09;和虚拟机&#xff08;如Ubuntu 22.04&#xff09;之间进行文件交换。为了简化这一过程&#xff0c;VMware提供了共享文件夹的功能&…
阅读更多...
地铁站内导航系统：基于蓝牙Beacon与AR技术的动态路径规划技术深度剖析

地铁站内导航系统：基于蓝牙Beacon与AR技术的动态路径规划技术深度剖析

本文旨在分享一套地铁站内导航系统技术方案&#xff0c;通过蓝牙Beacon技术与AI算法的结合&#xff0c;解决传统导航定位不准确、路径规划不合理等问题&#xff0c;提升乘客出行体验&#xff0c;同时为地铁运营商提供数据支持与增值服务。 如需获取校地铁站内智能导航系统方案文…
阅读更多...
小程序中头像昵称填写

小程序中头像昵称填写

官方文档 参考小程序用户头像昵称获取规则调整公告 新的小程序版本不能通过wx.getUserProfile和wx.getUserInfo获取用户信息 <van-field label"{{Avatar}}" label-class"field-label" right-icon-class"field-right-icon-class"input-class&…
阅读更多...
RAG 阿里云

RAG 阿里云

RAG-阿里云Spring AI Alibaba官网官网 RAG-阿里云Spring AI Alibaba官网官网 AI应用跑起来&#xff0c;取消一下航班的操作666
阅读更多...
猿大师播放器：HTML内嵌VLC播放RTSP视频流，无需转码，300ms级延迟，碾压服务器转码方案

猿大师播放器：HTML内嵌VLC播放RTSP视频流，无需转码，300ms级延迟，碾压服务器转码方案

在智慧城市、工业安全、应急指挥等关键领域&#xff0c;实时视频监控已成为守护生命与财产的核心防线‌。然而&#xff0c;行业普遍面临三大矛盾&#xff1a; ‌实时性要求与高延迟矛盾‌&#xff1a;火灾蔓延速度达1米/秒&#xff0c;化工泄漏扩散仅需数秒&#xff0c;传统方…
阅读更多...
MySQL--聚集索引、辅助索引、回表查询和覆盖索引的原理

MySQL--聚集索引、辅助索引、回表查询和覆盖索引的原理

在MySQL中&#xff0c;索引是提高查询性能的核心工具。理解聚集索引、辅助索引、回表查询和覆盖索引的原理&#xff0c;对于优化数据性能至关重要。以下是对这些概念的详细解释以及优化方法。 一、聚集索引&#xff08;Clustered Index&#xff09; 聚集索引决定了表中数据的…
阅读更多...
【Java项目】基于Spring Boot的网上商城购物系统

【Java项目】基于Spring Boot的网上商城购物系统

【Java项目】基于Spring Boot的网上商城购物系统 技术简介&#xff1a;采用Java技术、Spring Boot框架、MySQL数据库等实现。 系统简介&#xff1a;系统实现管理员&#xff1a;首页、个人中心、用户管理、商品分类管理、商品信息管理、订单评价管理、系统管理、订单管理&#x…
阅读更多...
hbase笔记总结1

hbase笔记总结1

hbase是nosql的一种&#xff0c;非关系型数据库&#xff0c;not only sql&#xff0c;可处理大规模、高并发的数据&#xff0c;是web2.0以后的产物hbase的扩展性和灵活性更好&#xff0c;而且筛选能力相较于MySQL更优nosql的四大特点&#xff1a; 灵活的数据模型 &#xff08;1…
阅读更多...
谷云科技iPaaS×DeepSeek：构建企业智能集成的核心底座

谷云科技iPaaS×DeepSeek：构建企业智能集成的核心底座

2025年&#xff0c;DeepSeek大模型的爆发式普及&#xff0c;正引领软件行业实现 “智能跃迁”。从代码生成到系统集成&#xff0c;从企业级应用到消费级产品&#xff0c;自然语言交互能力已成为新一代软件的核心竞争力。据行业分析&#xff0c;超60%的软件企业已启动大模型适配…
阅读更多...
学习笔记-大模型GGUF是什么？

学习笔记-大模型GGUF是什么？

GGUF&#xff08;GPT-Generated Unified Format&#xff09;是一种专为大模型设计的二进制文件存储格式&#xff0c;旨在高效存储和加载模型权重及元数据&#xff1a; 一、GGUF格式的核心特性与意义 高效加载与资源优化 GGUF通过二进制编码、内存映射&#xff08;mmap&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023