First show the effect as usual.
This animation is brief, thus is easy to implement. It includes simply two points.
let logoPath = UIBezierPath(arcCenter: centerPoint, radius: frame.width / 3, startAngle: CGFloat(M_PI_2), endAngle: 0, clockwise: true)
strokeColor : The color of the path, that is, the motion trail’s color.
fillColor : The color of the layer that wrapped by path. In this case, it is the middle part of the circle. So the color out of the circle need to be set with superView.backgroundColor.
backgroundColor = UIColor(red: 5 / 255.0, green: 178 / 255.0, blue: 238 / 255.0, alpha: 1)
Move it! With the help of Core Animation, it is easy to modify the trail from 0% to 100%.
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
The first step is finished.
What is missing? Oh, the border of the trail shoud be arc. Why not add a litter ball to each side of the trail.
Place two balls：
let beginPointView = UIView()
Move them on the track like step 1:
let pointAnimation = CAKeyframeAnimation(keyPath: "position")
Setting the path property of CAKeyframeAnimation and it will ignore the key frame of the animation and move on the path with constant speed automatically
To show what is actually done at this step.
Well, simply combine the two steps and it is what we need.