最近闲的时候实现了一个雷达扫描的效果
效果如下图
前言
- 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 的使用 偶尔 再写写 文章 让自己 巩固 一下
关于这个动画 如果有更好 的实现效果方式
欢迎 给我留言 留下链接 我会去看的
如果本篇文章有错误的地方 还请麻烦指正
