CODEWITHSUNDEEP
swiftswiftuiuikitcore-animationswiftui-animation
Kevin
Kevin

Reputation: 331

Swift: How would one create this animation in Swift/SwiftUI?

I've been looking into animation more and was wondering what's the approach on how to create animation like this in UIKit/SwiftUI? and what's the animation called if I was to look more into it? It does not have to be the exact layout, for example, a single row of uiview/uiimageview is more than enough. I just need to know how/what approach to execute this kind of animation.

enter image description here

Upvotes: 0

Views: 271

Answers (1)

Pankaj Kulkarni
Pankaj Kulkarni

Reputation: 561

Using Swift/UIKit this can be achieved by suing CAKeyframeAnimation. Following is a sample code for the same. It assumes there is an UIImageView with name imageView and please change name of image file to what you need to.

func createPanXAnimation() {
    
    let scaleLayer = CALayer()
    scaleLayer.frame = imageView.bounds.insetBy(dx: -200, dy: -200)
    
    scaleLayer.contents = UIImage(named: <#ImageResourceName#>)!.cgImage!
    imageView.layer.addSublayer(scaleLayer)

    let centerX = imageView.bounds.width/2.0
    let xPositionArray: [NSNumber] = [100, 200, 250]

    var timesArray: [NSNumber] = [0, 0.3, 0.6]
    timesArray.append(1.0)

    // Total loop time
    let time : Float = 3

    let animation = CAKeyframeAnimation(keyPath: "position.x")
    animation.beginTime = 0
    animation.duration = CFTimeInterval(time)
    animation.repeatCount = Float.greatestFiniteMagnitude;
    animation.isRemovedOnCompletion = false
    animation.fillMode = CAMediaTimingFillMode.forwards
    animation.autoreverses = true
    animation.values = xPositionArray
    animation.keyTimes = timesArray
    //animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.calculationMode = CAAnimationCalculationMode.linear

    scaleLayer.add(animation, forKey: "position.x")
    
}

Hope it gives you some ideas if not the copy/paste solution. 🤞

Upvotes: 0

Related Questions