【问题标题】:Having easeIn animation and then scale animation in a sequence as the scale animation repeats forever拥有 easeIn 动画,然后随着缩放动画永远重复而按顺序缩放动画
【发布时间】:2020-08-22 11:50:25
【问题描述】:

我想为文本信息和 SF 符号设置一个 easeIn/moveUp 动画 onAppear。此后,我只希望 SF 符号永远按比例放大和缩小。目前,我已经设法永远按比例缩小,但是当我设法链接时,easeIn/moveUp 动画也永远重复自己,它应该只在出现时重复一次。

这是我的应用程序表示的样子:

我在下面包含了一个 pin 动画代码的 sn-p:

                HStack (spacing: 20) {
                    Image(systemName: "pin")
                        .foregroundColor(.red)
                        .font(.title2)
                        .padding(.trailing, 5)
                        .scaleEffect(animationAmount)
                        .onAppear {
                            let baseAnimation = Animation.easeInOut(duration: 1)
                            let repeated = baseAnimation.repeatForever(autoreverses: true)
                            return withAnimation(repeated) {
                                self.animationAmount = 1.5
                            }
                        }
                    VStack (alignment: .leading) {
                        Text("Pin favourites").fontWeight(.semibold)
                        Text("You can pin your favourite content on all devices")
                            .foregroundColor(.gray)
                    }
                    Spacer()
                }//HStack 2

完整代码在以下页面:SwiftUI - in sheet have a fixed continue button that is not scrollable

【问题讨论】:

    标签: ios swift xcode swiftui


    【解决方案1】:

    你可以加入带值的动画,如下所示

    .scaleEffect(animationAmount)
    .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true), value: animationAmount)
    .onAppear {
        self.animationAmount = 1.5
    }
    

    此外,由于现在动画和状态是唯一连接的,不会与其他动画/状态冲突,您可以将最后两个修饰符移动到最顶部的容器(而不是重复三次)

    例如这里:

    }//VStack for 3 criterias
    .padding([.leading, .trailing], 20)
    .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true), value: animationAmount)
    .onAppear {
        self.animationAmount = 1.5
    }
    

    【讨论】:

      猜你喜欢
      • 2014-06-12
      • 2017-03-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多