竖折动画 [英] Vertical Fold Animation
本文介绍了竖折动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为我的UIView垂直创建折动画..长的搜索后，我发现下面的链接.. <一href=\"http://stackoverflow.com/questions/5456642/origami-transition-using-catransform3d-perspective/13541752#comment18544844_13541752\">Origami使用CATransform3D角度。从上面的链接过渡我只是尝试了以下内容。它给我确切的动画。通过我的UIView出现在反向..我不知道我搞砸了..任何帮助将是AP preciated ..
- （IBAction为）动画
{
CATransform3D变换= CATransform3DIdentity;
CALayer的* topSleeve;
CALayer的* middleSleeve;
CALayer的* topShadow;
CALayer的* middleShadow;
UIView的* MAINVIEW;
CGFloat的宽度= self.view.frame.size.width;
CGFloat的高度= self.view.frame.size.height;
CALayer的* firstJointLayer;
CALayer的* secondJointLayer;
CALayer的* perspectiveLayer; MAINVIEW = [[UIView的的alloc] initWithFrame：方法CGRectMake（0，0，宽度，高度）];
mainView.backgroundColor =的UIColor clearColor]
[self.view addSubview：MAINVIEW]; UIGraphicsBeginImageContext（self.view.bounds.size）;
[self.view.layer renderInContext：UIGraphicsGetCurrentContext（）];
*的UIImage = viewImage UIGraphicsGetImageFromCurrentImageContext（）;
UIGraphicsEndImageContext（）;
CGSize大小= CGSizeMake（viewImage.size.width / 2，viewImage.size.height）;
UIGraphicsBeginImageContextWithOptions（大小，NO，0.0）;
CGContextRef上下文= UIGraphicsGetCurrentContext（）;
CGContextSetFillColorWithColor（上下文，[[的UIColor blackColor] CGColor]）;
CGContextFillRect（上下文，CGRectMake（0，0，size.width，size.height））;
*的UIImage = solidColorImage UIGraphicsGetImageFromCurrentImageContext（）;
UIGraphicsEndImageContext（）; //图像的左半部分
UIGraphicsBeginImageContextWithOptions（大小，NO，0.0）;
[viewImage drawAtPoint：CGPointMake（0，0）blendMode：kCGBlendModeNormal阿尔法：1.0];
*的UIImage = leftImage UIGraphicsGetImageFromCurrentImageContext（）;
UIGraphicsEndImageContext（）;
UIGraphicsBeginImageContextWithOptions（大小，NO，0.0）;
[viewImage drawAtPoint：CGPointMake（-size.width，0）blendMode：kCGBlendModeNormal阿尔法：1.0];
[solidColorImage drawAtPoint：CGPointMake（0,0）blendMode：kCGBlendModeMultiply阿尔法：0.1];
*的UIImage =右图UIGraphicsGetImageFromCurrentImageContext（）;
UIGraphicsEndImageContext（）; perspectiveLayer = [CALayer的层]
perspectiveLayer.frame = CGRectMake（0，0，宽/ 2，高度）;
[mainView.layer addSublayer：perspectiveLayer]; firstJointLayer = [CATransformLayer层]
firstJointLayer.frame = mainView.bounds;
[perspectiveLayer addSublayer：firstJointLayer]; topSleeve = [CALayer的层]
topSleeve.frame = CGRectMake（0，0，宽/ 2，高度）;
topSleeve.anchorPoint = CGPointMake（0，0.5）;
topSleeve.backgroundColor = [的UIColor colorWithPatternImage：leftImage] .CGColor;
topSleeve.position = CGPointMake（0，高度/ 2）;
[firstJointLayer addSublayer：topSleeve];
topSleeve.masksToBounds = YES; secondJointLayer = [CATransformLayer层]
secondJointLayer.frame = mainView.bounds;
secondJointLayer.frame = CGRectMake（0，0，宽度，高度）;
secondJointLayer.anchorPoint = CGPointMake（0，0.5）;
secondJointLayer.position = CGPointMake（宽度/ 2，高度/ 2）;
[firstJointLayer addSublayer：secondJointLayer]; middleSleeve = [CALayer的层]
middleSleeve.frame = CGRectMake（0，0，宽/ 2，高度）;
middleSleeve.anchorPoint = CGPointMake（0，0.5）;
middleSleeve.backgroundColor = [的UIColor colorWithPatternImage：右图] .CGColor;
middleSleeve.position = CGPointMake（0，高度/ 2）;
[secondJointLayer addSublayer：middleSleeve];
middleSleeve.masksToBounds = YES;
firstJointLayer.anchorPoint = CGPointMake（0，0.5）;
firstJointLayer.position = CGPointMake（0，高度/ 2）; topShadow = [CALayer的层]
[topSleeve addSublayer：topShadow];
topShadow.frame = topSleeve.bounds;
topShadow.backgroundColor =的UIColor blackColor] .CGColor;
topShadow.opacity = 0.5; middleShadow = [CALayer的层]
[middleSleeve addSublayer：middleShadow];
middleShadow.frame = middleSleeve.bounds;
middleShadow.backgroundColor =的UIColor blackColor] .CGColor;
middleShadow.opacity = 0.5; transform.m34 = 1.0 /（ - 700.0）;
perspectiveLayer.sublayerTransform =变换; CABasicAnimation *动画= [CABasicAnimation animationWithKeyPath：@transform.rotation.y];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：90 * M_PI / 180];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[firstJointLayer addAnimation：动画forKey：无]; 动画= [CABasicAnimation animationWithKeyPath：@transform.rotation.y];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：-180 * M_PI / 180];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[secondJointLayer addAnimation：动画forKey：无]; 动画= [CABasicAnimation animationWithKeyPath：@bounds.size.width];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：perspectiveLayer.bounds.size.width]];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[perspectiveLayer addAnimation：动画forKey：无]; 动画= [CABasicAnimation animationWithKeyPath：@position.x];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：perspectiveLayer.position.x]];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[perspectiveLayer addAnimation：动画forKey：无]; 动画= [CABasicAnimation animationWithKeyPath：@不透明度];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：0.5]];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[topShadow addAnimation：动画forKey：无]; 动画= [CABasicAnimation animationWithKeyPath：@不透明度];
[动画setDuration：2];
[动画setAutoreverses：YES];
[动画setRepeatCount：INFINITY];
[动画setFromValue：[NSNumber的numberWithDouble：0.5]];
[动画setToValue：[NSNumber的numberWithDouble：0]];
[middleShadow addAnimation：动画forKey：无];}
解决方案
这是因为CALayer的绘制其背景翻转。你每个图像更好地设置为CALayer的内容，这将吸引每个图像预期（不翻转）。顺便说一句，大图像模式可能会增加内存使用情况，所以你应该避免。
topSleeve.contents =（ID）leftImage.CGImage;
middleSleeve.contents =（ID）rightImage.CGImage;
I am trying to create fold animation for my UIView vertically.. After long search i found the following link.. Origami transition using CATransform3D perspective .. From the above link i just tried the following.. It gives me the exact animation.. By my UIView appears in reverse.. I dont know where i messed up.. Any help would be appreciated..
-(IBAction)animate
{
CATransform3D transform = CATransform3DIdentity;
CALayer *topSleeve;
CALayer *middleSleeve;
CALayer *topShadow;
CALayer *middleShadow;
UIView *mainView;
CGFloat width = self.view.frame.size.width;
CGFloat height = self.view.frame.size.height;
CALayer *firstJointLayer;
CALayer *secondJointLayer;
CALayer *perspectiveLayer;
mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
mainView.backgroundColor = [UIColor clearColor];
[self.view addSubview:mainView];
UIGraphicsBeginImageContext(self.view.bounds.size);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGSize size = CGSizeMake(viewImage.size.width / 2, viewImage.size.height);
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height));
UIImage *solidColorImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// The left half of the image
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
[viewImage drawAtPoint:CGPointMake(0, 0) blendMode:kCGBlendModeNormal alpha:1.0];
UIImage *leftImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
[viewImage drawAtPoint:CGPointMake(-size.width, 0) blendMode:kCGBlendModeNormal alpha:1.0];
[solidColorImage drawAtPoint:CGPointMake(0, 0) blendMode:kCGBlendModeMultiply alpha:0.1];
UIImage *rightImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
perspectiveLayer = [CALayer layer];
perspectiveLayer.frame = CGRectMake(0, 0, width/2, height);
[mainView.layer addSublayer:perspectiveLayer];
firstJointLayer = [CATransformLayer layer];
firstJointLayer.frame = mainView.bounds;
[perspectiveLayer addSublayer:firstJointLayer];
topSleeve = [CALayer layer];
topSleeve.frame = CGRectMake(0, 0, width/2, height);
topSleeve.anchorPoint = CGPointMake(0, 0.5);
topSleeve.backgroundColor = [UIColor colorWithPatternImage:leftImage].CGColor;
topSleeve.position = CGPointMake(0, height/2);
[firstJointLayer addSublayer:topSleeve];
topSleeve.masksToBounds = YES;
secondJointLayer = [CATransformLayer layer];
secondJointLayer.frame = mainView.bounds;
secondJointLayer.frame = CGRectMake(0, 0, width, height);
secondJointLayer.anchorPoint = CGPointMake(0, 0.5);
secondJointLayer.position = CGPointMake(width/2, height/2);
[firstJointLayer addSublayer:secondJointLayer];
middleSleeve = [CALayer layer];
middleSleeve.frame = CGRectMake(0, 0, width/2, height);
middleSleeve.anchorPoint = CGPointMake(0, 0.5);
middleSleeve.backgroundColor = [UIColor colorWithPatternImage:rightImage].CGColor;
middleSleeve.position = CGPointMake(0, height/2);
[secondJointLayer addSublayer:middleSleeve];
middleSleeve.masksToBounds = YES;
firstJointLayer.anchorPoint = CGPointMake(0, 0.5);
firstJointLayer.position = CGPointMake(0, height/2);
topShadow = [CALayer layer];
[topSleeve addSublayer:topShadow];
topShadow.frame = topSleeve.bounds;
topShadow.backgroundColor = [UIColor blackColor].CGColor;
topShadow.opacity = 0.5;
middleShadow = [CALayer layer];
[middleSleeve addSublayer:middleShadow];
middleShadow.frame = middleSleeve.bounds;
middleShadow.backgroundColor = [UIColor blackColor].CGColor;
middleShadow.opacity = 0.5;
transform.m34 = 1.0/(-700.0);
perspectiveLayer.sublayerTransform = transform;
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:90*M_PI/180]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[firstJointLayer addAnimation:animation forKey:nil];
animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:-180*M_PI/180]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[secondJointLayer addAnimation:animation forKey:nil];
animation = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:perspectiveLayer.bounds.size.width]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[perspectiveLayer addAnimation:animation forKey:nil];
animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:perspectiveLayer.position.x]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[perspectiveLayer addAnimation:animation forKey:nil];
animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:0.5]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[topShadow addAnimation:animation forKey:nil];
animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
[animation setDuration:2];
[animation setAutoreverses:YES];
[animation setRepeatCount:INFINITY];
[animation setFromValue:[NSNumber numberWithDouble:0.5]];
[animation setToValue:[NSNumber numberWithDouble:0]];
[middleShadow addAnimation:animation forKey:nil];
}
解决方案
This is because CALayer draws its background flipped. You'd better set each image to CALayer contents, which will draw each image as expected (not flipped). By the way, patterns with big images might increase memory usage, so you should avoid them.
topSleeve.contents = (id)leftImage.CGImage;
middleSleeve.contents = (id)rightImage.CGImage;
这篇关于竖折动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
