分层 iOS 动画答案

【问题标题】：Layering iOS Animations分层 iOS 动画
【发布时间】：2020-08-20 20:12:31
【问题描述】：

我在为我的视频重新编码按钮分层 iOS 动画时遇到了一些问题。我在其他标准录制按钮之后对其进行了建模，我希望它以实心圆开始，然后按下按钮，转换为不透明度脉冲的圆角矩形。

问题是我以某种方式对动画进行了排序，以使它们全部同时应用。

我已经尝试对这些动画重新排序，但无法确定哪种排序可以达到我想要的范围。

import SwiftUI

struct ContentView: View {
    @State var recordComplete = false
    @State private var rCorner: CGFloat = 100
    @State private var rWidth: CGFloat = 70
    @State private var rHeight: CGFloat = 70
    @State private var opacityVal = 1.0
    
    var body: some View {
        HStack{
            Button(action: {
                self.rCorner = self.rCorner == 100 ? 12 : 100
                self.rWidth = self.rWidth == 70 ? 45 : 70
                self.rHeight = self.rHeight == 70 ? 45 : 70
                self.recordComplete.toggle()
                
            }) {
                ZStack{
                    Circle()
                        .stroke(Color.red, lineWidth: 6)
                        .frame(width:85, height: 85)
                
                    
                    RoundedRectangle(cornerRadius: rCorner)
                        .fill(Color.red)
                        .frame(width: rWidth, height: rHeight)
                        .opacity(opacityVal)
                        .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)).onAppear{ self.opacityVal = 0.3 }
                    
                }
                .padding(.vertical, 25)
                
            }
        }.animation(.spring(response: 0.5, dampingFraction: 2, blendDuration: 0.5))
    }
}

一如既往地感谢您对这个问题的帮助！

【问题讨论】：

标签： ios swift animation swiftui

【解决方案1】：

这是一个可能的解决方案 - 主要思想是按值分隔动画并使它们连续。使用 Xcode 12 / iOS 14 测试

struct ContentView: View {
    @State var recordComplete = false
    @State private var rCorner: CGFloat = 100
    @State private var rWidth: CGFloat = 70
    @State private var rHeight: CGFloat = 70
    @State private var opacityVal = 1.0

    var body: some View {
        HStack{
            Button(action: {
                self.rCorner = self.rCorner == 100 ? 12 : 100
                self.rWidth = self.rWidth == 70 ? 45 : 70
                self.rHeight = self.rHeight == 70 ? 45 : 70

                self.recordComplete.toggle()
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    self.opacityVal = self.recordComplete ? 0.3 : 1.0
                }
            }) {
                ZStack{
                    Circle()
                        .stroke(Color.red, lineWidth: 6)
                        .frame(width:85, height: 85)


                    RoundedRectangle(cornerRadius: rCorner)
                        .fill(Color.red)
                        .frame(width: rWidth, height: rHeight)
                        .opacity(opacityVal)
                        .animation(
                            self.recordComplete ?
                                Animation.easeInOut(duration: 1).repeatForever(autoreverses: true) :
                                Animation.default,
                            value: opacityVal)
                }
                .padding(.vertical, 25)

            }
        }.animation(.spring(response: 0.5, dampingFraction: 2, blendDuration: 0.5), value: rCorner)
    }
}

【讨论】：