我想創建一個影片，就像這個視頻中展示的那樣。
我已經創建了一個顯示當前時間的視圖，分為三個框，但我不知道如何為其設定影片。謝謝您的幫助！
這是我的環境物件，它獲取當前時間：
import SwiftUI
class TimeManager: ObservableObject {
@Published var date = Date()
@Published var oldDate = Date()
func timeString(timeFormat: String, date: Date) -> String {
let formatter = DateFormatter()
formatter.dateFormat = timeFormat
let time = formatter.string(from: date)
return time
}
// update time
var updateTimer: Timer {
withAnimation(.spring()){
Timer.scheduledTimer(withTimeInterval: 1, repeats: true,
block: {_ in
self.oldDate = self.date
self.date = Date()
})
}
}
}
這是視圖，它將時間拆分為方框：
struct BoxesView: View {
@EnvironmentObject var timeManager: TimeManager
var body: some View {
HStack(spacing: 30) {
let timeElements = splitUpTime()
ForEach(timeElements, id: \.self) { timeElement in
SingleBoxElement(text: timeElement)
}
}.ignoresSafeArea()
}
func splitUpTime() -> Array<String> {
let splitDate = timeManager.timeString(timeFormat: "HH:mm:ss", date: timeManager.date).components(separatedBy: ":")
return splitDate
}
}
struct SingleBox: View {
let text: String
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 12)
.foregroundColor(.pink)
Text(text)
.foregroundColor(.white)
.font(.title)
.fontWeight(.semibold)
.monospacedDigit()
}.frame(width: 90, height: 90)
}
}
uj5u.com熱心網友回復：
這是一個簡單的例子——
每次點擊“下一步”按鈕時，它都會增加值……將“舊”字串從底部向下滑動，將“新”字串從頂部向下滑動：
import SwiftUI
struct TextTransition: View {
@State private var secondsValue = "21"
@State private var seconds: Int = 21
var body: some View {
VStack (spacing: 50) {
ZStack {
Text(secondsValue)
.font(.title)
.fontWeight(.semibold)
.monospacedDigit()
.foregroundColor(Color.white)
.frame(width: 60, height: 40)
.transition(AnyTransition.asymmetric(insertion: .move(edge: .top), removal: .move(edge: .bottom)))
.id("Seconds" secondsValue)
}
.background(Color.red)
.frame(width: 60, height: 40)
.clipped()
Button("Next") {
seconds = 1
withAnimation (.easeInOut(duration: 0.5)) {
self.secondsValue = "\(seconds)"
}
}
}
}
}
現在您需要做的就是實作您TimeManager的更新secondsValue（以及它們的 Text 元素的分鐘和小時值）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/526008.html
標籤：IOS迅速动画迅捷钟