kyrie
kyrie copied to clipboard
Multiple Issues with Kyrie
Hi,
@alexjlockwood I am trying to do something like this with Kyrie but after trying lot of iterations I couldn't achieve this result:
Problem1: Draw 5 paths in order one-by-one
P1 -> P2 -> P3 -> P4 -> P5 where
P1 = circle P2-P4 = Text draw P5 = Fill circle
Currently with Kyrie, all paths are being drawn in parallel at once (I can see them animating but they are drawn together non in sequence). I tried creating one group with all paths in it and separate group per path but it didn't work for me either
My sample code
`
var drawable = kyrieDrawable { viewport(700f, 700f)
// Path 1 (circle) should be drawn first
group {
translateX(10f)
translateY(10f)
path {
strokeColor(Color.RED)
strokeWidth(2f)
trimPathEnd(
Animation.ofFloat(0f, 1f)
.duration(2000)
)
pathData(logoPaths.paths[0])
}
}
// Then Path 2 (text should be drawn)
group {
path {
strokeColor(logoPaths.traceResidueColors[1])
strokeWidth(2f)
trimPathEnd(
Animation.ofFloat(0f, 1f)
.duration(1333)
)
pathData(logoPaths.paths[1])
}
}
// Other paths here as separate groups
}
`
Problem2: I want to introduce another Path (or set of paths) between P4 & P5 which are just reverse of P2-P4 i.e reverse draw the text. Currently I see no way of doing this. Event internet is not helping with this problem
Any help would be much appreciated!
Hi @shahzadmajeed, do these issues also occur with the normal AnimatedVectorDrawable
class? Kyrie is meant to be behave in a similar fashion.
Hi @alexjlockwood no I didn't try AnimatedVectorDrawable
yet. Will give it a try