The little animated-swift of the sun rising and falling

A little animation, the sun grandfather went up and down the mountain. First up.

The GIF effect recorded in Lipecap is a bit of a lag. All right, here's how it's achieved.

First, the position of each vertex of the inner-tangent nine-edged shape is computed in a great circle, then the corresponding vertex is connected to the nine rays of the nine-point star Sun, then a circle layer is drawn at the center of the nine-point star, so that the shape of the big Yang is roughly drawn.

Create a new file called Sunview to inherit from UIView, and then add a method of Addsunlayer () within the Init method. and add the following content to the inside

Class Sunview:uiview {

Override Init (Frame:cgrect) {

Super.init (Frame:frame)

Addsunlayer ()

}

Required init? (Coder Adecoder:nscoder) {

Super.init (Coder:adecoder)

}

}

In the Addsunlayer () method, add the code that draws the nine-point star:

let ninePolyganPath: UIBezierPath = UIBezierPath ()
// radius of the great circle
let radius: CGFloat = self.frame.size.width / 2
// Position of each vertex of the nine-pointed star
var anglePoints: Dictionary <String, CGPoint> = Dictionary <String, CGPoint> ()
// The position of the first vertex, the middle point on the far right
let firstPoint: CGPoint = CGPoint (x: bounds.width, y: bounds.width / 2)
anglePoints ["0"] = firstPoint
ninePolyganPath.moveToPoint (firstPoint)
        
 for i in 1 .. <9 {
    // Divide the circle into 9 parts, and the size of each part is 40 degrees
    let angle = Double (i) * 40.0
    // Calculate the trigonometric function value of the corresponding angle
    let rateSin: CGFloat = sin (CGFloat (angle / 180 * M_PI))
    let rateCos: CGFloat = cos (CGFloat (angle / 180 * M_PI))
    let x: CGFloat = radius * rateCos + radius
    let y: CGFloat = radius * rateSin + radius
    anglePoints [String (i)] = CGPoint (x: x, y: y)
 }
// Connect the corresponding nine points to make it a nine-pointed star
ninePolyganPath.addLineToPoint (anglePoints ["4"]!)
ninePolyganPath.addLineToPoint (anglePoints ["8"]!)
ninePolyganPath.addLineToPoint (anglePoints ["3"]!) ninePolyganPath.addLineToPoint (anglePoints ["7"]!) ninePolyganPath.addLineToPoint (anglePoints ["2"]!)
ninePolyganPath.addLineToPoint (anglePoints ["6"]!)
ninePolyganPath.addLineToPoint (anglePoints ["1"]!)
ninePolyganPath.addLineToPoint (anglePoints ["5"]!)
ninePolyganPath.closePath ()
        
let ninePolyganLayer: CAShapeLayer = CAShapeLayer ()
ninePolyganLayer.fillColor = UIColor.yellowColor (). CGColor
ninePolyganLayer.strokeColor = UIColor.yellowColor (). CGColor
ninePolyganLayer.lineWidth = 5
ninePolyganLayer.path = ninePolyganPath.CGPath

Self.layer.addSublayer (Ninepolyganlayer)

Add the following code inside the Viewcontoller file:

Let Sunview = Sunview (Frame:cgrect (x:100, y:100, width:100, height:100))

Self.view.addSubview (Sunview)

At this point the nine point star is ready, the effect of the operation is as follows:

Next, a circle is added to the center of the star in the nine-point star as the centre of the Sun. Add a computed property, a massive inscribed circle path.

var sunCirclePath:UIBezierPath {
        return UIBezierPath(ovalInRect: CGRect(x: self.frame.size.width * 0.3 / 2, y: self.frame.size.height * 0.3 / 2, width: self.frame.size.width - self.frame.size.width * 0.3, height: self.frame.size.height - self.frame.size.height * 0.3))
 }

Next, add the following within the Addsunlayer method:

let sunLayer: CAShapeLayer = CAShapeLayer ()
sunLayer.path = sunCirclePath.CGPath
sunLayer.lineWidth = 5
sunLayer.fillColor = UIColor.yellowColor (). CGColor
sunLayer.strokeColor = UIColor.colorWithHexString ("# eecc00"). CGColor
self.layer.addSublayer (sunLayer)

// Let the sun spin

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)

and add the above ninepolyganlayer to the layer's code to make the following modifications.

Self.layer.insertSublayer (Ninepolyganlayer, Below:sunlayer)

Self.layer.addSublayer (Ninepolyganlayer)

At this point the effect is as follows:

The last thing is to let the Sunview run on the specified path. Back in the Viewcontroller file, add the following calculation path attribute, draw an arc path, and let the sun move in the same path.

var sunrisePath: UIBezierPath {
         let path: UIBezierPath = UIBezierPath ()
         path.moveToPoint (CGPoint (x: 0, y: 160))
         path.addQuadCurveToPoint (CGPoint (x: self.view.frame.size.width, y: 160), controlPoint: CGPoint (x: self.view.frame.size.width / 2, y: 60))
         //path.closePath () // This cannot be used,
         return path
  }

Add the following animation code

let sunriseAnimation:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
sunriseAnimation.path = sunrisePath.CGPath
sunriseAnimation.duration = 3
sunriseAnimation.calculationMode = kCAAnimationPaced
sunriseAnimation.fillMode = kCAFillModeForwards
sunriseAnimation.repeatCount = HUGE
sunriseAnimation.removedOnCompletion = false
sunView.layer.addAnimation(sunriseAnimation, forKey: nil)

So it's done. The above is for reference only, also ask you to give more comments.

The little animated-swift of the sun rising and falling