canvas

Better performance with canvas in SwiftUI

Feb 13, 2022 · 8 min read · canvas shape path swiftui ·

It is said that use of Canvas to create complex shapes can provide better performance in SwiftUI. This article compares performance of scrolling through multiple instances of the same card pattern created using shape, canvas or image.

Animate spinning cog shape in SwiftUI

Feb 6, 2022 · 14 min read · timelineview canvas path swiftui ·

Share on:

I discovered, when playing around with the rounded-corner star shape, that the same basic shape could be used to create a cog shape. This article demonstrates the creation of the cog shape and the use of timelineview to animate its rotation in SwiftUI.

Animate a background with TimelineView in SwiftUI

Jan 30, 2022 · 7 min read · timelineview canvas path swiftui ·

Share on:

Animate a background with TimelineView in SwiftUI

TimelineView was introduced in iOS 15 to control how to change a view over time. This can be used to animate the background on a Canvas in a SwiftUI.

TimelineView to rotate shapes on a canvas

Jan 23, 2022 · 7 min read · timelineview canvas path swiftui ·

Share on:

TimelineView to rotate shapes on a canvas

TimelineView, introduced in iOS 15, can be used to change objects on a canvas over time. The article takes the star shape defined previously and animates rotating the star shape on the canvas in a SwiftUI view.

TimelineView to move a shape on a canvas

Jan 16, 2022 · 8 min read · timelineview canvas path swiftui ·

Share on:

TimelineView to move a shape on a canvas

TimelineView was introduced in iOS 15 to control how a view can change over time. This article takes the heart shape defined previously and animates by changing the path on the canvas in a SwiftUI view.

Using canvas in SwiftUI

Jan 9, 2022 · 9 min read · canvas path swiftui ·

Share on:

The canvas view provides a mechanism to draw in SwiftUI. The canvas takes GraphicsContext and size as parameters to allow immediate mode drawing within the containing frame. Here we draw system shapes as well as freeform shapes using path structure.