带你实现女朋友欲罢不能的网易云音乐宇宙尘埃特效

ps2：小伙伴如果有好的gif压缩网站可以推荐一波

咳咳，虽然画质堪比AV画质，但是还是能看的出来效果是非常不错的。那么今天我就带小伙伴们一起从头到尾的实现一下这个效果吧。

特效分析

首先看动图，我们可以拆成两部分完成，一个是里面不断旋转的圆形图片，一个是外面不断扩散的粒子动效。

我们由易到难来完成，毕竟柿子要挑软的捏嘛。

另外由于本篇重点是讲自定义View的，所以就不采用ViewGroup的方式来实现图片和粒子动效的结合了。而是采用分开布局的方式。这样做的好处是可以只专注于粒子动效的实现，而不需要去考虑测量，布局等。

至于自定义ViewGroup，下一篇文章我将会带领大家实现一个非常非常非常酷炫的效果。

加载图片

我们先观察，首先这是一个圆形图片。其次，它在不停的转。

咳咳，先别骂，容我说完嘛。

圆形图片的话我们就用Glide来进行实现把，其实自定义View实现也可以，但我们重点还是粒子特效。

首先定义一个ImageView

<?xml version="1.0" encoding="utf-8"?>

现在我们去Activity中，用Glide加载一张圆形图片。

class DemoActivity : AppCompatActivity() {

private lateinit var demoBinding: ActivityDemoBinding

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
demoBinding = ActivityDemoBinding.inflate(layoutInflater)
setContentView(demoBinding.root)

lifecycleScope.launch(Dispatchers.Main) {
loadImage()
}
}
private suspend fun loadImage() {
withContext(Dispatchers.IO) {
Glide.with(this@DemoActivity)
.load(R.drawable.ic_music)
.circleCrop()
.into(object : ImageViewTarget(demoBinding.musicAvatar) {
override fun setResource(resource: Drawable?) {
demoBinding.musicAvatar.setImageDrawable(resource)
}
})
}
}
}

这样我们利用Glide就加载了一个圆形的图片。

旋转图片

图片有了，接下来就应该是旋转了。

那么我们开始搞旋转。

旋转是如何实现的？我想不用我多说，很多小伙伴都知道，是动画嘛。

没错，就是动画。我们这里使用属性动画来实现。

定义一个属性动画并且给图片设置一个点击事件，让它旋转起来

lateinit var rotateAnimator: ObjectAnimator

override fun onCreate(savedInstanceState: Bundle?) {
…
setContentView(demoBinding.root)
rotateAnimator = ObjectAnimator.ofFloat(demoBinding.musicAvatar, View.ROTATION, 0f, 360f)
rotateAnimator.duration = 6000
rotateAnimator.repeatCount = -1
rotateAnimator.interpolator = LinearInterpolator()
lifecycleScope.launch(Dispatchers.Main) {
loadImage()
//添加点击事件，并且启动动画
demoBinding.musicAvatar.setOnClickListener {
rotateAnimator.start()
}
}
}

这些都是小儿科了，相信面对电视机前的观众朋友们，啊不，口误口误。

相信小伙伴们都很熟悉了，那我们开始今天的重头戏，这个粒子动画。

粒子动画

其实我很久以前看粒子动画的时候，也很好奇，这些炫酷的粒子动画是怎么实现的，当时的我完全没有思路。

尤其是看到一些图片，啪唧一下变成了一堆粒子，掉落，然后又呱唧从粒子变成了图片，就觉得异常的牛X。

其实啊，一点都不神奇。

首先我们要知道bitmap是什么。bitmap是什么呀？

在数学上，有这么几个概念，点，线，面。点很好理解，就是一个点。线是由一堆点组成的，而面又类似于一堆线组成的。本质上，面就是由无数的点组成的。

可是这和bitmap以及今天的粒子动画有什么关系呢？

一个bitmap，我们可以简单地理解为一张图片。这个图片是不是一个平面呢？而平面又是一堆点组成的，这个点在这里称为像素点。所以bitmap就是由一堆像素点所组成的，有趣的是，这些像素点是有颜色的，当这些像素点足够小，你离得足够远你看起来就像一幅完整的画了。

在现实中也不乏这样的例子，举办一些活动的时候，一个个人穿着不同颜色的衣服有序的站在广场上，如果有一架无人机在空中看，就能看到是一幅画。就像这样

所以当把一幅画拆成一堆粒子的话，其实就是获得bitmap中所有的像素点，然后改变他们的位置就可以了。如果想要用一堆粒子拼凑出一幅画，只需要知道这些粒子的顺序，排放整齐自然就是一幅画了。

扯远了，说这些呢其实和今天的效果没有特别强的联系，只是为了让你能够更好的理解粒子动画的本质。

粒子动画分析

我们先观察这个特效，你会发现有一个圆，这个圆上不断的往外发散粒子，粒子在发散的过程中速度是不相同的。而且，在发散的过程中，透明度也在不断变化，直到最后完全透明。

好，我们归纳一下。

• 圆形生产粒子
• 粒子速度不同，也就是随机。
• 粒子透明度不断降低，直到最后消散。
• 粒子沿着到圆心的反方向扩散。

写自定义View的时候千万不要一上来就开干，而是要逐渐分析，有的时候我们遇到一个复杂的效果，更是要逐帧的分析。

而且我写自定义View的时候有个习惯，就是一点点的实现效果，不会去一次性实现全部的效果。

所以我们第一步，生产粒子。

生产粒子

首先，我们可以知道，粒子是有颜色的，但是似乎这个效果粒子只有白色，那就指定粒子颜色为白色了。

然后我们可以得出，粒子是有位置的，位置肯定由x，y组成嘛。然后粒子还有个速度，以及透明度和半径。

定义粒子

我们可以定义一个粒子类：

class Particle(
var x:Float,//X坐标
var y:Float,//Y坐标
var radius:Float,//半径
var speed:Float,//速度
var alpha: Int//透明度
)
复制代码

由于我们的这个效果看起来就像是水波一样的涟漪，我给自定义View起名为涟漪，也就是dimple

我们来定义这个自定义View把

定义自定义view

class DimpleView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
//定义一个粒子的集合
private var particleList = mutableListOf()
//定义画笔
var paint = Paint()
}

一开始就直接圆形生产粒子着实有些难度，我先考虑考虑如何实现生产粒子把。

先不断生产粒子，然后再考虑圆形的事情。

而且生产一堆粒子比较麻烦，我先实现从上到下生产一个粒子。

那么如何生产一个粒子呢？前面也说了，粒子就是个很小的点，所以用canvas的drawCircle就可以。

那我们来吧

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = Color.WHITE
paint.isAntiAlias = true
var particle=Particle(0f,0f,2f,2f,100)
canvas.drawCircle(particle.x, particle.y, particle.radius, paint)
}

画画嘛，就要在onDraw方法中进行了。我们先new一个Particle，然后画出来。

实际上这样并没有什么效果。为啥呢？

我们的背景是白色的，粒子默认是白色的，你当然看不到了。所以我们需要先做个测试，为了能看出效果。这里啊，我们把背景换成黑色。同时，为了方便测试，先把Imageview设置成不可见。然后我们看下效果

没错，就是没什么效果。你什么都看不出来。

先不急，慢慢来，且听我吹，啊不，且听我和你慢慢道来。

我们在这里只花了一个圆，而且是在坐标原点画了一个半径为2的点，可以说很小很小了。自然就看不到了。

什么，你不知道原点在哪？

棕色部分就是我们的屏幕，所以原点就是左上角。

现在我们需要做的事情只有两个，要么把点变大，要么改变点的位置。

粒子粒子的，当然不能变大，所以我们把它放到屏幕中心去。

所以我们定义一个屏幕中心的坐标，centerX,centerY。并且在onSizeChanged方法中给它们赋值

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX= (w/2).toFloat()
centerY= (h/2).toFloat()
}

那我们改一下上面的画点的代码：

override fun onDraw(canvas: Canvas) {
…
var particle=Particle(centerX,centerY,2f,2f,100)
canvas.drawCircle(particle.x, particle.y, particle.radius, paint)
}

如此，可以看到这个点了，虽然很小很小，但是也胜过没有呀

可是这时候有人跳出来了，说你这不对啊，一个点有啥用？还那么小，我本来就近视，你这搞得我更看不清了。你是不是眼睛店派来的叛徒！

添加多个粒子

那好吧，我们多加几个。可是该怎么加？效果图中是圆形的，可是我不会啊，我只能先试试一横排添加。看看这样可不可以呢？我们知道，横排的话就是y值不变，x变。好，但是为了避免我们画出一条线，我们x值随机增加，这样的话看起来也比较不规则一些。

那么代码就应该是这样了

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = Color.WHITE
paint.isAntiAlias = true
for (i in 0…50){
var random= Random()
var nextX=random.nextInt((centerX*2).toInt())
var particle=Particle(nextX.toFloat(),centerY,2f,2f,100)
canvas.drawCircle(particle.x, particle.y, particle.radius, paint)
}

}

由于centerX是屏幕的中心，所以它的值是屏幕宽度的一半，这里的话X的值就是在屏幕宽度内随机选一个值。那么效果看起来是下面这样

效果看起来不错了。

但是总有爱搞事的小伙伴又跳出来了，说你会不会写代码？onDraw方法一直被调用，不能定义对象你不知道么？很容易引发频繁的GC，造成内存抖动的。而且你这还搞个循环，性能能行不？

这个小伙伴你说的非常对，是我错了！

确实，在ondraw方法中不适合定义对象，尤其是for循环中就更不能了。段时间看，我们50个粒子好像对性能的开销不是很大，但是一旦粒子数量很多，性能开销就会十分的大。而且，为了不掉帧，我们需要在16ms之内完成绘制。这个不明白的话我后续会有性能优化的专题，可以关注一下我~

这里我们测量一下50个粒子的绘制时间和5000个粒子的绘制时间。

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = Color.WHITE
paint.isAntiAlias = true
var time= measureTimeMillis {
for (i in 0…50){
var random= Random()
var nextX=random.nextInt((centerX*2).toInt())
var particle=Particle(nextX.toFloat(),centerY,2f,2f,100)
canvas.drawCircle(particle.x, particle.y, particle.radius, paint)
}
}
Log.i(“dimple”,“绘制时间$time ms”)
}

结果如下：50个粒子的绘制时间

5000个粒子的绘制时间：

可以看到，明显超了16ms。所以我们需要优化，怎么优化？很简单，就是不在ondraw方法中创建对象就好了，那我们选择在哪里呢？

构造方法可以吗？好像不可以呢，这个时候还没办法获得屏幕宽高，嘿嘿嘿，onSizeChanged方法就决定是你了！

粒子添加到集合中

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX= (w/2).toFloat()
centerY= (h/2).toFloat()
val random= Random()
var nextX=0
for (i in 0…5000){
nextX=random.nextInt((centerX*2).toInt())
particleList.add(Particle(nextX.toFloat(),centerY,2f,2f,100))
}
}

我们再来看看onDraw方法中绘制时间是多少：

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
paint.color = Color.WHITE
paint.isAntiAlias = true
var time= measureTimeMillis {
particleList.forEach {
canvas.drawCircle(it.x,it.y,it.radius,paint)
}
}
Log.i(“dimple”,“绘制时间$time ms”)
}

emmmm,好像是低于16ms了，可是这也太危险了吧，你这分分钟就超过了16ms啊。

确实是这样子，但是实际情况下，我们并不需要5000个这么多的粒子。又有人问，，万一真的需要怎么办？那就得看surfaceView了。这里就不讲了

我们还是回过头来，先把粒子数量变成50个。

现在粒子也有了，该实现动起来的效果了。

动起来，我们想想，应该怎么做呢？效果图是类似圆一样的扩散，我现在做不到，我往下掉这应该不难吧？

说动就动，搞起！至于怎么动，那肯定是属性动画呀。

定义动画

private var animator = ValueAnimator.ofFloat(0f, 1f)
init {
animator.duration = 2000
animator.repeatCount = -1
animator.interpolator = LinearInterpolator()
animator.addUpdateListener {
updateParticle(it.animatedValue as Float)
invalidate()//重绘界面
}
}

我在这里啊，定义了一个方法updateParticle，每次动画更新的时候啊就去更新粒子的状态。

updateParticle方法应该去做什么事情呢？我们来开动小脑筋想想。

如果说是粒子不断往下掉的话，那应该是y值不断地增加就可以了，嗯，非常有道理。

我们来实现一下这个方法

更新粒子位置

private fun updateParticle(value: Float) {
particleList.forEach {
it.y += it.speed
}
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
…
animator.start()//别忘了启动动画
}

那我们现在来看一下效果如何

emmmm看起来有点雏形了，不过效果图里的粒子速度似乎是随机的，咱们这里是同步的呀。

没关系，我们可以让粒子的速度变成随机的速度。我们修改添加粒子这里的代码

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX = (w / 2).toFloat()
centerY = (h / 2).toFloat()
val random = Random()
var nextX = 0
var speed=0 //定义一个速度
for (i in 0…50) {
nextX = random.nextInt((centerX * 2).toInt())
speed= random.nextInt(10)+5 //速度从5-15不等
particleList.add(
Particle(nextX.toFloat(), centerY, 2f, speed.toFloat(), 100)
)
}
animator.start()
}

这是效果，看起来有点样子了。不过问题又来了，人家的粒子是一直散发的，你这个粒子怎么没了就是没了呢？

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）

最后

我这里整理了一份完整的学习思维以及Android开发知识大全PDF，有需要的同学可以自行领取。

资料获取方式：Android完整知识学习体系路线

当然实践出真知，即使有了学习线路也要注重实践，学习过的内容只有结合实操才算是真正的掌握。

698636573)]
[外链图片转存中…(img-4SJ3S4T6-1710698636573)]
[外链图片转存中…(img-9DaT79VD-1710698636574)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）
[外链图片转存中…(img-79MZTjra-1710698636574)]

最后

我这里整理了一份完整的学习思维以及Android开发知识大全PDF，有需要的同学可以自行领取。

[外链图片转存中…(img-pVtur3BU-1710698636575)]

资料获取方式：Android完整知识学习体系路线

当然实践出真知，即使有了学习线路也要注重实践，学习过的内容只有结合实操才算是真正的掌握。