[英]Rotation Animation on UIImageView
我有陽光圖像。 我喜歡將其放在背景上,並使其以慢動作連續旋轉。
圖像是這個。
我曾嘗試使用CABasicAnimation旋轉它,但它旋轉了整個框架..我只希望陽光在背景而不是整個框架上旋轉。
有什么辦法嗎?
更新:
這是我在做什么...請指出我的錯誤... :(
我沒有你解釋過的explained .. :(
這是我在做什么...
- (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];
}
更新中...
我做了你說的玉米片...謝謝你的答復,但是我得到了黑屏.. :(
我已經編碼了...
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];
什么是錯誤的代碼?
好吧,我認為您應該生成不同的圖像,然后嘗試對此進行動畫處理
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;
}
上述功能可用於提供旋轉的圖像。
我認為您的方法是正確的;)您必須有一個容器對其進行修剪,以免看起來像孔框架在旋轉。
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];
我知道這是很舊的帖子。 一種解決方案是使圖像的黃色部分透明。 您可以使用免費工具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"];
斯威夫特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
}
使用擴展名查看結果:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.