真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯網站制作重慶分公司

iOSCAReplicatorLayer實現脈沖動畫效果

iOS CAReplicatorLayer 實現脈沖動畫效果,供大家參考,具體內容如下

創(chuàng)新互聯主營當陽網站建設的網絡公司,主營網站建設方案,成都app軟件開發(fā)公司,當陽h5微信小程序搭建,當陽網站營銷推廣歡迎當陽等地區(qū)企業(yè)咨詢

效果圖

iOS CAReplicatorLayer實現脈沖動畫效果

脈沖數量、速度、半徑、透明度、漸變顏色、方向等都可以設置??梢杂糜诘貓D標注(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

設置復制子圖層的數量、創(chuàng)建兩個子圖層之間的時間間隔。

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 中一起執(zhí)行。

以上就是實現原理與最核心的代碼,具體見 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯。


名稱欄目:iOSCAReplicatorLayer實現脈沖動畫效果
本文路徑:http://weahome.cn/article/psdehh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部