我已經在這個視頻中實作了一個回圈加載影片精確：
https://www.youtube.com/watch?v=O3ltwjDJaMk
這是我的代碼：
class ViewController: UIViewController {
let shapeLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
let center = view.center
let trackLayer = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 10
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = kCALineCapRound
view.layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = kCALineCapRound
shapeLayer.strokeEnd = 0
view.layer.addSublayer(shapeLayer)
view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
}
@objc private func handleTap() {
let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
basicAnimation.toValue = 1
basicAnimation.duration = 2
basicAnimation.fillMode = kCAFillModeForwards
basicAnimation.isRemovedOnCompletion = false
shapeLayer.add(basicAnimation, forKey: "urSoBasic")
}
}
當影片發生時，我希望圓圈的顏色從紅色變為綠色，如果圓圈完全完成，它應該是綠色的，如果沒有，那么紅綠色之間的某種顏色（取決于來自用戶 ID 的變數）。Any1知道如何做到這一點？感謝任何幫助:)
uj5u.com熱心網友回復：
您可以使用CAAnimation到生命的顏色為好。所以你可以點擊那個鏈接。
這是對你的思念的部分是計算from和to這就需要根據當前值進行插值的顏色。
假設您的進度視圖將在某個時候更新界面以具有
var minimumValue: CGFloat = 0.0
var maximumValue: CGFloat = 100.0
var currentValue: CGFloat = 30.0 // 30%
然后使用這些值，您可以計算當前進度，介于0和之間的值1應定義顏色插值比例。計算它的基本數學應該是：
let progress = (currentValue-maximumValue)/(minimumValue-maximumValue) // TODO: handle division by zero. Handle current value out of bounds.
隨著進步，您現在可以使用以下方法插入任何數值
func interpolate(_ values: (from: CGFloat, to: CGFloat), scale: CGFloat) -> CGFloat {
return values.from (values.to - values.from)*scale
}
但顏色不是數值。如果CAAnimation您應該將其分解為 4 個數值作為 RGBA 以保持一致性（至少我相信CAAnimation在 RGBA 空間中使用插值來表示顏色）。就像筆記一樣；在許多情況下，當您在 HSV 空間而不是 RGB 中進行插值時，它看起來更好。
所以插值顏色應該是這樣的：
func rgba(_ color: UIColor) -> (r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat) {
var r: CGFloat = 0.0
var g: CGFloat = 0.0
var b: CGFloat = 0.0
var a: CGFloat = 0.0
color.getRed(&r, green: &g, blue: &b, alpha: &a)
return (r, g, b, a)
}
func interpolate(_ values: (from: CGFloat, to: CGFloat), scale: CGFloat) -> CGFloat {
return values.from (values.to - values.from)*scale
}
func interpolate(_ values: (from: UIColor, to: UIColor), scale: CGFloat) -> UIColor {
let startColorComponents = rgba(values.from)
let endColorComponents = rgba(values.to)
return .init(red: interpolate((startColorComponents.r, endColorComponents.r), scale: scale),
green: interpolate((startColorComponents.g, endColorComponents.g), scale: scale),
blue: interpolate((startColorComponents.b, endColorComponents.b), scale: scale),
alpha: interpolate((startColorComponents.a, endColorComponents.a), scale: scale))
}
這些應該是你的影片所需的所有組件，我希望它足以讓你走上正軌。我個人喜歡有更多的控制權，而且我喜歡避免使用諸如CAAnimation圖層甚至形狀圖層之類的工具。所以這就是我將如何完成你的任務：
class ViewController: UIViewController {
@IBOutlet private var progressView: ProgressView?
override func viewDidLoad() {
super.viewDidLoad()
view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onTap)))
}
@objc private func onTap() {
guard let progressView = progressView else { return }
progressView.animateValue(to: .random(in: progressView.minimumValue...progressView.maximumValue), duration: 0.3)
}
}
@IBDesignable class ProgressView: UIView {
@IBInspectable var minimumValue: CGFloat = 0.0 { didSet { setNeedsDisplay() } }
@IBInspectable var maximumValue: CGFloat = 0.0 { didSet { setNeedsDisplay() } }
@IBInspectable var value: CGFloat = 0.0 { didSet { setNeedsDisplay() } }
@IBInspectable var colorAtZeroProgress: UIColor = .black { didSet { setNeedsDisplay() } }
@IBInspectable var colorAtFullProgress: UIColor = .black { didSet { setNeedsDisplay() } }
@IBInspectable var lineWidth: CGFloat = 10.0 { didSet { setNeedsDisplay() } }
private var currentTimer: Timer?
func animateValue(to: CGFloat, duration: TimeInterval) {
currentTimer?.invalidate()
let startTime = Date()
let startValue = self.value
currentTimer = Timer.scheduledTimer(withTimeInterval: 1.0/60.0, repeats: true, block: { timer in
let progress = CGFloat(max(0.0, min(Date().timeIntervalSince(startTime)/duration, 1.0)))
if progress >= 1.0 {
// End of animation
timer.invalidate()
}
self.value = startValue (to - startValue)*progress
})
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let progress = max(0.0, min((value-minimumValue)/(maximumValue-minimumValue), 1.0))
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let radius = min(bounds.width, bounds.height)*0.5 - lineWidth*0.5
let startAngle: CGFloat = -.pi*2.0
let endAngle: CGFloat = startAngle .pi*2.0*progress
let circularPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
let interpolatedColor: UIColor = {
func rgba(_ color: UIColor) -> (r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat) {
var r: CGFloat = 0.0
var g: CGFloat = 0.0
var b: CGFloat = 0.0
var a: CGFloat = 0.0
color.getRed(&r, green: &g, blue: &b, alpha: &a)
return (r, g, b, a)
}
func interpolate(_ values: (from: CGFloat, to: CGFloat), scale: CGFloat) -> CGFloat {
return values.from (values.to - values.from)*scale
}
func interpolate(_ values: (from: UIColor, to: UIColor), scale: CGFloat) -> UIColor {
let startColorComponents = rgba(values.from)
let endColorComponents = rgba(values.to)
return .init(red: interpolate((startColorComponents.r, endColorComponents.r), scale: scale),
green: interpolate((startColorComponents.g, endColorComponents.g), scale: scale),
blue: interpolate((startColorComponents.b, endColorComponents.b), scale: scale),
alpha: interpolate((startColorComponents.a, endColorComponents.a), scale: scale))
}
return interpolate((self.colorAtZeroProgress, self.colorAtFullProgress), scale: progress)
}()
interpolatedColor.setStroke()
circularPath.lineCapStyle = .round
circularPath.lineWidth = lineWidth
circularPath.stroke()
}
}
隨意使用它并隨意修改它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377144.html
下一篇：為什么分賬工具在市場上這么火爆？