溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
iOS CAReplicatorLayer 實現脈沖動畫效果，供大家參考，具體內容如下
效果圖
脈沖數量、速度、半徑、透明度、漸變顏色、方向等都可以設置。可以用于地圖標注(Annotation)、按鈕長按動畫效果(例如錄音按鈕)等。
代碼已上傳 GitHub：https://github.com/Silence-GitHub/CoreAnimationDemo
實現原理
實現方法參考：https://github.com/shu223/Pulsator
但是覺得那些代碼不夠簡潔，所以自己寫了一個，還加了些功能。
自定義 PulsatorLayer，繼承自 CAReplicatorLayer。CAReplicatorLayer 可以復制子圖層(Sublayer)，被復制出來的子圖層可以改變位置、顏色等屬性。每一個脈沖(一個漸變的圓形)就是一個被復制出來的子圖層。
顯示脈沖的圖層就是子圖層，把它作為 pulseLayer 屬性
private var pulseLayer: CALayer!
脈沖子圖層一開始不顯示，因此初始化時為全透明；通過設置圓角，使 pulseLayer 為圓形
pulseLayer = CALayer() pulseLayer.opacity = 0 pulseLayer.backgroundColor = outColor pulseLayer.contentsScale = UIScreen.main.scale pulseLayer.bounds.size = CGSize(width: maxRadius * 2, height: maxRadius * 2) pulseLayer.cornerRadius = maxRadius addSublayer(pulseLayer)
設置 CAReplicatorLayer 的一些屬性
// The number of copies to create, including the source layers instanceCount // Specifies the delay, in seconds, between replicated copies instanceDelay
設置復制子圖層的數量、創建兩個子圖層之間的時間間隔。
CAReplicatorLayer 遵循 CAMediaTiming 協議，設置協議屬性
// Determines the number of times the animation will repeat repeatCount = MAXFLOAT
把動畫重復次數設置為很大的數，讓動畫一直重復。
動畫效果由 3 個 CABasicAnimation 組成，分別改變脈沖的大小、透明度、背景色顏色
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
scaleAnimation.duration = animationDuration
let opacityAnimation = CABasicAnimation(keyPath: "opacity")
opacityAnimation.duration = animationDuration
let colorAnimation = CABasicAnimation(keyPath: "backgroundColor")
colorAnimation.duration = animationDuration
switch pulseOrientation {
case .out:
scaleAnimation.fromValue = minRadius / maxRadius
scaleAnimation.toValue = 1
opacityAnimation.fromValue = maxAlpha
opacityAnimation.toValue = minAlpha
colorAnimation.fromValue = inColor
colorAnimation.toValue = outColor
case .in:
scaleAnimation.fromValue = 1
scaleAnimation.toValue = minRadius / maxRadius
opacityAnimation.fromValue = minAlpha
opacityAnimation.toValue = maxAlpha
colorAnimation.fromValue = outColor
colorAnimation.toValue = inColor
}
let animationGroup = CAAnimationGroup()
animationGroup.duration = animationDuration + animationInterval
animationGroup.animations = [scaleAnimation, opacityAnimation, colorAnimation]
animationGroup.repeatCount = repeatCount
pulseLayer.add(animationGroup, forKey: kPulseAnimationKey)
以上代碼判斷了脈沖的方向(由內向外、由外向內)，兩種方向的動畫屬性起止取值相反。把這 3 個 CABasicAnimation 加入 CAAnimationGroup 中一起執行。
以上就是實現原理與最核心的代碼，具體見 GitHub：https://github.com/Silence-GitHub/CoreAnimationDemo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
