Open rosuH opened 6 months ago
The constraints in the constraintSet define the position for the start and end. They do not define the motion to get between the two points.
Getting one object to have a path relative to another is not supported in the dsl syntax. It is supported in the json syntax seen here.
https://github.com/androidx/constraintlayout/assets/15019413/c568d3d7-a5c2-4bce-baec-23d82f93a5b1
I attempted to use JSON syntax and made changes to my code, as shown below:
val jsonScene =
"""
{
Variables: {
angle: {
from: 0,
step: 51,
},
distance: 100,
angle2: {
from: 51,
step: 51,
},
distance2: 70,
mylist: {
tag: 'unSelectedColorList',
},
},
ConstraintSets: {
start: {
selectedColor: {
width: 5,
height: 5,
center: 'parent',
},
Generate: {
mylist: {
width: 5,
height: 5,
circular: [
'parent',
'angle',
'distance',
],
},
},
},
end: {
selectedColor: {
width: 70,
height: 70,
center: 'parent',
},
Generate: {
mylist: {
width: 45,
height: 45,
circular: [
'parent',
'angle2',
'distance2',
],
},
},
},
},
Transitions: {
default: {
from: 'start',
to: 'end',
}
}
}
""".trimIndent()
val animateToEnd by remember { mutableStateOf(true) }
val progress = remember { Animatable(0f) }
LaunchedEffect(animateToEnd) {
delay(50)
progress.animateTo(
if (animateToEnd) 1f else 0f,
animationSpec = tween(5000)
)
}
MotionLayout(
motionScene = MotionScene(jsonScene),
modifier = Modifier.fillMaxSize(),
progress = progress.value,
debugFlags = DebugFlags.All,
) {
unSelectedColorList.forEachIndexed { index, colorItem ->
ColorItemComponent(
colorItem = colorItem,
modifier = Modifier
.layoutId("id${index}", "unSelectedColorList")
.clip(CircleShape),
)
}
ColorItemComponent(
colorItem = selectedColor,
modifier = Modifier
.border(
width = 3.dp,
color = Color(white),
shape = CircleShape
)
.layoutId("selectedColor")
.clip(CircleShape),
)
}
However, the behavior appears to be unexpected. It seems that all constraint nodes within the list are being ignored.
https://github.com/androidx/constraintlayout/assets/15865017/45e4ee31-6f44-4519-a94d-56c8b4fcdc6b
Description
I intent to implement a path motion using MotionLayout. I set up a start
constraintSet
with an initialangle
of51f
anddistance
of0
. Subsequently, I Configured an endconstraintSet
withangle
set to0f
anddistance
set to70.dp
.What happened?
I observed that the only one of
angle
anddistance
can be animated at a time, as demonstrated in the video below.https://github.com/androidx/constraintlayout/assets/15865017/eaacb266-7840-44b3-acc1-7615b6faf093
Expected Behavior
I expect both
angle
anddistance
to be animated simultaneously. The desired path is illustreated in the accompanying image:Env
Full code
Sample Project
For your convenience, I have prepared a sample project.
ConstraintLayoutComposeCircleReproduce.zip