如何解决SwiftUI 按钮的 Aura 动画
如何制作下面的动画?触摸按钮时出现灵气,整个盒子有点像手指的重量一样收缩。
struct ContentView: View {
var body: some View {
Button(action: {
},label: {
Image(systemName: "camera")
.font(.title)
.opacity(1)
})
.padding(.horizontal,20)
.frame(height: 80)
.background(Color.yellow.opacity(0.2).clipShape(Circle()))
}
}
解决方法
这是一个使用 ZStack 和 scaleEffect 的解决方案。按下时缩小图标并在完成时恢复。与圆圈相反,按下时缩放并在完成时恢复。
struct AuraButtonView: View {
// automatically resets gesture when complete
@GestureState private var tapped = false
// max size
@State var fullSize : CGFloat = 72
// size when button pressed
@State var scale : CGFloat = 0.8
// camera icon,shrink when pressed,restore on complete
var icon : some View {
Image(systemName: "camera")
.font(.title)
.scaleEffect(tapped ? CGSize(width: scale,height: scale) : CGSize(width: 1,height: 1))
.animation(.easeInOut)
}
// yellow circle,grow when pressed,restore on complete
var background : some View {
Circle()
.foregroundColor(tapped ? Color.yellow.opacity(0.2) : Color.clear)
.frame(width: tapped ? fullSize : 0,height: tapped ? fullSize : 0,alignment: Alignment(horizontal: .center,vertical: .center))
.animation(.easeInOut)
}
// stack the icon on the circle and use the zstack as the gesture
var body: some View {
ZStack(alignment: Alignment(horizontal: .center,vertical: .center),content: {
background
icon
})
.frame(width: fullSize,height: fullSize)
.gesture(DragGesture(minimumDistance: 0)
.updating($tapped) { (_,tapped,_) in
tapped = true
})
}
}
struct AuraButtonView_Previews: PreviewProvider {
static var previews: some View {
AuraButtonView()
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。