Post

Replies

Boosts

Views

Activity

How to animate arbitrary changes to a SwiftUI Path?
In UIKit/Core Animation, I can create a CABasicAnimation that lets me animate changes to the Path in a CAShapeLayer. As long as the new path has the same number of control points as the previous path, Core Animation creates a smooth animation of the changes. It's also possible to animate things like the start and end of the stroke, but I'm talking about arbitrary changes to the path. In SwiftUI, it's pretty easy to animate the stroke so that it looks like it's being drawn by a pen. I'm not talking about that. Say I have a closed path with N vertexes and some of the vertexes are connected with straight lines, while others are connected by quadratic or cubic Bézier curves. I want to move the control points around in arbitrary ways, and change the control points of the Bézier curves. I have a simple Storyboard based project on Github that creates closed N-sided polygons with either rounded or sharp corners, it manages an array of PolygonPoint structs that look like this: public struct PolygonPoint { let point: CGPoint let isRounded: Bool let customCornerRadius: CGFloat? init(point: CGPoint, isRounded: Bool, customCornerRadius: CGFloat? = nil) { self.point = point self.isRounded = isRounded self.customCornerRadius = customCornerRadius } init(previousPoint: PolygonPoint, isRounded: Bool) { self.init(point: previousPoint.point, isRounded: isRounded, customCornerRadius: previousPoint.customCornerRadius) } } The sample app builds a square out of an array of PolygonPoints, and then presents 4 swtiches that controls whether each vertex is rounded or not. It builds a polygon using the CGPath addArc(tangent1End:tangent2End:radius:transform:) function, with a 0 radius for sharp corners and a non-zero corner radius for rounded corners. It wraps changes to the path in a CABasicAnimation, and the result is a simple animation. The project can be found on Github here: RoundedConerPolygon project As a learning exercise, I'd like to convert this project to SwiftUI. The Swift/UIKit project creates CGPaths, and there is an initializer for the Swift Path object that takes a CGPath, so that part is easy. However, SwiftUI wants to observe changes to a simple scalar, or to some sort of animatableData. I've tried to make my PolygonPoint struct conform to VectorArithmetic, but no joy. My attempt is here: RoundedCornerPolygonSwiftUI This seems like it should be easy, but I can't figure out how to make it work. Is there a way to have SwiftUI animate changes to a Path's underlying CGPath like you can in UIKit? I could probably wrap a UIKIt custom view in SwiftUI and do it that way, but I'm trying to learn how to do it "The SwifTUI way."
0
0
760
Oct ’23