SwiftUI/Animation
をテンプレートにして作成
開始行:
[[FrontPage]]
*概要 [#mc26470b]
-iOS15で変更があった
-表示非表示の切替はトランジション．形状の変化はアニメーシ...
-簡単にアニメーションが実現できる反面，微調整は難しそう
*目次 [#q368ddc5]
#contents
*トランジション [#j9831df9]
-Viewの表示/非表示の際のアニメーション
**例 [#dd3a0c41]
#highlightjs(swift)
struct ContentView: View {
@State var isHidden = false
var body: some View {
VStack {
Button("toggle") {
withAnimation {
isHidden.toggle()
}
}
.padding(.bottom)
if !isHidden {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
.transition(.opacity)
}
}
.padding()
}
}
**説明 [#o6d7403c]
-transitionモディファイアをつけることで当該Viewの表示/非...
-モディファイアの引数に指定できるものと効果は以下の通り
--slide: スライドインとスライドアウト．インは左からアウト...
--opacity: 透過アニメーション
--scale: 拡大と縮小
--scale(scale: CGFloat, anchor: UnitPoint = .center): sca...
--move(edge: Edge): 指定された方向からスライドインとアウト
--offset(CGSize): 指定された位置へ移動しながら表示/非表示...
--offset(x: CGFloat = 0, y: CGFloat = 0): 上記の絶対指定版
--identity: トランジション効果をつけない
-アニメーションの切替を行うStateの変更時にはwithAnimation...
**Combined [#p0faf42d]
-Transitionは複数個を重ねて適用することもできる
-重ねるにはAnyTransition構造体（Transitionの指定）のcombi...
#highlightjs(swift)
Image(systemName: ...)
.transition(AnyTransition.opacity.combined(with: .sc...
**Asymmetric [#r81d2fcf]
-asymmetricメソッドを使用するとViewの表示と非表示で異なる...
#highlightjs(swift)
asymmetric(insertion: AnyTransition, // 表示時の効果
removal: AnyTransition) // 非表示時...
*アニメーション [#x186ef28]
-形状や座標の変化にアニメーション効果を適用する
**例 [#h547ad85]
#highlightjs(swift)
struct ContentView: View {
@State var scale = 0.5
var body: some View {
VStack {
Spacer()
Circle()
.frame(width: 300, height: 300)
.scaleEffect(scale)
.animation(.default, value: scale)
Spacer()
Slider(value: $scale)
}
.padding()
}
}
**説明 [#k226b055]
-animationモディファイアを用いて，引数に渡した値に変化が...
-第一引数のAnimation?には以下のようなアニメーションを指定...
--default: デフォルトアニメーション
--easeIn: 遅→速
--easeOut: 速→遅
--easeInOut: 遅→速→遅
--linear: 等速
--easeIn/Out/InOut/・linear(duration: Double): アニメーシ...
--spring・interactiveSpring・interpolatingSpring: バネの...
--delay: 開始を遅らせる
--repeat: 指定回数繰り返し．第二引数のBoolで初期状態に戻...
--repeatForever: 永久的に繰り返す
--speed: アニメーションの速さの倍率を指定（デフォルト 1）
終了行:
[[FrontPage]]
*概要 [#mc26470b]
-iOS15で変更があった
-表示非表示の切替はトランジション．形状の変化はアニメーシ...
-簡単にアニメーションが実現できる反面，微調整は難しそう
*目次 [#q368ddc5]
#contents
*トランジション [#j9831df9]
-Viewの表示/非表示の際のアニメーション
**例 [#dd3a0c41]
#highlightjs(swift)
struct ContentView: View {
@State var isHidden = false
var body: some View {
VStack {
Button("toggle") {
withAnimation {
isHidden.toggle()
}
}
.padding(.bottom)
if !isHidden {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
.transition(.opacity)
}
}
.padding()
}
}
**説明 [#o6d7403c]
-transitionモディファイアをつけることで当該Viewの表示/非...
-モディファイアの引数に指定できるものと効果は以下の通り
--slide: スライドインとスライドアウト．インは左からアウト...
--opacity: 透過アニメーション
--scale: 拡大と縮小
--scale(scale: CGFloat, anchor: UnitPoint = .center): sca...
--move(edge: Edge): 指定された方向からスライドインとアウト
--offset(CGSize): 指定された位置へ移動しながら表示/非表示...
--offset(x: CGFloat = 0, y: CGFloat = 0): 上記の絶対指定版
--identity: トランジション効果をつけない
-アニメーションの切替を行うStateの変更時にはwithAnimation...
**Combined [#p0faf42d]
-Transitionは複数個を重ねて適用することもできる
-重ねるにはAnyTransition構造体（Transitionの指定）のcombi...
#highlightjs(swift)
Image(systemName: ...)
.transition(AnyTransition.opacity.combined(with: .sc...
**Asymmetric [#r81d2fcf]
-asymmetricメソッドを使用するとViewの表示と非表示で異なる...
#highlightjs(swift)
asymmetric(insertion: AnyTransition, // 表示時の効果
removal: AnyTransition) // 非表示時...
*アニメーション [#x186ef28]
-形状や座標の変化にアニメーション効果を適用する
**例 [#h547ad85]
#highlightjs(swift)
struct ContentView: View {
@State var scale = 0.5
var body: some View {
VStack {
Spacer()
Circle()
.frame(width: 300, height: 300)
.scaleEffect(scale)
.animation(.default, value: scale)
Spacer()
Slider(value: $scale)
}
.padding()
}
}
**説明 [#k226b055]
-animationモディファイアを用いて，引数に渡した値に変化が...
-第一引数のAnimation?には以下のようなアニメーションを指定...
--default: デフォルトアニメーション
--easeIn: 遅→速
--easeOut: 速→遅
--easeInOut: 遅→速→遅
--linear: 等速
--easeIn/Out/InOut/・linear(duration: Double): アニメーシ...
--spring・interactiveSpring・interpolatingSpring: バネの...
--delay: 開始を遅らせる
--repeat: 指定回数繰り返し．第二引数のBoolで初期状態に戻...
--repeatForever: 永久的に繰り返す
--speed: アニメーションの速さの倍率を指定（デフォルト 1）
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
