如何解决分层iOS动画
我在为视频重新编码按钮分层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))
}
}
感谢您一如既往的帮助!
解决方法
这是一个可能的解决方案-主要思想是按值分隔动画并将其设置为串行。经过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)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。