Compose自定義View實(shí)現(xiàn)宇智波斑寫(xiě)輪眼
更新時(shí)間：2023年02月12日 11:32:03 作者：cxy107750
這篇文章主要為大家介紹了Compose自定義View實(shí)現(xiàn)宇智波斑寫(xiě)輪眼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
本章節(jié)是Compose自定義繪制的第二章，畫(huà)的是一個(gè)之前設(shè)計(jì)給的一個(gè)比較復(fù)雜的，設(shè)計(jì)所謂的會(huì)呼吸的動(dòng)畫(huà)，那時(shí)候?qū)崿F(xiàn)花了蠻長(zhǎng)的時(shí)間，搬著電腦跟設(shè)計(jì)一幀一幀地對(duì)，沒(méi)多久后來(lái)需求就被拿掉了，至于文章的標(biāo)題哈哈隨意起了一個(gè)，長(zhǎng)得有點(diǎn)像而已。
Compose的實(shí)現(xiàn)，圖形本身跟上一章節(jié)的LocationMarker其實(shí)差不太多，倒過(guò)來(lái)了而已，調(diào)整了P1跟P3, 基本圖形的Path，這里不再做介紹，讀者也可以去看代碼實(shí)現(xiàn)。主要介紹一下動(dòng)畫(huà)吧。
首先看一下gif動(dòng)圖：
整個(gè)圖形分三層，最底層是灰色的背景，沒(méi)有動(dòng)畫(huà)實(shí)現(xiàn)。
先實(shí)現(xiàn)功能效果
第二層是一個(gè)層變的動(dòng)畫(huà)，每層有個(gè)delay的不同延遲，對(duì)alpha最一個(gè)ObjectAnimator.ofFloat(water1, "alpha", 0f, 0.5f, 0.2f, 1f)漸變的動(dòng)畫(huà)，0.5f 到0.2f, 再到1f這個(gè)地方展現(xiàn)出所謂的呼吸的感覺(jué)。Compose目前寫(xiě)的不多，有些冗余代碼沒(méi)有抽象，先實(shí)現(xiàn)了功能效果。
@Composable
fun drawWaterDrop(){
val waterDropModel by remember {
mutableStateOf(WaterDropModel.waterDropM)
}
val color1 = colorResource(id = waterDropModel.water1.colorResource)
val color2 = colorResource(id = waterDropModel.water2.colorResource)
val color3 = colorResource(id = waterDropModel.water3.colorResource)
val color4 = colorResource(id = waterDropModel.water4.colorResource)
val color5 = colorResource(id = waterDropModel.water5.colorResource)
val color6 = colorResource(id = waterDropModel.water6.colorResource)
val color7 = colorResource(id = waterDropModel.water7.colorResource)
val color8 = colorResource(id = waterDropModel.water8.colorResource)
val animAlpha1 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha2 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha3 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha4 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha5 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha6 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha7 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha8 = remember { Animatable(0f, Float.VectorConverter) }
LaunchedEffect(Unit){
animAlpha1.animateTo(1f, animationSpec = myKeyframs(0))
}
LaunchedEffect(Unit){
animAlpha2.animateTo(1f, animationSpec = myKeyframs(1))
}
LaunchedEffect(Unit){
animAlpha3.animateTo(1f, animationSpec = myKeyframs(2))
}
LaunchedEffect(Unit){
animAlpha4.animateTo(1f, animationSpec = myKeyframs(3))
}
LaunchedEffect(Unit){
animAlpha5.animateTo(1f, animationSpec = myKeyframs(4))
}
LaunchedEffect(Unit){
animAlpha6.animateTo(1f, animationSpec = myKeyframs(5))
}
LaunchedEffect(Unit){
animAlpha7.animateTo(1f, animationSpec = myKeyframs(6))
}
LaunchedEffect(Unit){
animAlpha8.animateTo(1f, animationSpec = myKeyframs(7))
}
Canvas(modifier = Modifier.fillMaxSize()){
val contentWidth = size.width
val contentHeight = size.height
withTransform({
translate(left = contentWidth / 2, top = contentHeight / 2)}) {
drawPath(AndroidPath(waterDropModel.water8Path), color = color8, alpha = animAlpha8.value)
drawPath(AndroidPath(waterDropModel.water7Path), color = color7, alpha = animAlpha7.value)
drawPath(AndroidPath(waterDropModel.water6Path), color = color6, alpha = animAlpha6.value)
drawPath(AndroidPath(waterDropModel.water5Path), color = color5, alpha = animAlpha5.value)
drawPath(AndroidPath(waterDropModel.water4Path), color = color4, alpha = animAlpha4.value)
drawPath(AndroidPath(waterDropModel.water3Path), color = color3, alpha = animAlpha3.value)
drawPath(AndroidPath(waterDropModel.water2Path), color = color2, alpha = animAlpha2.value)
drawPath(AndroidPath(waterDropModel.water1Path), color = color1, alpha = animAlpha1.value)
}
}
}
private fun myKeyframs(num:Int):KeyframesSpec<Float>{
return keyframes{
durationMillis = 3000
delayMillis = num * 2000
0.5f at 1000 with LinearEasing
0.2f at 2000 with LinearEasing
}
}
調(diào)用傳入不同的delay值
然后就是外層掃光的動(dòng)畫(huà)，像探照燈一樣一圈圈的掃，一共掃7遍，代碼跟層變動(dòng)畫(huà)差不多，也是對(duì)alpha值做漸變，目前代碼是調(diào)用掃光動(dòng)畫(huà)7次，后續(xù)看看如何優(yōu)化性能。每次調(diào)用傳入不同的delay值即可。
@Composable
fun drawWaterDropScan(delayTime:Long){
val waterDropModel by remember {
mutableStateOf(WaterDropModel.waterDropMScan)
}
val color1 = colorResource(id = waterDropModel.water1.colorResource)
val color2 = colorResource(id = waterDropModel.water2.colorResource)
val color3 = colorResource(id = waterDropModel.water3.colorResource)
val color4 = colorResource(id = waterDropModel.water4.colorResource)
val color5 = colorResource(id = waterDropModel.water5.colorResource)
val color6 = colorResource(id = waterDropModel.water6.colorResource)
val color7 = colorResource(id = waterDropModel.water7.colorResource)
val color8 = colorResource(id = waterDropModel.water8.colorResource)
val animAlpha2 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha3 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha4 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha5 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha6 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha7 = remember { Animatable(0f, Float.VectorConverter) }
val animAlpha8 = remember { Animatable(0f, Float.VectorConverter) }
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(1f, 350) }
animAlpha2.animateTo(0f, animationSpec = myKeyframs2(700, 0, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.8f, 315) }
animAlpha3.animateTo(0f, animationSpec = myKeyframs2(630, 233, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.55f, 315) }
animAlpha4.animateTo(0f, animationSpec = myKeyframs2(630, 383, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.5f, 325) }
animAlpha5.animateTo(0f, animationSpec = myKeyframs2(650, 533, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.45f, 325) }
animAlpha6.animateTo(0f, animationSpec = myKeyframs2(650, 667, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.35f, 283) }
animAlpha7.animateTo(0f, animationSpec = myKeyframs2(567, 816, map))
}
LaunchedEffect(Unit){
delay(delayTime)
val map = mutableMapOf<Float, Int>().apply { put(0.3f, 216) }
animAlpha8.animateTo(0f, animationSpec = myKeyframs2(433, 983, map))
}
Canvas(modifier = Modifier.fillMaxSize()){
val contentWidth = size.width
val contentHeight = size.height
withTransform({
translate(left = contentWidth / 2, top = contentHeight / 2)
}) {
drawPath(AndroidPath(waterDropModel.water8Path), color = color8, alpha = animAlpha8.value)
drawPath(AndroidPath(waterDropModel.water7Path), color = color7, alpha = animAlpha7.value)
drawPath(AndroidPath(waterDropModel.water6Path), color = color6, alpha = animAlpha6.value)
drawPath(AndroidPath(waterDropModel.water5Path), color = color5, alpha = animAlpha5.value)
drawPath(AndroidPath(waterDropModel.water4Path), color = color4, alpha = animAlpha4.value)
drawPath(AndroidPath(waterDropModel.water3Path), color = color3, alpha = animAlpha3.value)
drawPath(AndroidPath(waterDropModel.water2Path), color = color2, alpha = animAlpha2.value)
drawPath(AndroidPath(waterDropModel.water1Path), color = color1)
}
}
}
private fun myKeyframs2(durationMillisParams:Int, delayMillisParams:Int, frames:Map<Float, Int>):KeyframesSpec<Float>{
return keyframes{
durationMillis = durationMillisParams
delayMillis = delayMillisParams
for ((valueF, timestamp) in frames){
valueF at timestamp
}
}
}
@Preview
@Composable
fun WaterDrop(){
Box(modifier = Modifier.fillMaxSize()){
drawWaterDropBg()
drawWaterDrop()
for (num in 1 .. 7){
drawWaterDropScan(delayTime = num * 2000L)
}
}
}
代碼跟LocationMarker在一個(gè)Project里面，暫時(shí)沒(méi)有添加導(dǎo)航。github.com/yinxiucheng… 下的CustomerComposeView.
以上就是Compose自定義View實(shí)現(xiàn)宇智波斑寫(xiě)輪眼的詳細(xì)內(nèi)容，更多關(guān)于Compose自定義View的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android通過(guò)記住密碼功能學(xué)習(xí)數(shù)據(jù)存儲(chǔ)類(lèi)SharedPreferences詳解及實(shí)例
這篇文章主要通過(guò)“記住密碼”實(shí)例功能學(xué)習(xí)為大家介紹了Android數(shù)據(jù)存儲(chǔ)類(lèi)SharedPreferences，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
Android開(kāi)發(fā)之時(shí)間日期組件用法實(shí)例
這篇文章主要介紹了Android開(kāi)發(fā)之時(shí)間日期組件用法,主要介紹了TimePicker和DatePicker組件,對(duì)于Android程序開(kāi)發(fā)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-08-08
OpenGL Shader實(shí)例分析（1）Wave效果
這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第一篇，Wave效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
android的RecyclerView實(shí)現(xiàn)拖拽排序和側(cè)滑刪除示例
在平時(shí)開(kāi)發(fā)應(yīng)用的時(shí)候，經(jīng)常會(huì)遇到列表排序、滑動(dòng)刪除的需求。這篇文章主要介紹了android的RecyclerView實(shí)現(xiàn)拖拽排序和側(cè)滑刪除示例,有興趣的可以了解一下。2017-02-02
Flutter listview如何實(shí)現(xiàn)下拉刷新上拉加載更多功能
這篇文章主要給大家介紹了關(guān)于Flutter listview如何實(shí)現(xiàn)下拉刷新上拉加載更多功能的相關(guān)資料,對(duì)于新聞列表數(shù)據(jù)的更新和加載更多是必不可少的,而實(shí)現(xiàn)下拉刷新與上劃加載更多的方式有很多種,需要的朋友可以參考下2021-08-08
Android編程實(shí)現(xiàn)應(yīng)用自動(dòng)更新、下載、安裝的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)應(yīng)用自動(dòng)更新、下載、安裝的方法,涉及Android針對(duì)應(yīng)用程序包的讀取,屬性判斷與更新操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02
Android中ProgressDialog的dismiss()與cancel()方法的區(qū)別
本文主要介紹了Android中ProgressDialog的dismiss()與cancel()方法的區(qū)別，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Android通過(guò)wifi連接手機(jī)(不需要root)
這篇文章主要為大家詳細(xì)介紹了Android通過(guò)wifi連接手機(jī)，不需要root，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Flutter狀態(tài)管理Bloc之登錄示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Android List刪除重復(fù)數(shù)據(jù)
這篇文章主要介紹了Android List刪除重復(fù)數(shù)據(jù)的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-06-06