2010-12-01 143 views
0

我有陽光圖像。我喜歡把它的背景,使其在慢動作時間可持續旋轉..UIImageView上的旋轉動畫

的形象是這樣的..

alt text

我試着CABasicAnimation旋轉它,但它旋轉整個框架..我只想陽光旋轉在不是整個框架的背景..

有沒有辦法做到這一點?

更新:

這裏是什麼M做......請您指出我的錯誤... :(

我沒有得到笏u've解釋.. :(

這裏是什麼M做...

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

} 

更新...

我做了什麼ü說,納喬...感謝您的回覆,但m如果一個blankscreen .. :(

我編寫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]; 

什麼是錯的婦女參與發展的代碼? ?

回答

1

我認爲你是在正確的方式;)你必須有一個容器,它剪輯它,因此它不會看起來像孔框架旋轉。

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

另外。如果可能的話使用的CALayer而不是ImageView的;)

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

注:上面的代碼是大腦編譯,所以可能有一些小錯誤,但這個想法是明確的;)

希望它可以幫助

編輯:

嘿;)我想你忘了添加容器到您的視圖。 ;)

我剛剛嘗試了代碼,我意識到容器的幀計算是不精確的(即使你不這樣做,它會工作,但動畫看起來有點難看) 這是代碼:

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

米沒得到什麼ü解釋.. :( – Hisenberg 2010-12-01 11:37:08

+0

我已經編輯我的代碼。 ..現在它顯示爲空白屏幕... – Hisenberg 2010-12-01 11:54:24

3

嗯,我想你應該產生不同的圖像,然後嘗試動畫這個

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

在我已分別增加了圖像上面的代碼,但你可以在一個循環填充它們。

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

}

上述功能可用於給旋轉的圖像..

0

我知道這是很老的帖子。 一個解決方案是讓您的圖像在黃色部分透明。你可以使用免費的工具pngweasel。使黃色部分透明 - 這將只提供太陽光線的圖像。爲此圖像使用純黃色背景。現在,您可以使用下面的代碼輕鬆旋轉新(太陽射線)圖像

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

斯威夫特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") 


這裏是UIView的一個擴展功能,處理開始&停止旋轉操作:

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


現在使用,UIView.animation關閉:

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

使用延長看到的結果是:

enter image description here