Drawing and Animation

Enhance your views with colors, shapes, and shadows, and customize animated transitions between view states.

Overview

Use drawing tools to combine shapes or define custom paths for shapes of your own design. Apply styles from environment-aware colors to rich gradients to the foreground, background, and outline of your shapes.

Topics

Essentials

Drawing Paths and Shapes

Users receive a badge whenever they visit a landmark in their list. Of course, for a user to receive a badge, you’ll need to create one. This tutorial takes you through the process of creating a badge by combining paths and shapes, which you then overlay with another shape that represents the location.

Building Custom Views in SwiftUI

Create a custom view with data driven transitions and animations in SwiftUI.

protocol Shape

A 2D shape that you can use when drawing a view.

Animation

Animating Views and Transitions

When using SwiftUI, you can individually animate changes to views, or to a view’s state, no matter where the effects are. SwiftUI handles all the complexity of these combined, overlapping, and interruptible animations for you.

protocol Animatable

A type for animating views.

protocol AnimatableModifier

A modifier that can create another modifier with animation.

func withAnimation<Result>(Animation?, () -> Result) -> Result

Returns the result of recomputing the view’s body with the provided animation.

struct AnimatablePair

A pair of animatable values, which is itself animatable.

struct EmptyAnimatableData

An empty type for animatable data.

struct AnyTransition

A type-erased transition.

Shapes

struct Rectangle

A rectangular shape aligned inside the frame of the view containing it.

enum Edge

An enumeration to indicate one edge of a rectangle.

struct RoundedRectangle

A rectangular shape with rounded corners, aligned inside the frame of the view containing it.

struct Circle

A circle centered on the frame of the view containing it.

struct Ellipse

An ellipse aligned inside the frame of the view containing it.

struct Capsule

A capsule shape aligned inside the frame of the view containing it.

struct Path

The outline of a 2D shape.

Transformed Shapes

protocol InsettableShape

A shape type that is able to inset itself to produce another shape.

struct ScaledShape

A shape with a scale transform applied to it.

struct RotatedShape

A shape with a rotation transform applied to it.

struct OffsetShape

A shape with a translation offset transform applied to it.

struct TransformedShape

A shape with an affine transform applied to it.

Paints, Styles, and Gradients

struct Color

An environment-dependent color.

struct ImagePaint

A paint type that repeats an image over the infinite plane.

struct Gradient

A color gradient represented as an array of color stops, each having a parametric location value.

struct LinearGradient

A linear gradient.

struct AngularGradient

An angular gradient.

struct RadialGradient

A radial gradient.

struct FillStyle

A style for rasterizing vector shapes.

protocol ShapeStyle

A way to turn a shape into a view.

enum RoundedCornerStyle

Defines the shape of a rounded rectangle’s corners.

Geometry

struct GeometryProxy

A proxy for access to the size and coordinate space (for anchor resolution) of the container view.

struct GeometryReader

A container view that defines its content as a function of its own size and coordinate space.

protocol GeometryEffect

An effect that changes the visual appearance of a view, largely without changing its ancestors or descendents.

struct Angle

A geometric angle whose value you access in either radians or degrees.

struct Anchor

An opaque value derived from an anchor source and a particular view.

protocol VectorArithmetic

A type that can serve as the animatable data of an animatable type.

See Also

User Interface

Views and Controls

Present your content onscreen and handle user interactions.

View Layout and Presentation

Combine views in stacks, generate groups and lists of views dynamically, and define view presentations and hierarchy.

Framework Integration

Integrate SwiftUI views into existing apps, and embed AppKit, UIKit, and WatchKit views and controllers into SwiftUI view hierarchies.