列表行平滑动画

时间:2019-11-06 06:34:25

标签: animation swiftui

我有一个要显示view的列表。当我点击该行时,以下代码会产生一个生涩的animation。我想进行修改以创建更平滑的动画。有没有一种方法可以平滑地对List进行更改动画?

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(0..<10){index in
             ListItem(title: index)
        }
    }
}

struct ListItem: View {
    @State var title: Int
    @State var bOpen = false

    var body: some View {
        VStack{
            Text("\(title+2) items")
            withAnimation{
                self.bOpen ? Options() : nil
            }
        }.onTapGesture {
            self.bOpen.toggle()
        }
    }
}

struct Options: View {
    var body: some View {
        HStack {
            Image(systemName:"circle.fill")
            Image(systemName:"star")
        }

    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2 个答案:

答案 0 :(得分:1)

.animation()上使用ListItem修饰符

like:

ListItem(title: index).animation(.default)

您还可以将其应用于VStack本身(如果您设法为所有ListItem更改设置动画)。

不需要withAnimation

答案 1 :(得分:0)

如果没有其他项目,则带有listItem的其他答案就足够了。

但是,具体地说,您在listItem中还有一些其他动画项目,您可以执行以下操作:

 var body: some View {
    VStack{
        Text("\(title+2) items")
        self.bOpen ? Options().transition(AnyTransition.move(edge: .top)) : nil
    }.onTapGesture {
    withAnimation{
    self.bOpen.toggle()}
    }
}
  1. 更正放置“ withAnimation”的位置
  2. 采取一种和平的transtion行动。