소개

이 기사는 Apple 공식 SwiftUI Tutorials을 참고로 내용을 정리한 기사입니다.
영어에 서투른 분이나 개요를 살짝 이해하고 싶은 분을 대상으로 본 기사를 집필하고 있습니다.

주석 주석을 넣은 프로젝트 파일은 여기(GitHub)

Drawing Paths and Shapes

Drawing Paths and Shapes

도형 그리기

정점의 좌표를 정의한 도형을 묘화하는 경우는 Path를 사용한다.
또한, 표시 화면(=부모 뷰)의 높이나 폭을 이용하는 경우는 아울러 GeometryReader를 이용한다.

정의

// 始点の指定
Path#move(to p: CGPoint)
// パラメータ
// p: 始点となる2次元座標

// 現在の座標 -> 任意の座標 への線描
Path#addLine(to p: CGPoint)
// パラメータ
// p: 終点となる2次元座標

// メジェ曲線の描画
Path#addQuadCurve(to p: CGPoint, control cp: CGPoint)
// パラメータ
// p: 終点となる2次元座標
// cp: 制御点となる2次元座標

샘플

선묘의 모습을 나타내는 그림은 다음과 같다.


메지 곡선의 묘화를 나타내는 도면은 다음과 같다.

Animating Views and Transitions

Animating Views and Transitions

가짜 애니메이션

참고: Graphics and Rendering
토글 스위치의 역할을 갖게 한 뷰에 대해서, 버튼의 상태에 따른 아이콘의 변화를 연출할 수 있다.

다만, 애니메이션 효과를 설정하지 않는 경우는 아이콘이 바뀔 뿐이므로,
움직임에 연속성을 갖게 하는 경우는 후술한다 .animation() 수식자를 사용해 애니메이션 효과를 부여한다.

아이콘 변경

// ビューの回転
View#rotationEffect(
    _ angle: Angle, 
    anchor: UnitPoint = .center
) -> some View
// パラメータ
// angle: 回転角度を表すAngleオブジェクト
// -> 通常はAngle.degrees(_ degrees: Double)メソッドで指定
// anchor: アンカーポイント(基点)

// ビューの拡大
View#scaleEffect(
    _ s: CGFloat, 
    anchor: UnitPoint = .center
) -> some View

또한 Animation#withAnimation() 메서드를 사용하여 상태 변경에 응답하여 애니메이션을 부여 할 수 있습니다.

상태 변화에 호응한 애니메이션

Animation#withAnimation<Result> (
    _ animation: Animation? = .default,
    _ body: () throws -> Result
) rethrows -> Result
// パラメータ
// animation: アニメーション効果
// body: 状態を変更するメソッド(クロージャ)

뷰에 애니메이션 효과 추가

뷰에 .animation() 한정자를 부여하여 애니메이션 효과를 부여할 수 있습니다.
또한, .animation() 한정자는 Animation 구조체 인스턴스를 인수로 취해, 타입 프로퍼티로 준비되어 있는 것도 있다.

또한 Animation 구조체를 확장 정의하고 애니메이션 효과를 정의하는 유형 메서드를 작성하여
애니메이션을 독자적으로 정의할 수 있다.

SwiftUI에서 제공되는 Animation 유형 속성은 다음과 같습니다.


속성
내용


default
보기에 따라 다름

easeIn
시작만 천천히

easeInOut
시작·종료만 천천히

easeOut
종료만 천천히

linear
등속

스프링 같은 애니메이션 효과

스프링과 같은 애니메이션을 부여하는 경우는, .animation() 수식자의 인수로서 이하의 Animation 구조체의 타입 메소드를 사용한다.
여기서, 단진동 모델을 나타내는 spring() · interactiveSpring() 메소드의 차이는, 초기치가 다른 것만으로, 사양은 동일하다.

스프링 같은 애니메이션

// 単振動モデル①
Animation.spring(
    response: Double = 0.55,
    dampingFraction: Double = 0.825,
    blendDuration: Double = 0
) -> Animation
// パラメータ
// response: ばねの解放時間[秒]  ※値が小さいほど動きが瞬発的になる
// dampingFraction: 粘性抵抗力  ※値が小さいほど跳ね返りが維持
// blendDuration: 現在の状態(跳ね返り速度)を維持したまま次のアニメーションに移行するまでの時間[秒]

// 単振動モデル②
Animation.interactiveSpring(
    response: Double = 0.15,
    dampingFraction: Double = 0.86,
    blendDuration: Double = 0.25
) -> Animation
// パラメータ
// response: ばねの解放時間[秒]  ※値が小さいほど動きが瞬発的になる
// dampingFraction: 粘性抵抗力  ※値が小さいほど跳ね返りが維持
// blendDuration: 現在の状態(跳ね返り速度)を維持したまま次のアニメーションに移行するまでの時間[秒]

// 減衰振動モデル
Animation.interpolatingSpring(
    mass: Double = 1.0, 
    stiffness: Double, 
    damping: Double, 
    initialVelocity: Double = 0.0
) -> Animation
// パラメータ
// mass: 荷重  ※ 値が小さいほど弾性力が小さくなる
// stiffness: ばねの剛性  ※値が小さいほど動きが大きくなる
// damping: 粘性抵抗力  ※値が小さいほど跳ね返りが維持
// initialVelocity: 初速

뷰 디스플레이 전환 애니메이션 (트랜지션; transition)

뷰의 표시·숨기기에 수반하는 애니메이션(=트랜지션)을 정의하는 경우, View 프로토콜의 transition() 메소드를 이용한다.

SwiftUI에서 제공되는 전환을 나타내는 AnyTransition 유형 속성은 다음 네 가지입니다.


속성
표시시
숨길 때


identity
-
-

opacity
불투명화
투명화

스케일
확대
축소

슬라이드
왼쪽에서 슬라이드
오른쪽으로 슬라이드


또한, AnyTransition 구조체를 확장 정의(extension)하여 타입 프로퍼티을 추가하는 것으로, 트랜지션 효과를 자유롭게 작성할 수 있다.

정의

뷰 전환

// トランジション効果の指定
View#transition(_ t: AnyTransition) -> some View
// パラメータ
// t: AnyTransition構造体のタイププロパティ

// 任意の方向(上下左右)から移動して表示
AnyTransition.move(edge: Edge) -> AnyTransition
// パラメータ
// edge: .top(上)/.bottom(下)/.leading(左)/.trailing(右)のいずれか

// トランジション効果の組み合わせ
AnyTransition#combined(with other: AnyTransition) -> AnyTransition
// パラメータ
// other: 追加するトランジション効果

// 表示・非表示でトランジション効果の異なる複合トランジションの生成
AnyTransition.asymmetric(
    insertion: AnyTransition,
    removal: AnyTransition
) -> AnyTransition
// パラメータ
// insertion: 表示時のトランジション効果
// removal: 非表示時のトランジション効果