💡我使用一个简单的动画,因为它是相同的一个你已经提供
方法1:将修改量应用于条件视图
将条件视图包装在一组中,并根据如下条件应用模糊:
Group { // 👈 Wrap the condition
if showDetails {
Text("This is the label")
.transition(.opacity.combined(with: .offset(x: -50)))
}
}
.blur(radius: showDetails ? 0 : 10) // 👈 Use the modifier on the group
Demo
Method 2: Custom Transition
您可以使用自定义AnimatableModifier
创建自定义过渡.
@Baffo rasta在我还没有来得及完成我的答案之前就提到了this method个,这应该是我的功劳,但以下是我的,这是他的某种重构版本:
struct Blur: AnimatableModifier {
init(radius: Double = 0) { animatableData = radius }
var animatableData: Double
func body(content: Content) -> some View {
content.blur(radius: animatableData)
}
}
extension AnyTransition {
static var blur: AnyTransition {
AnyTransition.modifier(active: Blur(radius: 10.0), identity: .init())
}
}
用途:
.opacity
.combined(with: .offset(x: -50))
.combined(with: .blur) // 👈 Combine with other transitions