How To Animate View Curve In Swift

Multilingual, app programmer offer expertise in iOS. Committed to project deadlines and capable of thinking exterior the box. Seeking an application development position with a well-established, successful organisation.

Super Cool iOS Animation

Building custom animation in iOS tin can be quite easy in some cases just not every case. Some animations can be very complex.

This is the animation we will try to replicate. It looks easy doesn't information technology? Considering you tin can merely animate of the position of the moving view, but sit dorsum and think almost how you are going to animate the view around in a circular form.

2 things to note before we go started:

1. The four views in the center will be referred to every bit staticViews
2. The view jumping upwards and downwards will be chosen movingView
   And then to achieve the circular animation, my own approach volition exist to use UIBezierPath to draw the animation path (PS: this is my own arroyo. Doesn't mean information technology's the all-time). I drew the path out before hooking the bezier paths together

I know, i can't draw to salvage my own life 😂, but this is what my own bezier paths will await similar and my staticViews volition take the same frame withe same size but different origin because the x axis will exist different Capeesh?

Now jumping into the Xcode, let's code the bezier paths upwardly

          let bezierPath = UIBezierPath() bezierPath.move(to: CGPoint(10: 25.5, y: 185.five)) bezierPath.addCurve(to: CGPoint(10: 25.v, y: 56.v), controlPoint1: CGPoint(x: 25.5, y: 185.v), controlPoint2: CGPoint(x: 25.five, y: 88.75)) bezierPath.addCurve(to: CGPoint(10: 72.v, y: 67.five), controlPoint1: CGPoint(x: 25.5, y: 24.25), controlPoint2: CGPoint(x: 60.75, y: 64.75)) bezierPath.addCurve(to: CGPoint(10: 108.5, y: 185.5), controlPoint1: CGPoint(x: 84.25, y: 70.25), controlPoint2: CGPoint(ten: 108.five, y: 185.5)) bezierPath.addCurve(to: CGPoint(ten: 136.5, y: 299.5), controlPoint1: CGPoint(x: 108.5, y: 185.5), controlPoint2: CGPoint(x: 129.five, y: 271)) bezierPath.addCurve(to: CGPoint(ten: 186.five, y: 279.v), controlPoint1: CGPoint(x: 143.5, y: 328), controlPoint2: CGPoint(x: 174, y: 284.v)) bezierPath.addCurve(to: CGPoint(x: 202.five, y: 185.5), controlPoint1: CGPoint(x: 199, y: 274.v), controlPoint2: CGPoint(10: 202.5, y: 185.v)) bezierPath.addCurve(to: CGPoint(x: 217.five, y: 67.5), controlPoint1: CGPoint(ten: 202.5, y: 185.5), controlPoint2: CGPoint(x: 213.75, y: 97)) bezierPath.addCurve(to: CGPoint(x: 261.5, y: 67.5), controlPoint1: CGPoint(x: 221.25, y: 38), controlPoint2: CGPoint(ten: 261.5, y: 67.5)) bezierPath.addCurve(to: CGPoint(x: 291.5, y: 185.five), controlPoint1: CGPoint(ten: 261.5, y: 67.5), controlPoint2: CGPoint(10: 284, y: 156)) bezierPath.addCurve(to: CGPoint(ten: 335.5, y: 299.5), controlPoint1: CGPoint(ten: 299, y: 215), controlPoint2: CGPoint(x: 335.5, y: 299.v)) UIColor.black.setStroke() bezierPath.lineWidth = 0                  

Notice i made lineWidth 0 this is considering we don't want some blackness line showing up on the screen.

I besides changed the position of the staticViews to the end betoken of each curve .

Now the challenge is how to animate the movingView around the path. I idea I could just animate the movingView center or the position, simply the event was not pleasant at all considering it didn't animate the curves and still had like a square border, then i plant a CAKeyframeAnimation fundamental that let's you lot animate along a path and it is chosen animate forth path

          let animation = CAKeyframeAnimation(keyPath: "position") animation.path = bezierPath.cgPath animation.repeatCount = 0 animation.duration = iii.0 animation.consul = self movingView.layer.add(animation, forKey: "animate along path") movingView.eye = CGPoint(x: 0, y: frame.maxY) timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(fireTimer), userInfo: zippo, repeats: true)                  

Running the app gave me this result:

Boom! this is definitely the behavior i was expecting! ♨️

Now the next challenge is the h2o driblet effect which is a bit tricky, simply the easiest solution to this is alter the calibration of the movingView when it is transitioning from ane staticView to another which means whenever it lands on a staticView information technology will change it'due south scale which is pretty easy. All i had to do was to utilize the skillful old UIView animate

          fileprivate func scaleMethod() {     UIView.animate(withDuration: 0.75, animations: {         cocky.movingView.transform = .identity     }) { _ in         cocky.movingView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)         self.scaleMethod()     } }                  

Note that the original transform for movingView was CGAffineTransform(scaleX: 0.5, y: 0.v). Hopefully that makes sense.

Phew! then nosotros accept the scale blitheness and curvy animation washed 🥳

Now if you noticed the movingView gradient changes when it get on a particular staticView. This is probably the easiest affair to do which is why i put it last. To attain this i gear up a timer when the CAKeyframeAnimation to a higher place starts that run every 0.01 seconds which to check the current position of the movingView .

To go the the current frame of the movingView while animating, I had to get the presentationLayer

let frame = self.movingView.layer.presentationLayer()?.frame

          if (f?.origin.x)! >= self.circleTwo.frame.origin.ten{ rectV.applyGradient(colours: [UIColor(ruby-red:1.00, green:0.89, blue:0.35, blastoff:1.0), UIColor(ruby-red:i.00, dark-green:0.65, blue:0.32, blastoff:ane.0)]) }else if (f?.origin.10)! >= self.circleThree.frame.origin.ten{ rectV.applyGradient(colours: [UIColor(cherry:0.47, dark-green:0.62, blue:0.05, alpha:1.0), UIColor(cerise:0.67, green:0.73, bluish:0.47, alpha:i.0)]) }else if (f?.origin.x)! >= cocky.circleFour.frame.origin.10{ rectV.applyGradient(colours: [UIColor(ruby:0.96, light-green:0.69,        blue:0.ten, alpha:one.0), UIColor(red:0.95, dark-green:0.15, blueish:0.07, alpha:one.0)]) }                  

Finally the outcome

Doesn't expect exactly like the original blueprint. The water drop effect tin exist worked on! I volition link the source code to the project below.

Source: https://www.codementor.io/@shaggyhafeez/super-cool-ios-animation-rphki4zg1

Posted by: vaughtthastenthe.blogspot.com

Share this post