SwiftUI 创建动画圈

Posted 2023-02-24

【中文标题】SwiftUI 创建动画圈

【英文标题】：SwiftUI Create a Animating Circle

【发布时间】：2021-03-22 14:40:44

【问题描述】：

我想创建一些这样的内容，一个闪烁的绿色圆圈，它在单一预览模式下工作

但是当我将视图放入列表时，绿色圆圈开始左右移动

struct DotView: View 
    @State var delay: Double = 0 // 1.
    @State var scale: CGFloat = 0.5
    var body: some View 
        Circle()
            .frame(width: 6, height: 6)
            .foregroundColor(Color.green)
            .scaleEffect(scale)
            .animation(Animation.easeInOut(duration: 0.6).repeatForever().delay(delay)) // 2.
            .onAppear 
                withAnimation 
                    self.scale = 1
                
            
        
    

在导航视图中使用

List 
    VStack 
        HStack 
          Text(server.name)
             .fontWeight(.bold)
             .foregroundColor(Color.primary)
             .fontWeight(.light)
             .foregroundColor(.gray)
         Spacer()
         DotView()
       
    

【问题讨论】：

我认为没有问题，它按您的预期工作！

提供的代码可以在 Xcode 12.4 / ios 14.4 中正常工作（甚至被放入 NavigationView）。你能详细说明一下吗？

【参考方案1】：

正如我在 cmets 中所写的那样，它对我来说是不可重现的，但请尝试以下...

struct DotView: View 
    var delay: Double = 0 // 1. << don't use state for injectable property

    @State private var scale: CGFloat = 0.5

    var body: some View 
        Circle()
            .frame(width: 6, height: 6)
            .foregroundColor(Color.green)
            .scaleEffect(scale)
            .animation(
                Animation.easeInOut(duration: 0.6)
                   .repeatForever().delay(delay), value: scale  // 2. << link to value
            )
            .onAppear 
                self.scale = 1    // 3. << withAnimation no needed now
            
    

【讨论】：

移动是由包装 NavigationLink 引起的，我不小心将视图放在导航链接中。这就是为什么右侧有一个披露图标的原因。感谢您尝试代码，它提醒我研究其他内容。