您好,登錄后才能下訂單哦!
iOS CAReplicatorLayer 實(shí)現(xiàn)脈沖動畫效果,供大家參考,具體內(nèi)容如下
效果圖
脈沖數(shù)量、速度、半徑、透明度、漸變顏色、方向等都可以設(shè)置。可以用于地圖標(biāo)注(Annotation)、按鈕長按動畫效果(例如錄音按鈕)等。
代碼已上傳 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo
實(shí)現(xiàn)原理
實(shí)現(xiàn)方法參考:https://github.com/shu223/Pulsator
但是覺得那些代碼不夠簡潔,所以自己寫了一個(gè),還加了些功能。
自定義 PulsatorLayer,繼承自 CAReplicatorLayer。CAReplicatorLayer 可以復(fù)制子圖層(Sublayer),被復(fù)制出來的子圖層可以改變位置、顏色等屬性。每一個(gè)脈沖(一個(gè)漸變的圓形)就是一個(gè)被復(fù)制出來的子圖層。
顯示脈沖的圖層就是子圖層,把它作為 pulseLayer 屬性
private var pulseLayer: CALayer!
脈沖子圖層一開始不顯示,因此初始化時(shí)為全透明;通過設(shè)置圓角,使 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)
設(shè)置 CAReplicatorLayer 的一些屬性
// The number of copies to create, including the source layers instanceCount // Specifies the delay, in seconds, between replicated copies instanceDelay
設(shè)置復(fù)制子圖層的數(shù)量、創(chuàng)建兩個(gè)子圖層之間的時(shí)間間隔。
CAReplicatorLayer 遵循 CAMediaTiming 協(xié)議,設(shè)置協(xié)議屬性
// Determines the number of times the animation will repeat repeatCount = MAXFLOAT
把動畫重復(fù)次數(shù)設(shè)置為很大的數(shù),讓動畫一直重復(fù)。
動畫效果由 3 個(gè) 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)
以上代碼判斷了脈沖的方向(由內(nèi)向外、由外向內(nèi)),兩種方向的動畫屬性起止取值相反。把這 3 個(gè) CABasicAnimation 加入 CAAnimationGroup 中一起執(zhí)行。
以上就是實(shí)現(xiàn)原理與最核心的代碼,具體見 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。