最近閑的時(shí)候?qū)崿F(xiàn)了一個(gè)雷達(dá)掃描的效果
效果如下圖
前言
- swift 3.0 實(shí)現(xiàn)
- 了解 Layer anchorPoint 的使用
- 動(dòng)畫兩種實(shí)現(xiàn)方式
- CABasicAnimation
- CGAffineTransform rotationAngle
背景設(shè)置
背景可以是自己 用 view 來(lái)實(shí)現(xiàn) 或者 draw 一個(gè) 圓環(huán) 都不是什么事情
如果要追求 和設(shè)計(jì)一樣的效果 就讓美工 來(lái) 設(shè)計(jì)一套圖
我這里就是一套圖片;
然后 frame 設(shè)置 間隔 就可以
效果如下
扇形區(qū)域
扇形區(qū)域是負(fù)責(zé)來(lái)旋轉(zhuǎn)的, 肯定一張圖片啦
我這里是一張正方形的圖片
如下
把圖片添加進(jìn)去 并不難, 看起來(lái)就是 : 扇形圖片的左上角是圍繞 背景的圓心 來(lái)旋轉(zhuǎn)的, 所以 左上角 是對(duì)應(yīng)圓心
一開(kāi)始 我就是這樣的思路
讓 origin x , y 為扇形圖片的 x y 不就好了, 這樣一下就能達(dá)到 預(yù)期效果 (下圖) 但是做旋轉(zhuǎn)的時(shí)候 就發(fā)現(xiàn) 陷入誤區(qū)了
思考一下是為啥呢?
我們?cè)谔幚?扇形圖片 進(jìn)行旋轉(zhuǎn)的時(shí)候, 圖片的旋轉(zhuǎn) 是圍繞 圖片 自身 的中心點(diǎn) 來(lái)進(jìn)行旋轉(zhuǎn)的
而 如果按照上面 做的 扇形圖片的 center 按照本身 圖片旋轉(zhuǎn)的效果 肯定不是這樣
所以 我們是要 如何 做到 讓扇形圖 以自己的左上角 來(lái)進(jìn)行旋轉(zhuǎn)的呢 ?
查閱資料 Layer 有個(gè) anchorPoint 屬性
anchorPoint
anchorPoint 是相對(duì)于自身的位置
稱為“定位點(diǎn)”、“錨點(diǎn)”
決定著CALayer身上的哪個(gè)點(diǎn)會(huì)在position屬性所指的位置
它的x、y取值范圍都是0~1，默認(rèn)值為（0.5, 0.5）
也就是 默認(rèn)的旋轉(zhuǎn)以 自身 center 點(diǎn) 來(lái)進(jìn)行
借用 淺談Layer兩個(gè)屬性position和anchorPoint 一張圖片 大家來(lái)分析
根據(jù)分析這里的扇形圖片進(jìn)行旋轉(zhuǎn) 就是 根據(jù) 錨點(diǎn) 進(jìn)行的
所以我只需要需改 錨點(diǎn) 為 左上角 anchorPoint (0, 0)
旋轉(zhuǎn) 就會(huì) 以左上角 來(lái)進(jìn)行
position和anchorPoint的詳細(xì)研究 可以參考這篇文章
研究完 anchorPoint 后就恍然大悟 設(shè)置 anchorPoint (0, 0) 之后
扇形圖的目前 center 是以左上角點(diǎn) 來(lái)進(jìn)行 參考
這時(shí) 我只需要讓它的 center 等于 背景圓環(huán)中心 即可
就達(dá)到了 如下的效果圖
而且這里我們 做旋轉(zhuǎn)也是以這個(gè) 左上角來(lái)進(jìn)行的
旋轉(zhuǎn)動(dòng)畫 - CABasicAnimation
/// CABasicAnimation
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.toValue = Double.pi * 2
rotationAnimation.duration = 2
rotationAnimation.isCumulative = true
rotationAnimation.repeatCount = HUGE
pie_Pic.layer.add(rotationAnimation, forKey: "rotationAnimation")
直接上代碼 這里好像也沒(méi)有什么可以說(shuō)的了
需要注意的有
- 旋轉(zhuǎn)是以 Z 軸 旋轉(zhuǎn)
- Double.pi swift 3.0 的寫法 當(dāng)然 也有 Float.pi 之類的 根據(jù)你取的類型
- repeatCount 設(shè)置 -1 居然 不會(huì) 無(wú)限 repeat , 我這里也是很無(wú)奈 用了個(gè) HUGE 不知道 還能怎么寫 ? HUGE 很大就是了
旋轉(zhuǎn)動(dòng)畫 - CGAffineTransform
func raderAnimation() {
UIView.animate(withDuration: 0.1, delay: 0, options: .curveLinear, animations: {
self.tempImage?.transform = CGAffineTransform.init(rotationAngle: CGFloat.init(Double.pi / 180 * self.angle))
}) { [unowned self] (true) in
self.angle += 15
self.raderAnimation()
}
}
這里大致的思路是 每次進(jìn)行 一定幅度 的旋轉(zhuǎn)
angle 值得 累加
動(dòng)畫結(jié)束 的 時(shí)候 繼續(xù) 調(diào)用函數(shù) 就能 持續(xù) 執(zhí)行動(dòng)畫函數(shù)了
這里的 angle 可以進(jìn)行調(diào)整 動(dòng)畫就會(huì) 執(zhí)行的 比較平順
雨點(diǎn)效果
雨點(diǎn)的效果比較簡(jiǎn)單
幾張圖片的 播放
/// point images
let point_Pic = UIImageView.init(frame: screenFrame)
let imagesArray = NSMutableArray()
for i in 1 ... 7 {
let imageName = "radarpoint\(i)_6.png"
let image = UIImage.init(named: imageName)
if (image != nil) {
imagesArray.add(image!)
}
}
point_Pic.animationImages = imagesArray as? [UIImage]
point_Pic.animationDuration = 1
point_Pic.animationRepeatCount = -1
point_Pic.startAnimating()
self.view.addSubview(point_Pic)
最后 添加個(gè)頭像 最終的 效果就出來(lái)啦
結(jié)尾
實(shí)現(xiàn)這個(gè)效果并不難
主要是溫習(xí)一下 CABasicAnimation 和 CGAffineTransform 一些 基本使用
同時(shí) 又學(xué)到了 anchorPoint 的使用 偶爾 再寫寫 文章 讓自己 鞏固 一下
關(guān)于這個(gè)動(dòng)畫 如果有更好 的實(shí)現(xiàn)效果方式
歡迎 給我留言 留下鏈接 我會(huì)去看的
如果本篇文章有錯(cuò)誤的地方 還請(qǐng)麻煩指正
