Android 两种方式实现类似水波扩散效果

embedded/2024/10/31 3:14:48/

两种方式实现类似水波扩散效果,(相比较而言,自定义view的效果更好点,动画实现起来更方便点。)

  1. 自定义view实现
  2. 动画实现

自定义view实现

思路分析:通过canvas画圆,每次改变圆半径和透明度,当半径达到一定程度,再次从中心开始绘圆,达到不同层级的效果,通过不断绘制达到view扩散效果

private Paint centerPaint; //中心圆paint
private int radius = 100; //中心圆半径
private Paint spreadPaint; //扩散圆paint
private float centerX;//圆心x
private float centerY;//圆心y
private int distance = 5; //每次圆递增间距
private int maxRadius = 80; //最大圆半径
private int delayMilliseconds = 33;//扩散延迟间隔,越大扩散越慢
private List<Integer> spreadRadius = new ArrayList<>();//扩散圆层级数,元素为扩散的距离
private List<Integer> alphas = new ArrayList<>();//对应每层圆的透明度

style文件里自定义属性

<declare-styleable name="SpreadView"><!--中心圆颜色--><attr name="spread_center_color" format="color" /><!--中心圆半径--><attr name="spread_radius" format="integer" /><!--扩散圆颜色--><attr name="spread_spread_color" format="color" /><!--扩散间距--><attr name="spread_distance" format="integer" /><!--扩散最大半径--><attr name="spread_max_radius" format="integer" /><!--扩散延迟间隔--><attr name="spread_delay_milliseconds" format="integer" />
</declare-styleable>

初始化

public SpreadView(Context context) {this(context, null, 0);
}public SpreadView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);
}public SpreadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpreadView, defStyleAttr, 0);radius = a.getInt(R.styleable.SpreadView_spread_radius, radius);maxRadius = a.getInt(R.styleable.SpreadView_spread_max_radius, maxRadius);int centerColor = a.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, R.color.colorAccent));int spreadColor = a.getColor(R.styleable.SpreadView_spread_spread_color, ContextCompat.getColor(context, R.color.colorAccent));distance = a.getInt(R.styleable.SpreadView_spread_distance, distance);a.recycle();centerPaint = new Paint();centerPaint.setColor(centerColor);centerPaint.setAntiAlias(true);//最开始不透明且扩散距离为0alphas.add(255);spreadRadius.add(0);spreadPaint = new Paint();spreadPaint.setAntiAlias(true);spreadPaint.setAlpha(255);spreadPaint.setColor(spreadColor);
}

确定圆心位置

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);//圆心位置centerX = w / 2;centerY = h / 2;
}

自定义view的绘制

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);for (int i = 0; i < spreadRadius.size(); i++) {int alpha = alphas.get(i);spreadPaint.setAlpha(alpha);int width = spreadRadius.get(i);//绘制扩散的圆canvas.drawCircle(centerX, centerY, radius + width, spreadPaint);//每次扩散圆半径递增,圆透明度递减if (alpha > 0 && width < 300) {alpha = alpha - distance > 0 ? alpha - distance : 1;alphas.set(i, alpha);spreadRadius.set(i, width + distance);}}//当最外层扩散圆半径达到最大半径时添加新扩散圆if (spreadRadius.get(spreadRadius.size() - 1) > maxRadius) {spreadRadius.add(0);alphas.add(255);}//超过8个扩散圆,删除最先绘制的圆,即最外层的圆if (spreadRadius.size() >= 8) {alphas.remove(0);spreadRadius.remove(0);}//中间的圆canvas.drawCircle(centerX, centerY, radius, centerPaint);//TODO 可以在中间圆绘制文字或者图片//延迟更新,达到扩散视觉差效果postInvalidateDelayed(delayMilliseconds);
}

xml样式

<com.airsaid.diffuseview.widget.SpreadViewandroid:id="@+id/spreadView"android:layout_width="match_parent"android:layout_height="wrap_content"app:spread_center_color="@color/colorAccent"app:spread_delay_milliseconds="35"app:spread_distance="5"app:spread_max_radius="90"app:spread_radius="100"app:spread_spread_color="@color/colorAccent" />

中心圆处可以自定义写文字,画图片等等...

动画实现

思路分析:通过动画实现,imageView不停做动画缩放+渐变
最中心的imageView保持不变
中间一层imageView从原始放大到1.4倍,同时从不透明变为半透明
最外层的imageView从1.4倍放大到1.8倍,同时从半透明变为全透明
利用shape画一个圆,作为动画基础视图

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="65dp"/><solid android:color="@color/colorAccent"/>
</shape>

布局视图

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><!--中心imageView--><ImageViewandroid:id="@+id/iv_wave"android:layout_width="130dp"android:layout_height="130dp"android:layout_gravity="center"android:background="@drawable/shape_circle" /><!--中间的imageView--><ImageViewandroid:id="@+id/iv_wave_1"android:layout_width="130dp"android:layout_height="130dp"android:layout_gravity="center"android:background="@drawable/shape_circle" /><!--最外层imageView--><ImageViewandroid:id="@+id/iv_wave_2"android:layout_width="130dp"android:layout_height="130dp"android:layout_gravity="center"android:background="@drawable/shape_circle" />
</FrameLayout>

中间imageView的动画

private void setAnim1() {AnimationSet as = new AnimationSet(true);//缩放动画,以中心从原始放大到1.4倍ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.4f, 1.0f, 1.4f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f);//渐变动画AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);scaleAnimation.setDuration(800);scaleAnimation.setRepeatCount(Animation.INFINITE);alphaAnimation.setRepeatCount(Animation.INFINITE);as.setDuration(800);as.addAnimation(scaleAnimation);as.addAnimation(alphaAnimation);iv1.startAnimation(as);
}

最外层imageView的动画

private void setAnim2() {AnimationSet as = new AnimationSet(true);//缩放动画,以中心从1.4倍放大到1.8倍ScaleAnimation scaleAnimation = new ScaleAnimation(1.4f, 1.8f, 1.4f, 1.8f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f);//渐变动画AlphaAnimation alphaAnimation = new AlphaAnimation(0.5f, 0.1f);scaleAnimation.setDuration(800);scaleAnimation.setRepeatCount(Animation.INFINITE);alphaAnimation.setRepeatCount(Animation.INFINITE);as.setDuration(800);as.addAnimation(scaleAnimation);as.addAnimation(alphaAnimation);iv2.startAnimation(as);
}

相比较而言,自定义view的效果更好点,动画实现起来更方便点。


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

相关文章

Scala练习50题(基础入门)

以下是 50 道 Scala 编程练习题&#xff1a; 一、基础语法 一、基础语法&#xff08;1-10 题&#xff09;1. 定义一个变量存储你的名字&#xff0c;并打印出来。 2. 计算两个整数的和并打印结果。 3. 判断一个整数是奇数还是偶数。 4. 打印 1 到 10 的整数。 5. 计算给定整数…

C# 结构型设计模式----装饰器模式

1、简介 简要说明就是动态地给一个对象添加一些额外的职责。适用于需要扩展一个类的功能&#xff0c;或给一个类添加多个变化的情况。 装饰器&#xff0c;顾名思义就是在原有基础上添加一些功能。 装饰器模式中各个角色有&#xff1a; 抽象构件&#xff08;Component&#x…

牛客网刷题(3)(Java的几种常用包)

目录 一、牛客网案例题目。 二、Java常用包的总结。 <1>JAVA常用包&#xff08;图片&#xff09;。 <2>java.lang包。 <3>java.util包。 &#xff08;1&#xff09;集合框架。 1、Collection接口。 2、List接口。 3、Set接口。 4、Queue接口。 5、Map接口。 …

软工毕设开题建议

文章目录 &#x1f6a9; 1 前言1.1 选题注意事项1.1.1 难度怎么把控&#xff1f;1.1.2 题目名称怎么取&#xff1f; 1.2 开题选题推荐1.2.1 起因1.2.2 核心- 如何避坑(重中之重)1.2.3 怎么办呢&#xff1f; &#x1f6a9;2 选题概览&#x1f6a9; 3 项目概览题目1 : 深度学习社…

结合Intel RealSense深度相机和OpenCV来实现语义SLAM系统

结合Intel RealSense深度相机和OpenCV来实现语义SLAM系统是一个非常强大的组合。以下是一个详细的步骤指南&#xff0c;帮助你构建这样一个系统。 硬件准备 Intel RealSense深度相机&#xff1a;例如D415、D435或L515。计算平台&#xff1a;一台具有足够计算能力的计算机&…

JavaEE进阶----18.<Mybatis补充($和#的区别+数据库连接池)>

详解了 1.$和#的区别 2.数据库连接池。 3.简单了解MySQL企业开发规范 一、Mybatis面试题&#xff1a;$和#的区别是什么&#xff1f; MyBatis 参数赋值有两种方式&#xff0c;咱们前面使用了 #{} 进行赋值&#xff0c;接下来我们看下二者的区别。 1.1 #是预编译SQL&#xff0c;$…

mixin的基本用法

目录 一、功能目的二、在Vue项目中&#xff0c;mixin&#xff08;混入&#xff09;有以下几种常见用法&#xff1a;1、代码复用&#xff08;1&#xff09;基础复用示例 2、选项合并&#xff08;1&#xff09;生命周期钩子合并&#xff08;2&#xff09;其他选项合并 3、全局mix…

2022NOIP比赛总结

种花 1.本题是一道前缀和优化加上枚举的问题。先考虑 C 因为 F 是 C 下边随便加一个点&#xff0c;所以只要求出 C 就求出了 F 。 注意到&#xff0c;并没有要求上下行一样&#xff0c;唯一的要求是 C 的两个横要隔一行&#xff0c;这就是问题的突破点&#xff0c;这题很明显…