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