2010-12-01 23 views
0

J'ai une image sunrays. Je tiens à le mettre sur le fond et la faire tourner dans un mouvement continuosly lent ..Rotation Animation sur UIImageView

L'image est ce ..

alt text

J'ai essayé en rotation avec CABasicAnimation, mais il tourne toute la trame .. je veux juste les sunrays pour tourner à l'arrière-plan pas toute la trame ..

Y at-il un moyen de le faire ???

Mise à jour:

Voici ce que fais ... s'il vous plaît signaler mes erreurs ... :(

je n'ai pas obtenu wat u've expliqué .. :(

voici ce que fais ...

- (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]; 

} 

Mise à jour ...

Je l'ai fait ce que tu dit ... nachos merci pour votre réponse, mais m obtenir un blankscreen .. :(

j'ai dis ... codé

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]; 

ce qui est mal wid le code? ?

Répondre

1

Je pense que vous êtes dans le bon sens;) Vous devez avoir un conteneur qui l'attache afin qu'il ne ressemble pas à la rotation du cadre du trou.

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 
... 

Egalement. si possible une CALayer au lieu d'un 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: code ci-dessus est le cerveau compilé, donc il pourrait y avoir quelques petites erreurs, mais l'idée est claire)

Hope it helps

EDIT:

Hey;) Je pense que vous avez oublié d'ajouter un conteneur à votre vue.

Et j'ai juste essayé le code et j'ai réalisé que le calcul du cadre du conteneur était inexact. (Même si vous ne le faites pas, cela fonctionnera, mais l'animation semblera un peu moche) Voici le 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]; 
+0

m n'a pas obtenu ce que u .. :(expliqué – Hisenberg

+0

j'ai édité mon code. ..n maintenant il apparaît comme écran blanc vide ... – Hisenberg

+0

J'ai mis à jour ma réponse, s'il vous plaît jeter un oeil. BTW, si vous avez besoin d'un conteneur pour être plus grand, alors vous aurez besoin d'une image plus grande car actuellement est la plus grande posible, sinon vous verrez l'effet de rotation du cadre. Les maths sont très simples. Vous ne devriez pas avoir de problèmes avec cela;) – nacho4d

3

Eh bien, je pense que vous devriez générer des images différentes et puis essayer d'animer cette

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]; 

dans le code ci-dessus, j'ai ajouté les images séparément, mais vous pouvez les remplir dans une boucle.

- (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; 

}

La fonction ci-dessus peut être utilisé pour donner les images ayant subi une rotation ..

+3

s'il vous plaît faire plus d'explications, moins de collage de code – johannes

+1

Certains Plus d'informations vous seront utiles. – Hisenberg

0

Je sais qu'il est très ancien poste. Une solution consiste à rendre votre image transparente en partie jaune. Vous pouvez utiliser l'outil gratuit pngweasel. Rendre la partie jaune transparente - Cela donnera seulement l'image des rayons du soleil. Utilisez un fond jaune clair pour cette image. Maintenant, vous pouvez facilement tourner nouveaux (rayons du soleil) image à l'aide ci-dessous le 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") 


Voici une des fonctions d'extension pour UIView qui gère commencer & opérations de rotation d'arrêt:

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") 
    } 
} 


Maintenant, en utilisant, fermeture UIView.animation:

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

Voir le résultat en utilisant l'extension:

enter image description here