我刚刚切换到xcode的GM版本,从那时起,我遇到了一个我以前从未遇到过的问题。
我创建了问题的简化版本:
我有一个内部包含多个元素的滚动视图。
我在蓝色正方形上添加了动画状态,但是我印象中元素没有动画并且残酷地更改了状态。
我尝试了scrollview(紫色正方形)之外的元素,并且可以正常工作
我不明白为什么动画不能使某人有想法吗?
@State var Enter = false
var body: some View {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
Rectangle()
.foregroundColor(Color.red)
.frame(width: 80, height: 80, alignment: .center)
Button(action: {
withAnimation(.easeInOut(duration: 1.12)) {
self.Enter = true
}
}) {
Rectangle()
.foregroundColor(Color.blue)
.frame(width: 80, height: 80, alignment: .center)
.opacity(self.Enter ? 0 : 1)
}
//.padding(.horizontal, self.Enter ? 50 : 10)
Rectangle()
.foregroundColor(Color.green)
.frame(width: 80, height: 80, alignment: .center)
.offset(x: self.Enter ? 30 : 0 , y: 0)
Rectangle()
.foregroundColor(Color.red)
.frame(width: 80, height: 80, alignment: .center)
}
.padding(.leading, 67 )
.padding(.trailing, 110)
// .padding(.top, (screen.height)/81.2)
.padding(.bottom, 10)
}
HStack {
Rectangle()
.foregroundColor(Color.purple)
.frame(width: 80, height: 80, alignment: .center)
.offset(x: self.Enter ? 80 : 0 , y: 0)
}
}
}
答案 0 :(得分:1)
在这些情况下,使用隐式副显式动画通常对我有用。这应该可以满足您的要求:(在Xcode 11 GM种子中可用)
更新:GM种子显然没有通过滚动视图内的动画。编辑以将动画应用于HStack和单独的紫色框
struct Square: View {
let color: Color
var body: some View {
Rectangle()
.fill(color)
.frame(width: 80, height: 80)
}
}
struct SquareAnimation: View {
@State private var enter = false
var body: some View {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
Square(color: .red)
Square(color: .blue)
.opacity(self.enter ? 0.25 : 1)
.onTapGesture {
self.enter.toggle()
}
Square(color: .green)
.offset(x: self.enter ? 30 : 0)
Square(color: .red)
}
.animation(.easeInOut)
}
Square(color: .purple)
.offset(x: self.enter ? 80 : 0)
.animation(.easeInOut)
}
}
}
答案 1 :(得分:1)
我也遇到同样的问题。 smr解决方案有所帮助。但是,我无法获得显示/隐藏视图动画。以下是一个示例:
struct Test: View {
@State var showView = false
var body: some View {
ScrollView {
Button(action: {
self.showView.toggle()
}) {
Text("Toggle View")
}
if showView {
Text("Some View")
}
}
.animation(.easeInOut)
}
}