android 文字炸裂效果,Android 中 View 炸裂特效的实现分析 IT蓝豹

2023-10-19 15:40
文章标签 分析 文字 实现 android 特效 效果 view 炸裂 蓝豹

本文主要是介绍android 文字炸裂效果,Android 中 View 炸裂特效的实现分析 IT蓝豹，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前几天微博上被一个很优秀的 Android 开源组件刷屏了 - ExplosionField，效果非常酷炫，有点类似 MIUI 卸载 APP 时的动画，先来感受一下。

explosionfield.gif

ExplosionField 不但效果很拉风，代码写得也相当好，让人忍不住要拿来好好读一下。

创建 ExplosionField

ExplosionField 继承自 View，在 onDraw 方法中绘制动画特效，并且它提供了一个 attach2Window 方法，可以把 ExplosionField 最为一个子 View 添加到 Activity 上的 root view 中。public static ExplosionField attach2Window(Activity activity) {

ViewGroup rootView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);

ExplosionField explosionField = new ExplosionField(activity);

rootView.addView(explosionField, new ViewGroup.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));    return explosionField;

}1234567

explosionField 的 LayoutParams 属性都被设置为 MATCH_PARENT，

这样一来，一个 view 炸裂出来的粒子可以绘制在整个 Activity 所在的区域。知识点：可以用 Window.ID_ANDROID_CONTENT 来替代 android.R.id.content

炸裂之前的震动效果

在 View 的点击事件中，调用 mExplosionField.explode(v)之后，View 首先会震动，然后再炸裂。

震动效果比较简单，设定一个 [0, 1] 区间 ValueAnimator，然后在 AnimatorUpdateListener 的 onAnimationUpdate 中随机平移 x 和 y坐标，最后把 scale 和 alpha 值动态减为 0。int startDelay = 100;

ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f).setDuration(150);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

Random random = new Random();    @Override

public void onAnimationUpdate(ValueAnimator animation) {

view.setTranslationX((random.nextFloat() - 0.5f) * view.getWidth() * 0.05f);

view.setTranslationY((random.nextFloat() - 0.5f) * view.getHeight() * 0.05f);

}

});

animator.start();

view.animate().setDuration(150).setStartDelay(startDelay).scaleX(0f).scaleY(0f).alpha(0f).start();123456789101112131415

根据 View 创建一个 bitmap

View 震动完了就开始进行最难的炸裂，并且炸裂是跟隐藏同时进行的，先来看一下炸裂的 API - void explode(Bitmap bitmap, Rect bound, long startDelay, long duration)：

前两个参数 bitmap 和 bound 是关键，通过 View 来创建 bitmap 的代码比较有意思。

如果 View 是一个 ImageView，并且它的 Drawable 是一个 BitmapDrawable 就可以直接获取这个 Bitmap。if (view instanceof ImageView) {

Drawable drawable = ((ImageView) view).getDrawable();    if (drawable != null && drawable instanceof BitmapDrawable) {        return ((BitmapDrawable) drawable).getBitmap();

}

}123456

如果不是一个 ImageView，可以按照如下步骤创建一个 bitmap：新建一个 Canvas

根据 View 的大小创建一个空的 bitmap

把空的 bitmap 设置为 Canvas 的底布

把 view 绘制在 canvas上

把 canvas 的 bitmap 设置成 null

当然，绘制之前要清掉 View 的焦点，因为焦点可能会改变一个 View 的 UI 状态。

一下代码中用到的 sCanvas 是一个静态变量，这样可以节省每次创建时产生的开销。view.clearFocus();

Bitmap bitmap = createBitmapSafely(view.getWidth(),

view.getHeight(), Bitmap.Config.ARGB_8888, 1);if (bitmap != null) {    synchronized (sCanvas) {

Canvas canvas = sCanvas;

canvas.setBitmap(bitmap);

view.draw(canvas);

canvas.setBitmap(null);

}

}1234567891011

作者创建位图的办法非常巧妙，如果新建 Bitmap 时产生了 OOM，可以主动进行一次 GC - System.gc()，然后再次尝试创建。

这个函数的实现方式让人佩服作者的功力。public static Bitmap createBitmapSafely(int width, int height, Bitmap.Config config, int retryCount) {    try {        return Bitmap.createBitmap(width, height, config);

} catch (OutOfMemoryError e) {

e.printStackTrace();        if (retryCount > 0) {

System.gc();            return createBitmapSafely(width, height, config, retryCount - 1);

}        return null;

}

}123456789101112

出了 bitmap，还有一个一个很重要的参数 bound，它的创建相对比较简单：Rect r = new Rect();

view.getGlobalVisibleRect(r);int[] location = new int[2];

getLocationOnScreen(location);

r.offset(-location[0], -location[1]);

r.inset(-mExpandInset[0], -mExpandInset[1]);123456

首先获取 需要炸裂的View 的全局可视区域 - Rect r，然后通过 getLocationOnScreen(location) 获取 ExplosionField 在屏幕中的坐标，并根据这个坐标把 炸裂View 的可视区域进行平移，这样炸裂效果才会显示在 ExplosionField 中，最后根据 mExpandInset 值(默认为 0)扩展一下。

那创建的 bitmap 和 bound 有什么用呢？我们继续往下分析。

创建粒子

先来看一下炸裂成粒子这个方法的全貌：public void explode(Bitmap bitmap, Rect bound, long startDelay, long duration) {    final ExplosionAnimator explosion = new ExplosionAnimator(this, bitmap, bound);

explosion.addListener(new AnimatorListenerAdapter() {        @Override

public void onAnimationEnd(Animator animation) {

mExplosions.remove(animation);

}

});

explosion.setStartDelay(startDelay);

explosion.setDuration(duration);

mExplosions.add(explosion);

explosion.start();

}12345678910111213

这里要解释一下为什么用一个容器类变量 - mExplosions 来保存一个 ExplosionAnimator。因为 activity 中多个 View 的炸裂效果可能要同时进行，所以要把每个 View 对应的炸裂动画保存起来，等动画结束的时候再删掉。

作者自定义了一个继承自 ValueAnimator 的类 - ExplosionAnimator，它主要做了两件事情，一个是创建粒子 - generateParticle，另一个是绘制粒子 - draw(Canvas canvas)。

先来看一下构造函数：public ExplosionAnimator(View container, Bitmap bitmap, Rect bound) {

mPaint = new Paint();

mBound = new Rect(bound);    int partLen = 15;

mParticles = new Particle[partLen * partLen];

Random random = new Random(System.currentTimeMillis());    int w = bitmap.getWidth() / (partLen + 2);    int h = bitmap.getHeight() / (partLen + 2);    for (int i = 0; i 

mParticles[(i * partLen) + j] = generateParticle(bitmap.getPixel((j + 1) * w, (i + 1) * h), random);

}

}

mContainer = container;

setFloatValues(0f, END_VALUE);

setInterpolator(DEFAULT_INTERPOLATOR);

setDuration(DEFAULT_DURATION);

}123456789101112131415161718

根据构造函数可以知道作者把 bitmap 分成了一个 17 x 17 的矩阵，每个元素的宽度和高度分别是 w 和 h。int w = bitmap.getWidth() / (partLen + 2);int h = bitmap.getHeight() / (partLen + 2);12

所有的粒子是一个 15 x 15 的矩阵，元素色值是位图对应的像素值。bitmap.getPixel((j + 1) * w, (i + 1) * h)1

结构如下图所示，其中空心部分是粒子。● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ●

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

generateParticle 会根据一定的算法随机地生成一个粒子。这部分比较繁琐，分析略去。

其中比较巧妙的还是它的 draw 方法：public boolean draw(Canvas canvas) {    if (!isStarted()) {        return false;

}    for (Particle particle : mParticles) {

particle.advance((float) getAnimatedValue());        if (particle.alpha > 0f) {

mPaint.setColor(particle.color);

mPaint.setAlpha((int) (Color.alpha(particle.color) * particle.alpha));

canvas.drawCircle(particle.cx, particle.cy, particle.radius, mPaint);

}

}

mContainer.invalidate();    return true;

}123456789101112131415

刚开始我还一直比较困惑，既然绘制粒子是在 ExplosionField 的 onDraw 方法中进行，那肯定需要不停地刷新，结果作者并不是这么做的，实现方法又着实惊艳了一把。

首先，作者在 ExplosionAnimator 类中重载了 start() 方法，通过调用 mContainer.invalidate(mBound) 来刷新 将要炸裂的 View 所对应的区块。@Overridepublic void start() {    super.start();

mContainer.invalidate(mBound);

}12345

而 mContainer 即是占满了 activity 的 view - ExplosionField，它的 onDraw 方法中又会调用 ExplosionAnimator 的 draw 方法。@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    for (ExplosionAnimator explosion : mExplosions) {

explosion.draw(canvas);

}

}1234567

这样便形成了一个递归，两者相互调用，不停地刷新，直到所有粒子的 alpha 值变为 0，刷新就停下来了。public boolean draw(Canvas canvas) {    if (!isStarted()) {        return false;

}    for (Particle particle : mParticles) {

particle.advance((float) getAnimatedValue());        if (particle.alpha > 0f) {

mPaint.setColor(particle.color);

mPaint.setAlpha((int) (Color.alpha(particle.color) * particle.alpha));

canvas.drawCircle(particle.cx, particle.cy, particle.radius, mPaint);

}

}

mContainer.invalidate();    return true;

}123456789101112131415

总结

这个开源库的代码质量相当高，十分佩服作者。

更多特效。。《IT蓝豹》

这篇关于android 文字炸裂效果,Android 中 View 炸裂特效的实现分析 IT蓝豹的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/240746。

相关文章

Nginx实现动态封禁IP的步骤指南

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配
阅读更多...
Java中实现订单超时自动取消功能(最新推荐)

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue（1）定义实现Delayed接口的实体类 （
阅读更多...
将java程序打包成可执行文件的实现方式

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法：手动打包（将编译后的代码及JRE运行环境一起打包）,使用第三方打包工具（如Launch4j）和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2
阅读更多...
通俗易懂的Java常见限流算法具体实现

通俗易懂的Java常见限流算法具体实现

《通俗易懂的Java常见限流算法具体实现》：本文主要介绍Java常见限流算法具体实现的相关资料,包括漏桶算法、令牌桶算法、Nginx限流和Redis+Lua限流的实现原理和具体步骤,并比较了它们的... 目录一、漏桶算法1.漏桶算法的思想和原理2.具体实现二、令牌桶算法1.令牌桶算法流程:2.具体实现2.1
阅读更多...
MySQL8.0设置redo缓存大小的实现

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改
阅读更多...
C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
使用C++实现链表元素的反转

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2