Advanced Swift Animations: Core Animation and Lottie

Master Core Animation and Lottie in Swift for advanced iOS animations in mobile app development.

Introduction

UIView animations are a great starting point, but the most breathtaking iOS experiences are built on a deeper layer: Core Animation and vector-based libraries like Lottie. GSoft Technologies explores the internals of Core Animation and shows you how to bring designer-crafted Lottie files to life in your Swift codebase.

What Is Core Animation?

Core Animation is the rendering engine that powers all visual animation on iOS and macOS. Unlike UIKit animations, Core Animation operates directly on CALayer objects, the GPU-composited layers that back every UIView. Every UIView has a layer property, and this is your gateway to Core Animation's full power.

Key Features / Why Go Deeper

Fine-grained timing: CAMediaTimingFunction lets you define custom cubic Bezier easing curves.
Path animations: CAKeyframeAnimation can animate a layer along any CGPath, enabling curved motion paths.
Gradient animation: CAGradientLayer + CABasicAnimation creates animated shimmer effects.
Replication: CAReplicatorLayer clones layers with offsets in time and space.
Lottie integration: Import After Effects animations as lightweight JSON files.

Step-by-Step: CABasicAnimation and CAKeyframeAnimation

import UIKitclass PulsingBadgeView: UIView {    private let pulseLayer = CAShapeLayer()    override init(frame: CGRect) {        super.init(frame: frame)        setupPulse()    }    required init?(coder: NSCoder) {        super.init(coder: coder)        setupPulse()    }    private func setupPulse() {        pulseLayer.path = UIBezierPath(ovalIn: bounds).cgPath        pulseLayer.fillColor = UIColor.systemRed.withAlphaComponent(0.4).cgColor        layer.insertSublayer(pulseLayer, at: 0)        let scale = CABasicAnimation(keyPath: "transform.scale")        scale.fromValue = 1.0        scale.toValue = 1.8        let opacity = CABasicAnimation(keyPath: "opacity")        opacity.fromValue = 0.6        opacity.toValue = 0.0        let group = CAAnimationGroup()        group.animations = [scale, opacity]        group.duration = 1.2        group.repeatCount = .infinity        group.timingFunction = CAMediaTimingFunction(name: .easeOut)        pulseLayer.add(group, forKey: "pulse")    }}

Integrating Lottie Animations

import Lottieclass OnboardingViewController: UIViewController {    private var animationView: LottieAnimationView!    override func viewDidLoad() {        super.viewDidLoad()        animationView = LottieAnimationView(name: "welcome_animation")        animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)        animationView.center = view.center        animationView.contentMode = .scaleAspectFit        animationView.loopMode = .playOnce        view.addSubview(animationView)        animationView.play { [weak self] finished in            if finished { self?.transitionToMainScreen() }        }    }}

Best Practices

Set isRemovedOnCompletion = true to avoid layer accumulation.
Use fillMode carefully - update the model property after animation completes.
Profile in Instruments: Core Animation instrument detects offscreen rendering.
Keep Lottie JSON files below 100KB for performance on older devices.

Real-World Use Cases at GSoft Technologies

GSoft Technologies used Core Animation shimmer loaders for a fintech client and Lottie for healthcare app onboarding, reducing asset size by 70%. Our mobile development team uses these alongside Flutter and React Native builds.

Conclusion

Core Animation and Lottie open a new dimension of creative possibility for iOS developers. Contact GSoft Technologies to build your next iOS project with world-class animations that set your app apart.