I have to views. One on top of the other.
But i cannot click the subviews of the top view until I set the alpha of the bottom view to 0.0.
Why would that be? Is there some kind of work around?
Code involved
-(void)setUpOpponentsCardStartingPosition
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
CGRect newF = deckCard.view.frame;
newF.origin.x -= CGRectGetWidth(newF);
deckCard.view.layer.transform = CATransform3DIdentity;
deckCard.view.frame = newF;
deckCard.view.alpha = 0.0;
[UIView commitAnimations];
playersCard.view.layer.transform = CATransform3DScale(CATransform3DIdentity, 0.97,
0.97, 1.0);
opponentsCard.view.layer.transform = CATransform3DRotate(CATransform3DIdentity, -
35*M_PI/180, 0.0, 1.0, 0.0);
opponentsCard.view.layer.transform =
CATransform3DScale(opponentsCard.view.layer.transform, 0.65, 0.675, 1.0);
opponentsCard.view.layer.transform =
CATransform3DTranslate(opponentsCard.view.layer.transform, 400, 0, 0);
opponentsCard.view.hidden = NO;
}
if i comment out the deckCard.view.alpha = 0.0; it wont let me interact with playersCard. This makes no sense to me since playersCard is on top.
Here is setup code for deckCard
-(void)setupDeckInBackground
{
deckCard.view.alpha = 0.0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
deckCard.view.frame = playersCard.view.frame;
deckCard.view.alpha = 1.0;
deckCard.view.layer.zPosition = -1;
deckCard.view.layer.transform = CATransform3DMakeRotation(M_PI/180*5, 0, 0, 1);
deckCard.view.layer.transform = CATransform3DScale(deckCard.view.layer.transform,
1.0, 1.0, 1.0);
deckCard.view.layer.transform =
CATransform3DTranslate(deckCard.view.layer.transform, 0, 0, -25);
[UIView commitAnimations];
}
Thanks
-Code
I found that the solution was to use
deckCard.view.userInteractionEnabled = NO;
Thanks,
-Code
Related
I'm working on UIButton animation where:
The UIButton is set in the bottom center of the screen and scaled to a small size
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
When the app starts it should be moving to the bottom left side of the screen as it scales or grow to its original size.
- (void)viewDidLoad
{
[super viewDidLoad];
_menuBtn.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.superview.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
NSLog(#"_menuBtn: %# ; _menuBtn.superview: %#", _menuBtn, _menuBtn.superview);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
problem
When the animation starts the button starts moving from the bottom right side of the screen and not in the bottom center where it is and should be. Any help ?
Log Result
NSLog(#"%#", _myBtn);
2013-08-14 09:22:38.913 GJCoolNavi[339:c07] <UIButton: 0x813ea30; frame = (0 0; 0 0); opaque = NO; autoresize = TM+BM; layer = <CALayer: 0x813eaf0>>
thats before doing the animation...and the result after the animation is:
2013-08-14 09:30:25.719 GJCoolNavi[612:c07] <UIButton: 0x71206d0; frame = (160 294; 0 0); opaque = NO; autoresize = TM+BM; animations = { transform=<CABasicAnimation: 0x7536a80>; position=<CABasicAnimation: 0x7537dd0>; }; layer = <CALayer: 0x7120790>>
Why don't you do this...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:5.0
options:UIViewAnimationOptionCurveEaseOut
animations:^(){
_menuBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
_menuBtn.center = self.view.center;
}
completion:nil];
I'd avoid moving stuff using a transform. Change the frame instead.
EDIT
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
// for convenience I'm pulling these values out in to variables.
float buttonWidth = _menuBtn.frame.size.width;
float buttonHeight = _menuBtn.frame.size.height;
float viewWidth = self.view.frame.size.width;
float viewHeight = self.view.frame.size.height;
// set the button frame to be the bottom center
// note you shouldn't have to do this as Interface Builder should already place it there.
// place the button in the horizontal center and 20 points from the bottom of the view.
_menuBtn.frame = CGRectMake((viewWidth - buttonWidth) * 0.5, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
// scale the button down before the animation...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
// now animate the view...
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
_menuBtn.transform = CGAffineTransformIdentity;
_menuBtn.frame = CGRectMake(viewWidth - buttonWidth - 20, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
}
completion:nil];
}
Try this and let me know what happens.
This has solved a similar problem.
Apply a (UIButton).imageView Animation.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.imageView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
This phenomenon indicates that your button's original frame is wrong, probably because of its auto-resizing. Try setting its frame to the bottom center before you start the animation.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
_menuBtn.superview.frame = CGRectMake(0, 513, 320, 30); // This is a quick and dirty solution to make sure your button's superview is in the right place. You probably don't want to do this and are more likely to review your view hierarchy.
_menuBtn.frame = CGRectMake(145, 0, 30, 30); // Set the frame to the bottom center, please ensure that _menuBtn's transform hasn't been changed before this step
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
I have used your code and its moving from bottom center to to bottom left perfectly. Might be your superview isn't in proper rect. Please check.
I have a CGRectMake that used to jump an image to a different position
image.frane=CGRectMake( x,y,w,h);
Then I wanted to translate and scale a Label (on the same ViewController) to another position
CGPoint newCenter = CGPointMake(x,y);
[UIView animateWithDuration: 1.0
delay: 0
options: 0
animations:^{label.center = newCenter ; label.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.2, 0.2);}
completion:^(BOOL finished) {
label.transform = CGAffineTransformMakeScale(1.0, 1.0);
label.alpha = 0;
}
];
The problem I'm having is when I use the animateWithDuration the image doesn't move but the Label does. If I comment out the animation the image moves again. Am I doing something wrong?
try this bellow code...
[UIView animateWithDuration:1.0f animations:^{
imageView.frame = CGRectMake(newCenter.x, newCenter.y, imageView.frame.size.width, imageView.frame.size.height);
}];
Also you can move UIImageView or anything else with this bellow code... i use this code for scroll the UIScrollView when keyboard appear.. i add the code with your requirement..
UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
imageView.frame = CGRectMake(newCenter.x, newCenter.y, imageView.frame.size.width, imageView.frame.size.height);
[UIView commitAnimations];
i hope this helpful to you...
Given:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:.5];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:card cache:NO];
myPic = [UIImage UIImagenamed: #"mySecondImage.png"];
[UIView commitAnimations];[/CODE]
Which animates 'myPic' right to left with a flip.
I need to get the same animation, but vertically. Flip from Top or Flip from Bottom. I looked around, no one really had a working model suggested.
I tried this, yet, no luck:
float duration = .5;
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.x"];
animation.fromValue = [NSNumber numberWithDouble:0.0f * M_PI];
animation.toValue = [NSNumber numberWithDouble:1.0f * M_PI];
animation.duration = duration;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeBoth;
animation.repeatCount =1;;
animation.beginTime = CACurrentMediaTime();
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
card.layer.anchorPoint = CGPointMake(0.5, 1.0);
[card.layer addAnimation:animation forKey:#"rotationX"];[/CODE]
Any input?
Thanks in advance.
I've also needed flip from bottom animation. I've compiled couple solutions and this works for me
- (CATransform3D) makeRotationAndPerspectiveTransform:(CGFloat) angle {
CATransform3D transform = CATransform3DMakeRotation(angle, 1.0f, 0.0f, 0.0f);
transform.m34 = 1.0 / -500;
return transform;
}
- (void) flipFromBottom {
//setup firstView to be visible
view1.layer.transform = CATransform3DMakeRotation(0, 1.0f, 0.0f, 0.0f);
view1.hidden = NO;
// setup secondView to be partialy rotated and invisible
view2.layer.transform = [self makeRotationAndPerspectiveTransform:M_PI/2];
view2.hidden = YES;
// making sure that both views have the same position
view2.frame = view1.frame;
CFTimeInterval duration = 2.0;
[UIView animateWithDuration:duration/2
delay:0
options:UIViewAnimationCurveEaseIn
animations:^{
view1.layer.transform = [self makeRotationAndPerspectiveTransform:-M_PI / 2];
}
completion:^(BOOL finished){
view1.hidden = YES;
view2.hidden = NO;
[UIView animateWithDuration:duration /2
delay:0
options:UIViewAnimationCurveEaseOut
animations:^{
view2.layer.transform = CATransform3DMakeRotation(0.0f, 1.0f, 0.0f, 0.0f);
}
completion:NULL];
}];
}
I would like to present a view in the same manner as that of UIAlertView - a pop/spring. Unfortunately subclassing UIAlertView is not an option for the view I need to present. I have written some code, but I can't seem to get it as realistic as I would like. I would appreciate any suggestions for greater realism or a link if anything similar has been done (I could not find anything on Google). Thank you.
- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:frame])) {
self.backgroundColor = [UIColor whiteColor];
v = [[UIView alloc] initWithFrame:CGRectMake(140, 140, 60, 60)];
v.backgroundColor = [UIColor blueColor];
[self addSubview:v];
[self animate];
}
return self;
}
- (void)animate {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:0.2];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(popStep1Complete)];
v.frame = CGRectMake(90, 90, 140, 140);
[UIView commitAnimations];
}
- (void)popStep1Complete {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:0.15];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(popStep2Complete)];
v.frame = CGRectMake(110, 110, 100, 100);
[UIView commitAnimations];
}
- (void)popStep2Complete {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration:0.15];
v.frame = CGRectMake(100, 100, 120, 120);
[UIView commitAnimations];
}
- (void) attachPopUpAnimation
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation
animationWithKeyPath:#"transform"];
CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1);
CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);
NSArray *frameValues = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:scale1],
[NSValue valueWithCATransform3D:scale2],
[NSValue valueWithCATransform3D:scale3],
[NSValue valueWithCATransform3D:scale4],
nil];
[animation setValues:frameValues];
NSArray *frameTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:0.9],
[NSNumber numberWithFloat:1.0],
nil];
[animation setKeyTimes:frameTimes];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
animation.duration = .2;
[self.layer addAnimation:animation forKey:#"popup"];
}
the pointer to delackner's post is the best initial one i found as well. i would only offer for folks trying to really mimic UIAlertView a few things:
adding the rounded edges, border, and semi-transparent layer color
some alpha fade-in/-out, and
redoing with blocks as somewhat more succinct with latest iOS toolchain
i also found the initial 1.1 scale-out he suggests too large, 1.05 seemed more correct visually to me in most cases
Code:
self.layer.cornerRadius = 10.0;
[self.layer setMasksToBounds:YES];
self.layer.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:0.60].CGColor;
self.layer.borderColor = [UIColor whiteColor].CGColor;
self.layer.borderWidth = 1.1;
if (self.hidden == YES) { // swoop in if coming from hidden, otherwise pulse in-place
self.transform = CGAffineTransformMakeScale(0.6, 0.6);
}
self.hidden = NO;
[UIView animateWithDuration:0.2
animations:^{
self.transform = CGAffineTransformMakeScale(1.05, 1.05);
self.alpha = 0.8;
}
completion:^(BOOL finished){
[UIView animateWithDuration:1/15.0
animations:^{
self.transform = CGAffineTransformMakeScale(0.9, 0.9);
self.alpha = 0.9;
}
completion:^(BOOL finished) {
[UIView animateWithDuration:1/7.5
animations:^{
self.transform = CGAffineTransformIdentity;
self.alpha = 1.0;
}
];
}
];
}
];
One thing: multi-step animations like this are much easier if you use a CAKeyframeAnimation instead of mutiple UIView queued animations.
I'm using a standard animation block to flip over from one view to another, like this:
[UIView beginAnimations:#"FlipAnimation" context:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:NO];
[UIView setAnimationBeginsFromCurrentState:NO];
[containerView exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
[UIView commitAnimations];
During the animation's course, the "from" view darkens as it begins to flip over. Since I'm using nearly identical views on both sides which don't cover the whole view (it's meant to represent a physical card being flipped over), this looks absolutely horrible. Using [UIColor clearColor] as the backgroundColor property for every associated UIView didn't help one bit as transparent areas seem to get darkened as well.
Any ideas on how I could get rid of this darkening effect?
Seems you have to do the animation 'by hand', using Core Animation transforms.
I divided the Animation in two parts. First I rotate 'viewOne' half the way with animation and 'viewTwo' half the way in the other direction without animation.
When the first half of the animation is done, I do the rest in the delegate method.
Yours parameters may vary :)
Skewing is courtesy of some other StackOverflow answer I found.
- (IBAction)flip:(id)sender
{
UIView* viewOne = [self.view.subviews objectAtIndex:0];
UIView* viewTwo = [self.view.subviews objectAtIndex:1];
viewOne.hidden = YES;
CATransform3D matrix = CATransform3DMakeRotation (M_PI / 2, 0.0, 1.0, 0.0);
CATransform3D matrix2 = CATransform3DMakeRotation (-M_PI / 2 , 0.0, 1.0, 0.0);
matrix = CATransform3DScale (matrix, 1.0, 0.975, 1.0);
matrix.m34 = 1.0 / -500;
matrix2 = CATransform3DScale (matrix2, 1.0, 0.975, 1.0);
matrix2.m34 = 1.0 / -500;
viewOne.layer.transform = matrix2;
[UIView beginAnimations:#"FlipAnimation1" context:self];
[UIView setAnimationDuration:1];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationPartOneDone)];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
viewTwo.layer.transform = matrix;
[UIView commitAnimations];
}
-(void)animationPartOneDone
{
UIView* viewOne = [self.view.subviews objectAtIndex:0];
UIView* viewTwo = [self.view.subviews objectAtIndex:1];
viewOne.hidden = NO;
viewTwo.hidden = YES;
CATransform3D matrix = CATransform3DMakeRotation (2 * M_PI, 0.0, 1.0, 0.0);
matrix = CATransform3DScale (matrix, 1.0, 1.0, 1.0);
[UIView beginAnimations:#"FlipAnimation2" context:self];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
viewOne.layer.transform = matrix;
[UIView commitAnimations];
[self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
}