Clean up path animation

pull/242/head
nielsandriesse 5 years ago
parent 106596e3e4
commit b5f5ffec7d

@ -5,14 +5,16 @@ extension UIView {
let size: CGFloat let size: CGFloat
let color: UIColor let color: UIColor
let isAnimated: Bool let isAnimated: Bool
let animationDuration: TimeInterval
let offset: CGSize let offset: CGSize
let opacity: Float let opacity: Float
let radius: CGFloat let radius: CGFloat
init(size: CGFloat, color: UIColor, isAnimated: Bool, offset: CGSize = CGSize(width: 0, height: 0.8), opacity: Float = isLightMode ? 0.4 : 1, radius: CGFloat) { init(size: CGFloat, color: UIColor, isAnimated: Bool, animationDuration: TimeInterval = 0.25, offset: CGSize = CGSize(width: 0, height: 0.8), opacity: Float = isLightMode ? 0.4 : 1, radius: CGFloat) {
self.size = size self.size = size
self.color = color self.color = color
self.isAnimated = isAnimated self.isAnimated = isAnimated
self.animationDuration = animationDuration
self.offset = offset self.offset = offset
self.opacity = opacity self.opacity = opacity
self.radius = radius self.radius = radius
@ -26,7 +28,7 @@ extension UIView {
let pathAnimation = CABasicAnimation(keyPath: "shadowPath") let pathAnimation = CABasicAnimation(keyPath: "shadowPath")
pathAnimation.fromValue = layer.shadowPath pathAnimation.fromValue = layer.shadowPath
pathAnimation.toValue = newPath pathAnimation.toValue = newPath
pathAnimation.duration = 0.25 pathAnimation.duration = configuration.animationDuration
layer.add(pathAnimation, forKey: pathAnimation.keyPath) layer.add(pathAnimation, forKey: pathAnimation.keyPath)
} }
layer.shadowPath = newPath layer.shadowPath = newPath
@ -35,7 +37,7 @@ extension UIView {
let colorAnimation = CABasicAnimation(keyPath: "shadowColor") let colorAnimation = CABasicAnimation(keyPath: "shadowColor")
colorAnimation.fromValue = layer.shadowColor colorAnimation.fromValue = layer.shadowColor
colorAnimation.toValue = newColor colorAnimation.toValue = newColor
colorAnimation.duration = 0.25 colorAnimation.duration = configuration.animationDuration
layer.add(colorAnimation, forKey: colorAnimation.keyPath) layer.add(colorAnimation, forKey: colorAnimation.keyPath)
} }
layer.shadowColor = newColor layer.shadowColor = newColor

@ -132,7 +132,7 @@ final class PathVC : BaseVC {
// MARK: General // MARK: General
private func getPathRow(title: String, subtitle: String?, location: LineView.Location, dotAnimationStartDelay: Double, dotAnimationRepeatInterval: Double) -> UIStackView { private func getPathRow(title: String, subtitle: String?, location: LineView.Location, dotAnimationStartDelay: Double, dotAnimationRepeatInterval: Double) -> UIStackView {
let lineView = LineView(location: location, dotAnimationStartDelay: dotAnimationStartDelay, dotAnimationRepeatInterval: dotAnimationRepeatInterval) let lineView = LineView(location: location, dotAnimationStartDelay: dotAnimationStartDelay, dotAnimationRepeatInterval: dotAnimationRepeatInterval)
lineView.set(.width, to: Values.pathRowDotSize) lineView.set(.width, to: Values.pathRowExpandedDotSize)
lineView.set(.height, to: Values.pathRowHeight) lineView.set(.height, to: Values.pathRowHeight)
let titleLabel = UILabel() let titleLabel = UILabel()
titleLabel.textColor = Colors.text titleLabel.textColor = Colors.text
@ -190,7 +190,9 @@ private final class LineView : UIView {
private lazy var dotView: UIView = { private lazy var dotView: UIView = {
let result = UIView() let result = UIView()
result.layer.cornerRadius = Values.pathRowDotSize / 2 result.layer.cornerRadius = Values.pathRowDotSize / 2
let glowConfiguration = UIView.CircularGlowConfiguration(size: Values.pathRowDotSize, color: Colors.accent, isAnimated: true, radius: isLightMode ? 2 : 4) let glowRadius: CGFloat = isLightMode ? 1 : 2
let glowColor = isLightMode ? UIColor.black.withAlphaComponent(0.4) : UIColor.black
let glowConfiguration = UIView.CircularGlowConfiguration(size: Values.pathRowDotSize, color: glowColor, isAnimated: true, animationDuration: 0.5, radius: glowRadius)
result.setCircularGlow(with: glowConfiguration) result.setCircularGlow(with: glowConfiguration)
result.backgroundColor = Colors.accent result.backgroundColor = Colors.accent
return result return result
@ -254,17 +256,19 @@ private final class LineView : UIView {
private func expandDot() { private func expandDot() {
let newSize = Values.pathRowExpandedDotSize let newSize = Values.pathRowExpandedDotSize
let newGlowRadius: CGFloat = isLightMode ? 6 : 8 let newGlowRadius: CGFloat = isLightMode ? 4 : 6
updateDotView(size: newSize, glowRadius: newGlowRadius) let newGlowColor = Colors.accent.withAlphaComponent(0.6)
updateDotView(size: newSize, glowRadius: newGlowRadius, glowColor: newGlowColor)
} }
private func collapseDot() { private func collapseDot() {
let newSize = Values.pathRowDotSize let newSize = Values.pathRowDotSize
let newGlowRadius: CGFloat = isLightMode ? 2 : 4 let newGlowRadius: CGFloat = isLightMode ? 1 : 2
updateDotView(size: newSize, glowRadius: newGlowRadius) let newGlowColor = isLightMode ? UIColor.black.withAlphaComponent(0.4) : UIColor.black
updateDotView(size: newSize, glowRadius: newGlowRadius, glowColor: newGlowColor)
} }
private func updateDotView(size: CGFloat, glowRadius: CGFloat) { private func updateDotView(size: CGFloat, glowRadius: CGFloat, glowColor: UIColor) {
let frame = CGRect(center: dotView.center, size: CGSize(width: size, height: size)) let frame = CGRect(center: dotView.center, size: CGSize(width: size, height: size))
dotViewWidthConstraint.constant = size dotViewWidthConstraint.constant = size
dotViewHeightConstraint.constant = size dotViewHeightConstraint.constant = size
@ -272,8 +276,7 @@ private final class LineView : UIView {
self.layoutIfNeeded() self.layoutIfNeeded()
self.dotView.frame = frame self.dotView.frame = frame
self.dotView.layer.cornerRadius = size / 2 self.dotView.layer.cornerRadius = size / 2
let glowColor = Colors.accent let glowConfiguration = UIView.CircularGlowConfiguration(size: size, color: glowColor, isAnimated: true, animationDuration: 0.5, radius: glowRadius)
let glowConfiguration = UIView.CircularGlowConfiguration(size: size, color: glowColor, isAnimated: true, radius: glowRadius)
self.dotView.setCircularGlow(with: glowConfiguration) self.dotView.setCircularGlow(with: glowConfiguration)
self.dotView.backgroundColor = Colors.accent self.dotView.backgroundColor = Colors.accent
} }

Loading…
Cancel
Save