iOS에서 이미지를 사용하여 부드럽게 반복되는 애니메이션을 만드는 방법

UIImageView를 사용하여 iOS에서 반복되는 클라우드 애니메이션 만들기

이 솔루션은 UIKit 프레임워크와 함께 Swift를 사용하여 두 개의 UIImageView 객체에 애니메이션을 적용하여 원활한 클라우드 애니메이션 루프를 생성합니다.

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: 20.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: nil)
    }
}

향상된 이미지 재활용 및 방향 처리로 클라우드 애니메이션 수정

이 방법은 Swift 및 UIKit을 사용하여 보다 정교한 접근 방식으로 클라우드 이미지 루핑을 처리하고, 이미지 보기 재활용을 사용하여 이미지가 사라지는 것을 방지하고 원활한 연속 애니메이션을 보장합니다.

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        let totalDuration = 20.0
        let animationOptions: UIView.AnimationOptions = [.repeat, .curveLinear]
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: animationOptions, animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }) { [weak self] _ in
            self?.recycleClouds()
        }
    }
    func recycleClouds() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

효율적인 메모리 사용으로 최적화된 클라우드 애니메이션

이 솔루션은 특히 복잡하거나 대규모 앱에 유용한 메모리 최적화 기술과 함께 보다 효율적인 애니메이션 전략을 사용하여 이전 예를 개선합니다.

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    var totalDuration = 20.0
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: { [weak self] _ in
            self?.optimizeMemory()
        })
    }
    func optimizeMemory() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

부드러운 구름 움직임을 위한 애니메이션 수정

iOS에서 부드럽게 반복되는 애니메이션을 만드는 것은 유동적인 모션 효과가 필요한 앱에 필수적인 기술입니다. 클라우드 애니메이션이 원활하게 작동하도록 만드는 핵심은 이미지 보기를 적절하게 관리하는 방법을 이해하는 것입니다. 하나의 이미지가 화면 밖으로 이동하면 루프를 중단하지 않고 해당 위치를 재설정해야 합니다. 간단한 해결책은 다음을 사용하는 것입니다. UIView.animate 방법 .반복하다 그리고 .curveLinear 애니메이션을 지속적이고 부드럽게 유지하는 옵션입니다. 🏞️

루프 생성의 또 다른 중요한 측면은 이미지의 위치를 ​​동적으로 처리하는 것입니다. 두 번째 구름 이미지가 화면 밖으로 이동한 후 위치를 변경하는 것은 끝없는 움직임의 환상을 유지하는 데 중요합니다. 또한 효율적인 코딩 방법을 사용하여 성능을 최적화하면 애니메이션이 다양한 장치와 화면 크기에서 원활하게 실행되어 사용자에게 원활한 경험을 제공할 수 있습니다.