0

I have a sunrays image. I like to put it on the background and make it rotate continuosly in a slow motion..

The image is this..

alt text

i've tried rotating it with CABasicAnimation, but it rotates the whole frame.. i want just the sunrays to revolve at the background not the whole frame..

Is there any way to do it???

Update:

Here is what m doing...please point out my mistakes... :(

i didn't got wat u've explained.. :(

here is what m doing...

 - (void)viewDidLoad {
sunraysContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
sunraysContainer.clipsToBounds = YES;
[self.view addSubview:sunraysContainer];


sunrays = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
[sunrays setImage:[UIImage imageNamed:@"sunlight-background copy2.jpg"]];
[sunraysContainer addSubview:sunrays];

backgroundBuilding = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
[backgroundBuilding setImage:[UIImage imageNamed:@"hira-background_fade.png"]];
 [sunraysContainer addSubview:backgroundBuilding];

[UIView beginAnimations:nil context:nil];
 [UIView setAnimationDuration:5];
 CABasicAnimation *rotationAnimation;
 rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
 rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0 * 4.0];
 rotationAnimation.duration = 1;
 rotationAnimation.cumulative = YES;
 rotationAnimation.repeatCount = 10;
 rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
 [sunrays.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
 [UIView commitAnimations];

 }

Update...

I did what u said nacho...thanks for your reply,but m getting a blankscreen.. :(

i've coded dis...

   sunrays = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sunlight-background copy2.jpg"]];
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0,0,sunrays.frame.size.height,sunrays.frame.size.height)];
[container setClipsToBounds:YES];
[container addSubview:sunrays];
[sunrays setCenter:CGPointMake(container.bounds.size.width/2, container.bounds.size.height/2)]; 
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:5];
CABasicAnimation *rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0 * 4.0];
rotationAnimation.duration = 1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 10;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[sunrays.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
[UIView commitAnimations];

what is wrong wid the code??

4 Answers 4

3

Well I think you should generate different images and then try to animate this

imgLoading.animationImages = [NSArray arrayWithObjects:
                              [UIImage imageNamed:@"Img1.png"]
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:30.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:60.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:90.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:120.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:150.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:180.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:210.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:240.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:270.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:300.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:330.0]],
                              [UIImage imageWithCGImage:
                               [self CGImageRotatedByAngle:
                                [[UIImage imageNamed:@"Img1.png"] CGImage]angle:360.0]], nil];

imgLoading.animationRepeatCount=0;
imgLoading.animationDuration=.5;
[imgLoading startAnimating];

In the above code I have added the images separately but you can populate them in a loop.

- (CGImageRef)CGImageRotatedByAngle:(CGImageRef)imgRef angle:(CGFloat)angle

{

CGFloat angleInRadians = angle * (M_PI / 180);
CGFloat width = CGImageGetWidth(imgRef);
CGFloat height = CGImageGetHeight(imgRef);

CGRect imgRect = CGRectMake(0, 0, width, height);
CGAffineTransform transform = CGAffineTransformMakeRotation(angleInRadians);
CGRect rotatedRect = CGRectApplyAffineTransform(imgRect, transform);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGContextRef bmContext = CGBitmapContextCreate(NULL,
                                               rotatedRect.size.width,
                                               rotatedRect.size.height,
                                               8,
                                               0,
                                               colorSpace,
                                               kCGImageAlphaPremultipliedFirst);
CGContextSetAllowsAntialiasing(bmContext, YES);
CGContextSetShouldAntialias(bmContext, YES);
CGContextSetInterpolationQuality(bmContext, kCGInterpolationHigh);
CGColorSpaceRelease(colorSpace);
CGContextTranslateCTM(bmContext,
                      +(rotatedRect.size.width/2),
                      +(rotatedRect.size.height/2));
CGContextRotateCTM(bmContext, angleInRadians);
CGContextTranslateCTM(bmContext,
                      -(rotatedRect.size.width/2),
                      -(rotatedRect.size.height/2));
CGContextDrawImage(bmContext, CGRectMake(0, 0,
                                         rotatedRect.size.width,
                                         rotatedRect.size.height),
                   imgRef);



CGImageRef rotatedImage = CGBitmapContextCreateImage(bmContext);
CFRelease(bmContext);
[(id)rotatedImage autorelease];

return rotatedImage;

}

The Above function can be used to give the rotated images..

0
1

I think you are in the correct way ;) You have to have a container that clips it so it won't look like the hole frame is rotating.

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];
UIView *container = [UIView alloc] initWithFrame:CGRectMake(0,0,imageView.frame.size.height, image.frame.size.height)]; //i used the height because is the min(height, width).
[container setClipsToBounds:YES];
[container addSubview:imageView];
[imageView setCenter:CGPointMake(container.bounds.size.width/2, container.bounds.size.height/2)];
//animate your image here
...

Also. if possible use a CALayer instead of an imageView ;)

CALayer *imageLayer = [CALayer layer];
imageLayer.contents = (id)[UIImage imageNamed:@"myimage.png"].CGImage;
// and do basically the same as above,
[container.layer addSublayer:imageLayer];
//...

NOTE: above code is brain compiled, so there might be some small errors, but the idea is clear ;)

Hope it helps

EDIT:

Hey ;) I think you forgot to add container to your view. ;)

And I just tried the code and I realized that container's frame calculation was inexact.(Even if you don't to this it will work, but the animation will look a little bit ugly) Here is the code:

    UIImage *image = [UIImage imageNamed:@"sunrays.jpg"];
    UIImageView *sunrays = [[UIImageView alloc] initWithImage:image];
    float side = (MIN(image.size.height, image.size.width)/(2.0*sqrt(2)));
    UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0,0,side,side)];
    [container setClipsToBounds:YES];
    [container addSubview:sunrays];
    [sunrays setCenter:CGPointMake(container.bounds.size.width/2, container.bounds.size.height/2)]; 

    [self.view addSubview:container]; //you forgot this? ;)

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:5];
    CABasicAnimation *rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0 * 4.0];
    rotationAnimation.duration = 1;
    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = 10;
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [sunrays.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
    [UIView commitAnimations];
2
  • m didn't get what u explained.. :(
    – Shrey
    Commented Dec 1, 2010 at 11:37
  • I have updated my answer, please take a look. BTW, if you need container to be bigger, then you are gonna need a bigger image since currently is the biggest posible, other wise you will see the frame rotating effect. The maths are very simple. You should have no problems with it ;)
    – nacho4d
    Commented Dec 1, 2010 at 15:03
0

I know it is very old post. One solution is to make your image transparent in yellow part. You can use free tool pngweasel. Make yellow part transparent - This will give only image of sun rays. Use plain yellow background for this image. Now you can easily rotate new (sun rays) image using below code

CABasicAnimation *rotate;
rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotate.fromValue = [NSNumber numberWithFloat:0];
rotate.toValue = [NSNumber numberWithFloat:(0.0175*180)]; //[NSNumber numberWithFloat:deg2rad(10)];
rotate.duration = 0.5;
rotate.repeatCount = 1;
[self.image.layer addAnimation:rotate forKey:@"10"];
0

Swift 3:

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


Here is an extension functions for UIView that handles start & stop rotation operations:

extension UIImageView {

    func startRotation() {
        let rotation : CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotation.fromValue = 0
        rotation.toValue = NSNumber(value: Double.pi)
        rotation.duration = 5.0
        rotation.isCumulative = true
        rotation.repeatCount = FLT_MAX
        self.layer.add(rotation, forKey: "rotationAnimation")
    }

    func stopRotation() {
        self.layer.removeAnimation(forKey: "rotationAnimation")
    }
}


Now using, UIView.animation closure:

UIView.animate(withDuration: 0.5, animations: { 
      imageView.transform = CGAffineTransform(rotationAngle: (CGFloat(Double.pi)) 
}) { (isAnimationComplete) in
    // Animation completed 
}

See the result using extension:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.