简体   繁体   中英

Rotate a view for 360 degrees indefinitely in Swift?

I want to rotate an image view for 360 degrees indefinitely.

UIView.animate(withDuration: 2, delay: 0, options: [.repeat], animations: {
    self.view.transform = CGAffineTransform(rotationAngle: 6.28318530717959)
}, completion: nil)

How can I do it?

Swift 2.x way to rotate UIView indefinitely, compiled from earlier answers:

// Rotate <targetView> indefinitely
private func rotateView(targetView: UIView, duration: Double = 1.0) {
    UIView.animateWithDuration(duration, delay: 0.0, options: .CurveLinear, animations: {
        targetView.transform = CGAffineTransformRotate(targetView.transform, CGFloat(M_PI))
    }) { finished in
        self.rotateView(targetView, duration: duration)
    }
}

UPDATE Swift 3.x

// Rotate <targetView> indefinitely
private func rotateView(targetView: UIView, duration: Double = 1.0) {
    UIView.animate(withDuration: duration, delay: 0.0, options: .curveLinear, animations: {
        targetView.transform = targetView.transform.rotated(by: CGFloat(M_PI))
    }) { finished in
        self.rotateView(targetView: targetView, duration: duration)
    }
}

Swift 3.0

let imgViewRing = UIImageView(image: UIImage(named: "apple"))
imgViewRing.frame = CGRect(x: 0, y: 0, width: UIImage(named: "apple")!.size.width, height: UIImage(named: "apple")!.size.height)
imgViewRing.center = CGPoint(x: self.view.frame.size.width/2.0, y: self.view.frame.size.height/2.0)
rotateAnimation(imageView: imgViewRing)
self.view.addSubview(imgViewRing)

This is the animation logic

func rotateAnimation(imageView:UIImageView,duration: CFTimeInterval = 2.0) {
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.fromValue = 0.0
        rotateAnimation.toValue = CGFloat(.pi * 2.0)
        rotateAnimation.duration = duration
        rotateAnimation.repeatCount = .greatestFiniteMagnitude

        imageView.layer.add(rotateAnimation, forKey: nil)
    }

You can check output in this link

Use this extension to rotate UIImageView 360 degrees.

extension UIView {
func rotate360Degrees(duration: CFTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
    let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
    rotateAnimation.fromValue = 0.0
    rotateAnimation.toValue = CGFloat(M_PI)
    rotateAnimation.duration = duration

    if let delegate: CAAnimationDelegate = completionDelegate as! CAAnimationDelegate? {
        rotateAnimation.delegate = delegate
    }
    self.layer.addAnimation(rotateAnimation, forKey: nil)
}
}

Than to rotate UIImageView simply use this method

self.YOUR_SUBVIEW.rotate360Degrees()

This one work for me in Swift 2.2:

let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.fromValue = 0.0
rotationAnimation.toValue = 360 * CGFloat(M_PI/180)
let innerAnimationDuration : CGFloat = 1.0
rotationAnimation.duration = Double(innerAnimationDuration)
rotationAnimation.repeatCount = HUGE
self.imageView.addAnimation(rotationAnimation, forKey: "rotateInner")

I would stick it in a function like rotateImage() and in the completion code just call rotateImage() again. I think you should use M_PI (or the swift equivalent) for the rotation amount, though.

Updated for Swift 3: I made an extension to UIView and included the following function within:

func rotate(fromValue: CGFloat, toValue: CGFloat, duration: CFTimeInterval = 1.0, completionDelegate: Any? = nil) {

let rotateAnimation = CABasicAnimation(keyPath: >"transform.rotation")
rotateAnimation.fromValue = fromValue
rotateAnimation.toValue = toValue
rotateAnimation.duration = duration

if let delegate: Any = completionDelegate {
rotateAnimation.delegate = delegate as? CAAnimationDelegate
}
self.layer.add(rotateAnimation, forKey: nil)

}

You can then call the function via (on a UIView I made into a button for example) :

monitorButton.rotate(fromValue: 0.0, toValue: CGFloat(M_PI * 2), completionDelegate: self)

Hope this helps!

I think what you really want here is to use a CADisplayLink . Reason being that this would be indefinitely smooth versus using completion blocks which may cause slight hiccups and are not as easily cancelable. See the following solution:

var displayLink : CADisplayLink?
var targetView = UIView()

func beginRotation () {

    // Setup display link
    self.displayLink = CADisplayLink(target: self, selector: #selector(onFrameInterval(displayLink:)))
    self.displayLink?.preferredFramesPerSecond = 60
    self.displayLink?.add(to: .current, forMode: RunLoop.Mode.default)
}

func stopRotation () {

    // Invalidate display link
    self.displayLink?.invalidate()
    self.displayLink = nil
}

// Called everytime the display is refreshed
@objc func onFrameInterval (displayLink: CADisplayLink) {

    // Get frames per second
    let framesPerSecond = Double(displayLink.preferredFramesPerSecond)

    // Based on fps, calculate how much target view should spin each interval
    let rotationsPerSecond = Double(3)
    let anglePerSecond = rotationsPerSecond * (2 * Double.pi)
    let anglePerInterval = CGFloat(anglePerSecond / framesPerSecond)

    // Rotate target view to match the current angle of the interval
    self.targetView.layer.transform = CATransform3DRotate(self.targetView.layer.transform, anglePerInterval, 0, 0, 1)

}

Avoiding the completion closure with recursive calls!

Bit late to this party, but using UIView keyFrame animation & varying stages of rotation for each keyFrame, plus setting the animation curve works nicely. Here's an UIView class function -

class func rotate360(_ view: UIView, duration: TimeInterval, repeating: Bool = true) {

    let transform1 = CGAffineTransform(rotationAngle: .pi * 0.75)
    let transform2 = CGAffineTransform(rotationAngle: .pi * 1.5)

    let animationOptions: UInt
    if repeating {
        animationOptions = UIView.AnimationOptions.curveLinear.rawValue | UIView.AnimationOptions.repeat.rawValue
    } else {
        animationOptions = UIView.AnimationOptions.curveLinear.rawValue
    }

    let keyFrameAnimationOptions = UIView.KeyframeAnimationOptions(rawValue: animationOptions)

    UIView.animateKeyframes(withDuration: duration, delay: 0, options: [keyFrameAnimationOptions, .calculationModeLinear], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.375) {
            view.transform = transform1
        }
        UIView.addKeyframe(withRelativeStartTime: 0.375, relativeDuration: 0.375) {
            view.transform = transform2
        }
        UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
            view.transform = .identity
        }
    }, completion: nil)
}

Looks pretty gnarly, with the weird rotation angles, but as the op & others have found, you can't just tell it to rotate 360

Try this one it works for me, i am rotating image for once

 UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveLinear, animations: {

       self.imgViewReload.transform = CGAffineTransformRotate(self.imgViewReload.transform, CGFloat(M_PI))

 }, completion: {
    (value: Bool) in

          UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveLinear, animations: {
          self.imgViewReload.transform = CGAffineTransformIdentity

         }, completion: nil)
 })

you can use this function ... just give it the view and the duration

it has two animations the the first rotates the view 180° and the other one rotates it to 360° then the function calls itself which allows it to continue the rotation animation infinitely

func infinite360Animation(targetView: UIView, duration: Double) {
    UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
        targetView.transform = CGAffineTransform.identity.rotated(by: .pi )
    } completion: { (_) in
        UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
            targetView.transform = CGAffineTransform.identity.rotated(by: .pi * 2)
        } completion: { (_) in
            self.infinite360Animation(targetView: targetView, duration: duration)
        }
    }
}

You can then call the function like this

infinite360Animatio(targetView: yourView, duration: 3)

On your tabBarController, make sure to set your delegate and do the following didSelect method below:

func tabBarController(_ tabBarController: UITabBarController,
                          didSelect viewController: UIViewController) {
        if let selectedItem:UITabBarItem = tabBarController.tabBar.selectedItem {
            animated(tabBar: tabBarController.tabBar, selectedItem: selectedItem)
        }
    }




fileprivate func animated(tabBar: UITabBar, selectedItem:UITabBarItem){
        if let view:UIView = selectedItem.value(forKey: "view") as? UIView {
            if let currentImageView = view.subviews.first as? UIImageView {
                rotate(imageView: currentImageView, completion: { (completed) in
                    self.restore(imageView: currentImageView, completion: nil)
                })
            }
        }
    }

    fileprivate func rotate(imageView:UIImageView, completion:((Bool) ->Void)?){
        UIView.animate(withDuration: animationSpeed, delay: 0.0, options: .curveLinear, animations: {
            imageView.transform = CGAffineTransform.init(rotationAngle: CGFloat.pi)
        }, completion: {
            (value: Bool) in
            completion?(value)
        })
    }

    fileprivate func restore(imageView:UIImageView, completion:((Bool) ->Void)?){
        UIView.animate(withDuration: animationSpeed, delay: 0.0, options: .curveLinear, animations: {
            imageView.transform = CGAffineTransform.identity
        }, completion: {
            (value: Bool) in
            completion?(value)
        })
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM