Checkmate on Compose Part 2
Article Summary
Zsolt Kocsi discovered that Jetpack Compose's lack of shared element transitions wasn't a limitation. It was an opportunity to build something better.
Zsolt Kocsi built Chesso, a Jetpack Compose chess app with animated visualization layers. This second part of his series dives into the animation challenges and solutions he discovered while building complex board visualizations.
Key Takeaways
- Compose's offset modifier enables piece animations without shared element transitions
- Offset-based rendering made board flipping trivial with coordinate calculations
- LaunchedEffect with vararg keys prevents expensive recalculations during animations
- Extensible decoration interfaces allow stacking multiple visualization layers
- Analyzed million Lichess games to visualize checkmate probability heatmaps
Compose's animation system and offset modifiers can handle complex chess piece animations and multiple visualization layers without performance penalties when properly memoized.
About This Article
Zsolt Kocsi was working with chess data from a million Lichess games and needed to display it visually on a board. The data included things like knight move counts (2 in corners, 8 in center) and checkmate statistics. The challenge was doing this without slowing down the piece animations.
Kocsi built extensible SquareDecoration and BoardDecoration interfaces that could stack multiple visualization layers on top of each other. He used remember with vararg keys to make sure that datapoint calculations only ran again when the selected visualization or game state actually changed.
The memoization approach improved UI performance noticeably. It stopped expensive recalculations from happening during Compose's frame-by-frame re-renders as each animation value was interpolated.