最近閑的時候?qū)崿F(xiàn)了一個雷達掃描的效果
效果如下圖
前言
- swift 3.0 實現(xiàn)
- 了解 Layer anchorPoint 的使用
- 動畫兩種實現(xiàn)方式
- CABasicAnimation
- CGAffineTransform rotationAngle
背景設(shè)置
背景可以是自己 用 view 來實現(xiàn) 或者 draw 一個 圓環(huán) 都不是什么事情
如果要追求 和設(shè)計一樣的效果 就讓美工 來 設(shè)計一套圖
我這里就是一套圖片;
然后 frame 設(shè)置 間隔 就可以
效果如下
扇形區(qū)域
扇形區(qū)域是負責(zé)來旋轉(zhuǎn)的, 肯定一張圖片啦
我這里是一張正方形的圖片
如下
把圖片添加進去 并不難, 看起來就是 : 扇形圖片的左上角是圍繞 背景的圓心 來旋轉(zhuǎn)的, 所以 左上角 是對應(yīng)圓心
一開始 我就是這樣的思路
讓 origin x , y 為扇形圖片的 x y 不就好了, 這樣一下就能達到 預(yù)期效果 (下圖) 但是做旋轉(zhuǎn)的時候 就發(fā)現(xiàn) 陷入誤區(qū)了
思考一下是為啥呢?
我們在處理 扇形圖片 進行旋轉(zhuǎn)的時候, 圖片的旋轉(zhuǎn) 是圍繞 圖片 自身 的中心點 來進行旋轉(zhuǎn)的
而 如果按照上面 做的 扇形圖片的 center 按照本身 圖片旋轉(zhuǎn)的效果 肯定不是這樣
所以 我們是要 如何 做到 讓扇形圖 以自己的左上角 來進行旋轉(zhuǎn)的呢 ?
查閱資料 Layer 有個 anchorPoint 屬性
anchorPoint
anchorPoint 是相對于自身的位置
稱為“定位點”也拜、“錨點”
決定著CALayer身上的哪個點會在position屬性所指的位置
它的x、y取值范圍都是0~1车胡，默認值為（0.5, 0.5）
也就是 默認的旋轉(zhuǎn)以 自身 center 點 來進行
借用 淺談Layer兩個屬性position和anchorPoint 一張圖片 大家來分析
根據(jù)分析這里的扇形圖片進行旋轉(zhuǎn) 就是 根據(jù) 錨點 進行的
所以我只需要需改 錨點 為 左上角 anchorPoint (0, 0)
旋轉(zhuǎn) 就會 以左上角 來進行
position和anchorPoint的詳細研究 可以參考這篇文章
研究完 anchorPoint 后就恍然大悟 設(shè)置 anchorPoint (0, 0) 之后
扇形圖的目前 center 是以左上角點 來進行 參考
這時 我只需要讓它的 center 等于 背景圓環(huán)中心 即可
就達到了 如下的效果圖
而且這里我們 做旋轉(zhuǎn)也是以這個 左上角來進行的
旋轉(zhuǎn)動畫 - 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")
直接上代碼 這里好像也沒有什么可以說的了
需要注意的有
- 旋轉(zhuǎn)是以 Z 軸 旋轉(zhuǎn)
- Double.pi swift 3.0 的寫法 當(dāng)然 也有 Float.pi 之類的 根據(jù)你取的類型
- repeatCount 設(shè)置 -1 居然 不會 無限 repeat , 我這里也是很無奈 用了個 HUGE 不知道 還能怎么寫 ? HUGE 很大就是了
旋轉(zhuǎn)動畫 - 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()
}
}
這里大致的思路是 每次進行 一定幅度 的旋轉(zhuǎn)
angle 值得 累加
動畫結(jié)束 的 時候 繼續(xù) 調(diào)用函數(shù) 就能 持續(xù) 執(zhí)行動畫函數(shù)了
這里的 angle 可以進行調(diào)整 動畫就會 執(zhí)行的 比較平順
雨點效果
雨點的效果比較簡單
幾張圖片的 播放
/// 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)
最后 添加個頭像 最終的 效果就出來啦
結(jié)尾
實現(xiàn)這個效果并不難
主要是溫習(xí)一下 CABasicAnimation 和 CGAffineTransform 一些 基本使用
同時 又學(xué)到了 anchorPoint 的使用 偶爾 再寫寫 文章 讓自己 鞏固 一下
關(guān)于這個動畫 如果有更好 的實現(xiàn)效果方式
歡迎 給我留言 留下鏈接 我會去看的
如果本篇文章有錯誤的地方 還請麻煩指正
