How to have a full rotation of a circular object using uiview animation

I am trying to iterate over partial circles to achieve an animation, but it only rotates 180 degrees and then starts again from 0 degrees to 180 degrees. Thus, there is a sharp jump from 180 degrees to 360 degrees. How can I rotate a circular image object continuously without any jumps? Here is my current code:

UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear|UIViewAnimationOptionRepeat; [UIView animateWithDuration:ROTATE_ANIMATION_DURATION/2 delay:0 options:options animations:^{ view.transform = CGAffineTransformRotate(transform, M_PI);}//1st step of animation finished completion:^(BOOL finished) { [UIView animateWithDuration:ROTATE_ANIMATION_DURATION/2 delay:0 options:options animations:^{ view.transform = CGAffineTransformRotate(transform, M_PI);} //2nd step of animation finished completion:^(BOOL finished) {nil; }]; 
+4
source share
4 answers

Spin UI user interface, animation rotates 360 degrees
you need to add the QuartzCore Framework to your project and enable

 #import QuartzCore/QuartzCore.h 

Add animation for an object:

  CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; fullRotation.fromValue = [NSNumber numberWithFloat:0]; fullRotation.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)]; fullRotation.duration = 6; fullRotation.repeatCount = 1e100f; [myview.layer addAnimation:fullRotation forKey:@"360"]; 
+14
source

I found the old code that I use to rotate 360 ​​degrees, hope this helps. You will need to import QuartzCore.

 CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.zRad"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0]; rotationAnimation.duration = 3; rotationAnimation.cumulative = YES; rotationAnimation.repeatCount = INFINITY; rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [viewToAnimate.layer addAnimation:rotationAnimation forKey:@"transform.rotation.zRad"]; 
+3
source

There are various ways to perform 360-degree animation with a UIView.

Using CABasicAnimation

 var rotationAnimation = CABasicAnimation() rotationAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z") rotationAnimation.toValue = NSNumber(value: (Double.pi * 2.0)) rotationAnimation.duration = 1.0 rotationAnimation.isCumulative = true rotationAnimation.repeatCount = 100.0 view.layer.add(rotationAnimation, forKey: "rotationAnimation") 


Here are the extension functions for UIView that handle rotation start and stop operations:

 extension UIView { // Start rotation func startRotation() { let rotation = CABasicAnimation(keyPath: "transform.rotation.z") rotation.fromValue = 0 rotation.toValue = NSNumber(value: Double.pi * 2) rotation.duration = 1.0 rotation.isCumulative = true rotation.repeatCount = FLT_MAX self.layer.add(rotation, forKey: "rotationAnimation") } // Stop rotation func stopRotation() { self.layer.removeAnimation(forKey: "rotationAnimation") } } 


Now, using the closure of UIView.animation :

 UIView.animate(withDuration: 0.5, animations: { view.transform = CGAffineTransform(rotationAngle: (CGFloat(Double.pi)) }) { (isAnimationComplete) in UIView.animate(withDuration: 0.5) { view.transform = CGAffineTransform(rotationAngle: (CGFloat(Double.pi)) } } 
+1
source
 BOOL animating; - (void)spinWithOptions:(UIViewAnimationOptions)options { [UIView animateWithDuration:0.5 delay:0 options:options animations:^{ self.imageToMove.transform = CGAffineTransformRotate(imageToMove.transform, M_PI / 2); } completion:^(BOOL finished) { if (finished) { if (animating) { [self spinWithOptions: UIViewAnimationOptionCurveLinear]; } else if (options != UIViewAnimationOptionCurveEaseOut) { [self spinWithOptions: UIViewAnimationOptionCurveEaseOut]; } } }]; } - (void)startSpin { if (!animating) { animating = YES; [self spinWithOptions: UIViewAnimationOptionCurveEaseIn]; } } - (void)stopSpin { // set the flag to stop spinning after one last 90 degree increment animating = NO; } 

You can start and stop view animation by calling the startSpin and stopSpin methods, respectively.

And here is a quick answer:

 func spin(with options: UIViewAnimationOptions) { UIView.animate(withDuration: 0.5, delay: 0, options: options, animations: {() -> Void in self.imageToRotate.transform = self.imageToRotate.transform.rotated(by: .pi / 2) }, completion: {(_ finished: Bool) -> Void in if finished { if self.animating { self.spin(with: .curveLinear) } else if options != .curveEaseOut { self.spin(with: .curveEaseOut) } } }) } func startSpin() { if !animating { animating = true spin(with: .curveEaseIn) } } func stopSpin() { animating = false } 
-1
source

Source: https://habr.com/ru/post/1433491/


All Articles