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

前言

前段时间，女朋友用网易云音乐的时候看到一个宇宙尘埃特效，说很好看，想要让我给她开VIP用。

笑话，作为一个程序员为什么不能自己实现！开什么VIP！！

什么女朋友？程序员有吗？我只在意特效的实现！

0202年了，Android开发大都应该是老油条了把。如果你自定义View还是掌握得不够熟练的话，那可就说不过去了哦。自定义View可以说是Android开发中，无论是初级，中级还是高级都必须掌握的一个点。

不然的话，UI一不小心设计的太炫酷，那你岂不是要和他打起来了？难道你不想成为下图中的男人吗？

所以，自定义View的重要性已经不用我多说了。本篇是针对有自定义View基础知识，但是苦于没有好的项目模仿，或者说看到了酷炫效果没有思路不知道该如何下手的人。恭喜你，我将一步步手把手的带你分析效果，然后代码实现它。

我就知道没图是骗不到人的。先放图，大家看一下最终实现的效果。

ps：为了能更快加载出来，gif是压缩了又压缩，大家可以脑部清晰度。

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

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

特效分析

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

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

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

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

加载图片

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

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

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

首先定义一个ImageView

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/rootLayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <ImageView            android:id="@+id/music_avatar"                    android:layout_centerInParent="true"            android:layout_width="178dp"            android:layout_height="178dp"/></RelativeLayout>

现在我们去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<Drawable>(demoBinding.musicAvatar) {                        override fun setResource(resource: Drawable?) {                                 demoBinding.musicAvatar.setImageDrawable(resource)                        }                    })        }    }}

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

旋转图片

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

那么我们开始搞旋转。

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

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

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

lateinit var rotateAnimator: ObjectAnimatoroverride 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 { &n