自定义view-波纹扩散（圆扩散）

前言

有时候涉及到等待状态，会用到波纹扩散，可能还会在扩散中间加一张图片，具体根据自己需要再修改。这里仅提供扩散设计思路。

实现步骤

1.先画一个圆，同时将圆的半径抽出一个变量（半径是可变的）
2.添加新圆的时机，采用数组遍历画多个圆
3.处理数组中数据

代码

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="WaveView"><attr name="wavecolor" format="color"/> <!--view颜色--><attr name="fillstyle" format="boolean"/><!--Paint的填充风格--><attr name="space" format="integer"/><!--每个圆形间距--><attr name="width" format="integer"/><!--扩散的宽度--></declare-styleable>
</resources>

这里提一下，name最好跟class名一致。

WaveView的实现

package partyhistorymuseum.lixiaoqian.com.custom_1;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;import java.util.ArrayList;
import java.util.List;/*** Description :水波纹Imageview* 步骤:拆分式实现* 1.先画个圆,通过属性动画扩散(根据圆的radius)* 2.通过255f/view宽*当前drawCiry 去设置透明度* 3.间隔多久(间距)在画一个圆* @author LiGuangjin* @date 2021/8/12*/
public class WaveView extends View {private static int centerColor;private Paint mPaint;// 透明度比例，按照扩散圆范围，递减private float alpharate;private boolean isStartAnim = false;// 圆心private float centerX, centerY;// 新增圆的节点，到达此点增加一个圆private int mSpace;// 圆扩散宽度private int mWidth;// 圆是否填充满private boolean isFillstyle;private List<Float> mCount= new ArrayList();private List<Integer> mAlphas = new ArrayList();public WaveView(Context context) {this(context, null);}public WaveView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);centerColor = typedArray.getColor(R.styleable.WaveView_wavecolor, Color.BLUE);mSpace = typedArray.getInteger(R.styleable.WaveView_space, 100);isFillstyle = typedArray.getBoolean(R.styleable.WaveView_fillstyle, true);mWidth = typedArray.getInteger(R.styleable.WaveView_width, 400);typedArray.recycle();init();}private void init() {mPaint = new Paint();mPaint.setAntiAlias(true);if (isFillstyle) {mPaint.setStyle(Paint.Style.FILL);} else {mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(3);}alpharate = 255f / mWidth; //注意这里 如果为int类型就会为0,除数中f一定要加,默认int ;mAlphas.add(255);mCount.add(0f);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);//圆心位置centerX = w / 2;centerY = h / 2;}@Overrideprotected void onDraw(Canvas canvas) {if (isStartAnim) {// 自身调用自身不停的刷新invalidate();}mPaint.setColor(centerColor);for (int i = 0; i < mCount.size(); i++) { //遍历圆数目Integer cuAlpha = mAlphas.get(i);mPaint.setAlpha(cuAlpha);Float aFloat = mCount.get(i);canvas.drawCircle(centerX, centerY, aFloat, mPaint); //画圆if (aFloat < mWidth) {  //扩散直径和透明度mAlphas.set(i, (int) (255 - alpharate * aFloat));mCount.set(i, aFloat + 1);}//Log.d("WaveWiew", "onDraw: "+cuAlpha+" "+aFloat);}// 始终保持仅有五个圆扩散if (mCount.size() >= 8) {mAlphas.remove(0);mCount.remove(0);}// 如果圆到达此点，增加一个圆if (mCount.get(mCount.size() - 1) == mSpace) {mAlphas.add(255);mCount.add(0f);}}public void startAnim() {isStartAnim = true;invalidate();}public void pauseAnim() {isStartAnim = false;}public boolean isAniming(){return isStartAnim;}
}

alpharate的值是float类型的，如果采用int类型在mWidth大于255的时候永远都是0，int类型对于余数都是直接舍去取整。
对于if (isStartAnim) { invalidate();}代码建议放在onDraw最前面，Why？考虑到切换activity要立马暂停扩散动画，如果不这样，会有延迟，造成视觉上的卡顿。
在onDraw中最好不要new对象，请都放在构造函数中初始化。

xml布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:zhibo="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.custom_1.MainActivity"><com.custom_1.WaveViewandroid:id="@+id/waveView"android:layout_width="400dp"android:layout_height="400dp"zhibo:wavecolor="@color/colorPrimary"zhibo:space="100"zhibo:width="400"zhibo:fillstyle="false"android:layout_centerInParent="true" />
</RelativeLayout>

自定义view-波纹扩散（圆扩散）相关推荐

android覆盖扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于多个元素.非页 ...
android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图实现思路这个效果实现起来并不难,重要的是思路此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化根据上面的样式,可以看出此View需要满足以下变化圆圈从中心可循环向外扩散 ...
android 水波纹扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于多个元素.非页 ...
Android Canvas进阶之自定义View实现Splash的旋转、扩散聚合、水波纹特效
先上效果图动画可以分割为3阶段,第一阶段是6个小圆的旋转,第二阶段是6个小圆的扩散和收缩,第三部分是水波纹特效,动画的实现也是按照这三个阶段进行实现的. 1.初始化自定义FlashView继承Vi ...
一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
android圆形波纹按钮,android自定义View——圆形波纹扫描效果
蓝牙项目,考虑到后面可能会用到这个扫描的效果,所以参照大神写好的控件,增加了自己需要使用的接口.也顺便巩固一下自定义view中各种零碎的知识点. 需要的效果图先放一个效果图,点击中心图片开始动画,再 ...
Android自定义View(四)——仿Android5.0波纹效果
项目源码比较简单,直接看帖的代码就可以了. 说实话,我是真没有去看RippleView的源码,只是从表面看到它的效果,所以产生了一点思路,所以功能很有局限性,而且用起来也比较复杂,大家且看且喷就好^_ ...
自定义View之网易云音乐听歌识曲水波纹动画
先上效果图点击中间的按钮后,像外发散水波纹,再次点击水波纹消失. 实现原理当点击按钮后,我们隔一段时间执行一个RippleCircleView的动画,动画包括扩大和透明度,通过PropertyVa ...
android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标，还你一个水波纹进度球...
前言我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...

自定义view-波纹扩散（圆扩散）

前言

实现步骤

代码

自定义view-波纹扩散（圆扩散）相关推荐

最新文章

热门文章