انیمیشن ها در SwiftUI (SwiftUI Animations)
در SwiftUI، «انیمیشن (Animation)» تغییر نرم ظاهر است. همچنین «ترنزیشن (Transition)» ورود و خروج نماست. با withAnimation تغییرات را انیمیت کن. با .transition اثر ورود/حذف بده. این صفحه کوتاه و عملی است.
مرور سریع: انیمیشن و ترنزیشن
برای تغییرات وضعیت، از withAnimation کمک بگیر. برای ورود و خروج، از .transition استفاده کن. انیمیشن ضمنی (Implicit) خودکار اجرا می شود. انیمیشن صریح (Explicit) دقیقاً همان جا اجرا می شود.
نکته: برای کارهای ساده، انیمیشن ضمنی کافی است. برای کنترل زمان و نوع، از انیمیشن صریح استفاده کن.
انیمیشن ضمنی (Implicit Animations)
در انیمیشن ضمنی، یک .animation(..., value: state) به نما می چسبانی. هر وقت state تغییر کند، نما خودکار انیمیت می شود. مثل وقتی اندازه دایره تغییر می کند.
import SwiftUI
struct ImplicitDemo: View {
@State private var on = false
var body: some View {
Circle()
.fill(on ? .green : .gray)
.frame(width: on ? 120 : 60, height: on ? 120 : 60)
.animation(.spring(), value: on)
.onTapGesture {
on.toggle()
}
}
}
struct ContentView: View {
var body: some View {
ImplicitDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
در این نمونه، رنگ و اندازه با تغییر وضعیت بولی، با فنر .spring() انیمیت می شود.
انیمیشن صریح (Explicit Animations)
در انیمیشن صریح، تغییر وضعیت را داخل withAnimation(...) می نویسی. این کار کنترل کامل می دهد. مانند چرخاندن آیکن با دکمه.
import SwiftUI
struct ExplicitDemo: View {
@State private var angle = 0.0
var body: some View {
VStack(spacing: 12) {
Image(systemName: "arrow.2.circlepath")
.rotationEffect(.degrees(angle))
Button("Rotate") {
withAnimation(.easeInOut) {
angle += 180
}
}
}
}
}
struct ContentView: View {
var body: some View {
ExplicitDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
اینجا چرخش فقط وقتی دکمه زده می شود انیمیت می شود. چون تغییر داخل withAnimation است.
ترنزیشن ها (Transitions)
ترنزیشن روی ورود و خروج نما اثر می گذارد. از .transition(.slide) یا ترکیب هایی مثل .opacity.combined(with: .scale) استفاده کن. تغییر نمایش را داخل withAnimation بگذار.
import SwiftUI
struct TransitionDemo: View {
@State private var show = false
var body: some View {
VStack(spacing: 12) {
Button(show ? "Hide" : "Show") {
withAnimation(.easeInOut) {
show.toggle()
}
}
if show {
Text("Hello")
.padding(12)
.background(Color.blue.opacity(0.1))
.cornerRadius(8)
.transition(.opacity.combined(with: .scale))
}
}
}
}
struct ContentView: View {
var body: some View {
TransitionDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: برای موضوعات رابط کاربری، صفحه List Styles را ببین. برای پیمایش چندصفحه ای، TabView را بررسی کن. برای جستجوی «انیمیشن SwiftUI» نمونه ها را مقایسه کن.
جمع بندی سریع
- انیمیشن ضمنی، ساده و خودکار است.
- انیمیشن صریح، کنترل دقیق می دهد.
- ترنزیشن برای ورود و خروج نماست.
- از
withAnimationبرای زمان بندی استفاده کن. - ترکیب
.opacityو.scaleبسیار کاربردی است.