feat(filters): чип уменьшается и тает у кнопки (эффект отдаления в глубину)

Вместо простого затухания края — per-chip трансформация по позиции: чип масштабируется
0.42..1 + alpha по recedeFactor (offset элемента в LazyRow: правее 92dp — норма, к 46dp —
исчез). transformOrigin центр-лево → будто уходит в глубину под кнопку-категорию.
Отступ слева увеличен (взлётка под кнопкой 96/100dp). Радио и Чарты.
This commit is contained in:
nk
2026-06-07 17:43:10 +03:00
parent 87dca7a6df
commit 8b1c65fa43
3 changed files with 16 additions and 18 deletions

View File

@@ -16,6 +16,7 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.* import androidx.compose.material3.*
@@ -46,7 +47,8 @@ import com.radiola.domain.model.StatPoint
import com.radiola.domain.model.TrackStats import com.radiola.domain.model.TrackStats
import com.radiola.ui.components.CategoryPicker import com.radiola.ui.components.CategoryPicker
import com.radiola.ui.components.EmptyState import com.radiola.ui.components.EmptyState
import com.radiola.ui.components.fadingStartEdge import com.radiola.ui.components.recede
import com.radiola.ui.components.recedeFactor
import com.radiola.ui.components.PopularityChart import com.radiola.ui.components.PopularityChart
import com.radiola.ui.components.crossfadeModel import com.radiola.ui.components.crossfadeModel
import com.radiola.ui.components.serviceLogoRes import com.radiola.ui.components.serviceLogoRes
@@ -108,11 +110,10 @@ fun ChartsScreen(
genres = genres, genres = genres,
selected = selectedGenre, selected = selectedGenre,
onSelect = viewModel::selectGenre, onSelect = viewModel::selectGenre,
contentPadding = PaddingValues(start = 70.dp, end = 20.dp), contentPadding = PaddingValues(start = 100.dp, end = 20.dp),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.align(Alignment.Center) .align(Alignment.Center)
.fadingStartEdge(62.dp)
) )
CategoryPicker( CategoryPicker(
title = "Стиль музыки", title = "Стиль музыки",
@@ -233,24 +234,22 @@ private fun GenreSelector(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp) contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp)
) { ) {
val listState = rememberLazyListState()
val all = remember(genres) { listOf<String?>(null) + genres }
LazyRow( LazyRow(
modifier = modifier, modifier = modifier,
state = listState,
horizontalArrangement = Arrangement.spacedBy(9.dp), horizontalArrangement = Arrangement.spacedBy(9.dp),
contentPadding = contentPadding contentPadding = contentPadding
) { ) {
item { itemsIndexed(all, key = { _, g -> g ?: " all" }) { index, g ->
Box(modifier = Modifier.recede(recedeFactor(listState, index))) {
PeriodChip( PeriodChip(
label = "Все", label = g ?: "Все",
selected = selected == null, selected = selected == g,
onClick = { onSelect(null) } onClick = { onSelect(g) }
) )
} }
items(genres) { genre ->
PeriodChip(
label = genre,
selected = selected == genre,
onClick = { onSelect(genre) }
)
} }
} }
} }

View File

@@ -185,11 +185,10 @@ fun StationsScreen(
tags = tags, tags = tags,
selectedTag = selectedTag, selectedTag = selectedTag,
onTagSelected = viewModel::onTagSelected, onTagSelected = viewModel::onTagSelected,
contentPadding = PaddingValues(start = 66.dp, end = 16.dp), contentPadding = PaddingValues(start = 96.dp, end = 16.dp),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.align(Alignment.Center) .align(Alignment.Center)
.fadingStartEdge(60.dp)
) )
// Кнопка-категории — поверх чипов, слева. // Кнопка-категории — поверх чипов, слева.
CategoryPicker( CategoryPicker(