我一直在使用相同的微光修改了一段时间了。我最近刚刚更新到新的iOS和微光修改器不再工作。我确保我的代码中没有任何东西被贬低。我不确定为什么它不再起作用,我想这是由于iOS动画的方式有了新的更新。
import SwiftUI
public struct Shimmer: ViewModifier {
let animation: Animation
@State private var phase: CGFloat = 0
public init(animation: Animation = Self.defaultAnimation) {
self.animation = animation
}
public static let defaultAnimation = Animation.linear(duration: 1.5).repeatForever(autoreverses: false)
public init(duration: Double = 1.5, bounce: Bool = false, delay: Double = 0) {
self.animation = .linear(duration: duration)
.repeatForever(autoreverses: bounce)
.delay(delay)
}
public func body(content: Content) -> some View {
content
.modifier(
AnimatedMask(phase: phase).animation(animation)
)
.onAppear { phase = 0.8 }
}
struct AnimatedMask: AnimatableModifier {
var phase: CGFloat = 0
var animatableData: CGFloat {
get { phase }
set { phase = newValue }
}
func body(content: Content) -> some View {
content
.mask(GradientMask(phase: phase).scaleEffect(4))
}
}
struct GradientMask: View {
let phase: CGFloat
let centerColor = Color.black
let edgeColor = Color.black.opacity(0.3)
@Environment(\.layoutDirection) private var layoutDirection
var body: some View {
let isRightToLeft = layoutDirection == .rightToLeft
LinearGradient(
gradient: Gradient(stops: [
.init(color: edgeColor, location: phase),
.init(color: centerColor, location: phase + 0.1),
.init(color: edgeColor, location: phase + 0.2)
]),
startPoint: isRightToLeft ? .bottomTrailing : .topLeading,
endPoint: isRightToLeft ? .topLeading : .bottomTrailing
)
}
}
}
public extension View {
@ViewBuilder func shimmering(
active: Bool = true, duration: Double = 1.5, bounce: Bool = false, delay: Double = 0
) -> some View {
if active {
self.modifier(Shimmer(duration: duration, bounce: bounce, delay: delay))
} else {
self
}
}
@ViewBuilder func shimmering(active: Bool = true, animation: Animation = Shimmer.defaultAnimation) -> some View {
if active {
self.modifier(Shimmer(animation: animation))
} else {
self
}
}
}
1条答案
按热度按时间agyaoht71#
AnimatableModifier
已弃用。这不需要AnimatableMask
。您可以只使用带有value:
参数的animation
修改器来设置蒙版的动画也就是说,我不知道为什么
scaleEffect(3)
或者梯度的逻辑是如何停止工作的。scaleEffect(3)
只是让整个渐变变得非常大,你根本看不清动画。如果删除scaleEffect
,动画看起来也不那么好。也许梯度停止工作的方式在某个时候改变了。
我假设this是你得到代码的地方。看看这个repo的历史,作者从动画停止变成了动画渐变的开始和结束点,这对我来说更有意义,实际上看起来很不错。
代码如下: