iOS CAReplicatorLayer實(shí)現(xiàn)脈沖動(dòng)畫(huà)效果

更新時(shí)間：2017年06月06日 16:28:07 作者：Silence_cnblogs

這篇文章主要介紹了iOS CAReplicatorLayer實(shí)現(xiàn)脈沖動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

iOS CAReplicatorLayer 實(shí)現(xiàn)脈沖動(dòng)畫(huà)效果，供大家參考，具體內(nèi)容如下

效果圖

脈沖數(shù)量、速度、半徑、透明度、漸變顏色、方向等都可以設(shè)置?？梢杂糜诘貓D標(biāo)注(Annotation)、按鈕長(zhǎng)按動(dòng)畫(huà)效果(例如錄音按鈕)等。

代碼已上傳 GitHub：https://github.com/Silence-GitHub/CoreAnimationDemo

實(shí)現(xiàn)原理

實(shí)現(xiàn)方法參考：https://github.com/shu223/Pulsator

但是覺(jué)得那些代碼不夠簡(jiǎn)潔，所以自己寫(xiě)了一個(gè)，還加了些功能。

自定義 PulsatorLayer，繼承自 CAReplicatorLayer。CAReplicatorLayer 可以復(fù)制子圖層(Sublayer)，被復(fù)制出來(lái)的子圖層可以改變位置、顏色等屬性。每一個(gè)脈沖(一個(gè)漸變的圓形)就是一個(gè)被復(fù)制出來(lái)的子圖層。

顯示脈沖的圖層就是子圖層，把它作為 pulseLayer 屬性

private var pulseLayer: CALayer!

脈沖子圖層一開(kāi)始不顯示，因此初始化時(shí)為全透明；通過(guò)設(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

把動(dòng)畫(huà)重復(fù)次數(shù)設(shè)置為很大的數(shù)，讓動(dòng)畫(huà)一直重復(fù)。

動(dòng)畫(huà)效果由 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))，兩種方向的動(dòng)畫(huà)屬性起止取值相反。把這 3 個(gè) CABasicAnimation 加入 CAAnimationGroup 中一起執(zhí)行。

以上就是實(shí)現(xiàn)原理與最核心的代碼，具體見(jiàn) GitHub：https://github.com/Silence-GitHub/CoreAnimationDemo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: