انیمیشن های صریح (Explicit Animations)
«انیمیشن صریح (Explicit Animation)» یعنی خودت زمان اجرا را تعیین کنی. با تابع withAnimation می گویی چه زمانی و چگونه انیمیت شود. مثل وقتی دکمه می زنی و آیکن دقیق می چرخد.
مفهوم پایه انیمیشن صریح
در انیمیشن صریح، تغییر state را داخل withAnimation(...) می نویسی. بنابراین همه تغییرهای وابسته، همزمان و کنترل پذیر انیمیت می شوند.
نکته: وقتی زمان، منحنی، یا مدت مهم است، انیمیشن صریح انتخاب بهتری است.
سینتکس با withAnimation
الگو: withAnimation(.easeInOut) { state.toggle() }. هر modifier وابسته به state، در همین بازه انیمیت می شود.
مثال 1: چرخش با دکمه
با زدن دکمه، آیکن 180 درجه می چرخد. کنترل زمان در دست توست.
import SwiftUI
struct ExplicitAnimDemo: 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 {
ExplicitAnimDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
چون افزایش زاویه داخل withAnimation است، چرخش نرم اجرا می شود.
مثال 2: چند خصوصیت در یک حرکت
با یک تغییر state می توانی چرخش، مقیاس، رنگ و شفافیت را همزمان انیمیت کنی.
import SwiftUI
struct ExplicitMultiDemo: View {
@State private var on = false
var body: some View {
VStack(spacing: 16) {
Image(systemName: "star.fill")
.font(.system(size: 48))
.foregroundStyle(on ? .yellow : .gray)
.scaleEffect(on ? 1.3 : 1.0)
.rotationEffect(.degrees(on ? 180 : 0))
.opacity(on ? 1.0 : 0.6)
Button(on ? "Reset" : "Animate") {
withAnimation(.easeInOut(duration: 0.6)) {
on.toggle()
}
}
}
}
}
struct ContentView: View {
var body: some View {
ExplicitMultiDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
یک بلاک withAnimation کافی است تا همه تغییرها هماهنگ اجرا شوند.
گام های عملی پیاده سازی
- state مناسب تعریف کن.
- modifierهای وابسته به state را اعمال کن.
- تغییر state را داخل
withAnimation(...)قرار بده. - مدت و منحنی مناسب را انتخاب کن.
نکته: برای ورود و خروج نما، صفحه ترنزیشن ها را ببین. برای شروع ساده تر، انیمیشن ضمنی را مطالعه کن.
برای دید کامل موضوع، بخش انیمیشن SwiftUI را هم بررسی کن. در آنجا لینک «انیمیشن صریح» نیز آمده است.
جمع بندی سریع
- انیمیشن صریح زمان اجرا را تعیین می کند.
withAnimationهمه تغییرها را هماهنگ می کند.- برای کنترل دقیق، از آن استفاده کن.
- برای ورود/خروج، سراغ ترنزیشن برو.