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.

Beta
struct ShapeView

A view that draws 2D shapes.

Beta

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.

Beta
protocol AnimatableModifier

A modifier that can create another modifier with animation.

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

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

Beta
struct AnimatablePair

A pair of animatable values, which is itself animatable.

Beta
struct EmptyAnimatableData

An empty type for animatable data.

Beta
struct AnyTransition

A type-erased transition.

Beta

Shapes

struct Rectangle

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

Beta
enum Edge

An enumeration to indicate one edge of a rectangle.

Beta
struct RoundedRectangle

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

Beta
struct Circle

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

Beta
struct Ellipse

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

Beta
struct Capsule

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

Beta
struct Path

The outline of a 2D shape.

Beta

Transformed Shapes

protocol InsettableShape

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

Beta
struct ScaledShape

A shape with a scale transform applied to it.

Beta
struct RotatedShape

A shape with a rotation transform applied to it.

Beta
struct OffsetShape

A shape with a translation offset transform applied to it.

Beta
struct SizedShape

A shape wrapper that gives the shape a fixed size to resolve itself against.

Beta
struct TransformedShape

A shape with an affine transform applied to it.

Beta
struct TrimmedShape

A fractional section of a shape, as the absolute shape result of a trimming operation.

Beta
struct StrokedShape

An absolute shape with a stroke.

Beta

Paints, Styles, and Gradients

struct Color

An environment-dependent color.

Beta
struct ImagePaint

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

Beta
struct Gradient

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

Beta
struct LinearGradient

A linear gradient.

Beta
struct AngularGradient

An angular gradient.

Beta
struct RadialGradient

A radial gradient.

Beta
struct FillStyle

A style for rasterizing vector shapes.

Beta
protocol ShapeStyle

A way to turn a shape into a view.

Beta
struct AnchoredShapeStyle

A paint adapter to override the unit space to absolute space coordinate conversion.

Beta
enum RoundedCornerStyle

Defines the shape of a rounded rectangle’s corners.

Beta

Geometry

struct GeometryProxy

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

Beta
struct GeometryReader

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

Beta
protocol GeometryEffect

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

Beta
struct Angle

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

Beta
typealias Length

The floating-point type used for all scalar geometry values.

Beta
struct Anchor

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

Beta
protocol VectorArithmetic

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

Beta

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.

Beta Software

This documentation contains preliminary information about an API or technology in development. This information is subject to change, and software implemented according to this documentation should be tested with final operating system software.

Learn more about using Apple's beta software