一个小小的动画,太阳公公上山又下山。先上效果图。

用 lipecap 录的gif效果有点卡顿。好吧,说下如何实现的。
首先在一个大圆内先计算出内切九边形各个顶点的位置,接着连接相应的顶点变成一个九角星太阳的九条光芒,然后在九角星的中心画一个圈形的Layer,这样就大致画好了大阳的形状。
新建一个叫SunView的文件继承自UIView,然后在init方法内添加一个addSunLayer()的方法。并在里面添加以下方内容
class SunView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
addSunLayer()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
在addSunLayer()方法内添加绘制九角星的代码:
self.layer.addSublayer(ninePolyganLayer)
在ViewContoller文件内添加以下代码:
let sunView = SunView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
self.view.addSubview(sunView)
此时九角星就做好了,运行的效果如下:
接着要在九角星的中星心位置添加一个圆,做为太阳中心。添加一个计算属性,一个钜形的内切圆路径。
接着在addSunLayer方法内添加以下内容:
let animation:CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation")
animation.fromValue = 0.0
animation.toValue = 2 * M_PI
animation.duration = 5
animation.repeatCount = HUGE
layer.addAnimation(animation, forKey: nil)
并将上面ninePolyganLayer添加到图层的代码做如下修改。
self.layer.insertSublayer(ninePolyganLayer, below: sunLayer)
//self.layer.addSublayer(ninePolyganLayer)
此时运行效果如下:
最后就是让sunView按着指定的路径运行就可以了。回到ViewController文件内,添加以下计算路径属性,画出一条弧形路径,然后让太阳按着这个路径移动。
添加以下动画代码
这样就完成了。以上仅供参考,还请大家多提意见。