I have a play/pause button that changes when pressed. At the moment it just fades in and out but I would like it to perform a animation that looks like the new colour is flowing over the old one.
这是我到目前为止所拥有的:
if(meditationViewModel.timerIsRunning){
HStack{
Image(systemName: "pause")
Text("STOP")
.bold()
}
.padding()
.foregroundColor(.white)
.background(Color.red)
.cornerRadius(25)
.shadow(radius: 20)
}else{
HStack{
Image(systemName: "play")
Text("PLAY")
.bold()
}
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(25)
}
的变化meditationViewModel.timerIsRunning
发生在其他地方。
这是可能方法的演示 - 只需在文本和不透明背景之间使用某种形状(在本例中为圆形)并根据状态移动它。
使用 Xcode 12.4 / iOS 14.4 准备
注意:您可以仅使用点击手势而不是按钮并调整所有参数和颜色,但总的来说,想法保持不变
struct DemoView: View {
@State private var playing = false
var body: some View {
Button(action: { playing.toggle() }) {
HStack{
Image(systemName: playing ? "pause" : "play")
Text(playing ? "STOP" : "PLAY")
.bold()
}
.background(
Circle().fill(Color.purple)
.frame(width: 160, height: 160, alignment: .leading)
.blur(radius: 3)
.offset(x: playing ? 0 : -160, y: -40)
.animation(.easeInOut(duration: 1), value: playing)
)
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(25)
.clipped()
.shadow(radius: 20)
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)