Android自定义水波纹动画Layout

2024-03-27 01:18

本文主要是介绍Android自定义水波纹动画Layout,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Android自定义水波纹动画Layout

源码是双11的时候就写好了,但是我觉得当天发不太好,所以推迟了几天,没想到过了双11女友就变成了前女友,桑心。唉不说了,来看看代码吧。

展示效果

Hi前辈

话不多说,我们先来看看效果:

Hi前辈搜索预览

这一张是《Hi前辈》的搜索预览图,你可以在这里下载这个APP查看更多效果:http://www.wandoujia.com/apps/com.superlity.hiqianbei

LSearchView

LSearchView

这是一个MD风格的搜索框,集成了ripple动画以及search时的loading,使用很简单,如果你也需要这样的搜索控件不妨来试试:https://github.com/onlynight/LSearchView

RippleEverywhere

女友的照片:

Ripple Demo

女友的照片:

Ripple Principle

这是一个水波纹动画支持库,由于使用暂时只支持Android4.0以上版本。https://github.com/onlynight/RippleEverywhere

实现原理

使用属性动画完成该动画的实现,由于android2.3以下已经不是主流机型,故只兼容4.0以上系统。

关于属性动画,如果还有童鞋不了解可以去看看hongyang大神的这篇文章:http://blog.csdn.net/lmj623565791/article/details/38067475。

在我看来属性动画实际上就类似于定时器,所谓定时器就是独立在主线程之外的另外一个用于计时的线程,每当到达你设定时间的时候这个线程就会通知你;属性动画也不光是另外一个线程,他能够操作主线程UI元素属性就说明了它内部已经做了线程同步。

基本原理

我们先来看下关键代码:

@Override
protected void onDraw(Canvas canvas) {if (running) {// get canvas current statefinal int state = canvas.save();// add circle to path to crate ripple animation// attention: you must reset the path first,// otherwise the animation will run wrong way.ripplePath.reset();ripplePath.addCircle(centerX, centerY, radius, Path.Direction.CW);canvas.clipPath(ripplePath);// the {@link View#onDraw} method must be called before// {@link Canvas#restoreToCount}, or the change will not appear.super.onDraw(canvas);canvas.restoreToCount(state);return;}// in a normal condition, you should call the// super.onDraw the draw the normal situation.super.onDraw(canvas);
}
  • Canvas#save()和Canvas#restoreToCount()
    这个两个方法用于绘制状态的保存与恢复。绘制之前先保存上一次的状态;绘制完成后恢复前一次的状态;以此类推直到running成为false,中间的这个过程就是动画的过程。

  • Path#addCircle()和Canvas#clipPath()
    addCircle用于在path上绘制一个圈;clipPath绘制剪切后的path(只绘制path内的区域,其他区域不绘制)。

radiusAnimator = ObjectAnimator.ofFloat(this, "animValue", 0, 1);/*** This method will be called by {@link this#radiusAnimator}* reflection calls.** @param value animation current value*/
public void setAnimValue(float value) {this.radius = value * maxRadius;System.out.println("radius = " + this.radius);invalidate();
}

这一段是动画的动效关键,首先要有一个随着时间推移而变化的值,当每次这个值变化的时候我们需要跟新界面让view重新绘制调用onDraw方法,我们不能手动调用onDraw方法,系统给我们提供的invalidate会强制view重绘进而调用onDraw方法。

以上就是这个动画的全部关键原理了,下面我们来一份完整的源码:

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;/*** Created by lion on 2016/11/11.* <p>* RippleImageView use the {@link Path#addCircle} function* to draw the view when {@link RippleImageView#onDraw} called.* <p>* When you call {@link View#invalidate()} function,then the* {@link View#onDraw(Canvas)} will be called. In that way you* can use {@link Path#addCircle} to draw every frame, you will* see the ripple animation.*/public class RippleImageView extends ImageView {// view center xprivate int centerX = 0;// view center yprivate int centerY = 0;// ripple animation current radiusprivate float radius = 0;// the max radius that ripple animation needprivate float maxRadius = 0;// record the ripple animation is runningprivate boolean running = false;private ObjectAnimator radiusAnimator;private Path ripplePath;public RippleImageView(Context context) {super(context);init();}public RippleImageView(Context context, AttributeSet attrs) {super(context, attrs);init();}public RippleImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}@TargetApi(21)public RippleImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);init();}private void init() {ripplePath = new Path();// initial the animator, when animValue change,// radiusAnimator will call {@link this#setAnimValue} method.radiusAnimator = ObjectAnimator.ofFloat(this, "animValue", 0, 1);radiusAnimator.setDuration(1000);radiusAnimator.setInterpolator(new AccelerateDecelerateInterpolator());radiusAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animator) {running = true;}@Overridepublic void onAnimationEnd(Animator animator) {running = false;}@Overridepublic void onAnimationCancel(Animator animator) {}@Overridepublic void onAnimationRepeat(Animator animator) {}});}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);centerX = (right - left) / 2;centerY = (bottom - top) / 2;maxRadius = maxRadius(left, top, right, bottom);}/*** Calculate the max ripple animation radius.** @param left   view left* @param top    view top* @param right  view right* @param bottom view bottom* @return*/private float maxRadius(int left, int top, int right, int bottom) {return (float) Math.sqrt(Math.pow(right - left, 2) + Math.pow(bottom - top, 2) / 2);}/*** This method will be called by {@link this#radiusAnimator}* reflection calls.** @param value animation current value*/public void setAnimValue(float value) {this.radius = value * maxRadius;System.out.println("radius = " + this.radius);invalidate();}@Overrideprotected void onDraw(Canvas canvas) {if (running) {// get canvas current statefinal int state = canvas.save();// add circle to path to crate ripple animation// attention: you must reset the path first,// otherwise the animation will run wrong way.ripplePath.reset();ripplePath.addCircle(centerX, centerY, radius, Path.Direction.CW);canvas.clipPath(ripplePath);// the {@link View#onDraw} method must be called before// {@link Canvas#restoreToCount}, or the change will not appear.super.onDraw(canvas);canvas.restoreToCount(state);return;}// in a normal condition, you should call the// super.onDraw the draw the normal situation.super.onDraw(canvas);}/*** call the {@link Animator#start()} function to start the animation.*/public void startAnimation() {if (radiusAnimator.isRunning()) {radiusAnimator.cancel();}radiusAnimator.start();}
}

这篇关于Android自定义水波纹动画Layout的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/850487

相关文章

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

Android协程高级用法大全

《Android协程高级用法大全》这篇文章给大家介绍Android协程高级用法大全,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起学习吧... 目录1️⃣ 协程作用域(CoroutineScope)与生命周期绑定Activity/Fragment 中手

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息

Android 缓存日志Logcat导出与分析最佳实践

《Android缓存日志Logcat导出与分析最佳实践》本文全面介绍AndroidLogcat缓存日志的导出与分析方法,涵盖按进程、缓冲区类型及日志级别过滤,自动化工具使用,常见问题解决方案和最佳实... 目录android 缓存日志(Logcat)导出与分析全攻略为什么要导出缓存日志?按需过滤导出1. 按

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言:为什么需要自定义异常一、异常基础:先搞懂python的异常体系1.1 异常是什么?1.2

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一,再次理解协议二,序列化和反序列化三,实现网络计算器3.1 日志文件3.2Socket.hpp

C语言自定义类型之联合和枚举解读

《C语言自定义类型之联合和枚举解读》联合体共享内存,大小由最大成员决定,遵循对齐规则;枚举类型列举可能值,提升可读性和类型安全性,两者在C语言中用于优化内存和程序效率... 目录一、联合体1.1 联合体类型的声明1.2 联合体的特点1.2.1 特点11.2.2 特点21.2.3 特点31.3 联合体的大小1

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束