I'm trying to translate and scale a view in the same block. For some reason the translate code is over riding the scaling and setting it at 100%. Please help.
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationCurveEaseInOut
animations:^{
fullView.transform = CGAffineTransformMakeTranslation(0.0, 425.0);
fullView.transform = CGAffineTransformMakeScale(0.8, 0.8);
} completion:^(BOOL finished) { }];
SOLUTION - Change 2 transform lines into one with CGAffineTransformConcat:
fullView.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(0.0, 425.0), CGAffineTransformMakeScale(0.8, 0.8));
transform is a property that you are setting and then re-setting. What you need to do is construct a CGAffineTransform that consists of a combination of the two transforms. CGAffineTransformConcat() should nicely help you with that.
Related
I'm using an affine transform within a repeating/reversing animation to create a "pulsing" effect. However, I noticed that the button gets shifted right when the animation begins. The anchor point for the button is at (0.5,0.5):
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionRepeat|
UIViewAnimationOptionAutoreverse|
UIViewAnimationOptionAllowUserInteraction|
UIViewAnimationCurveEaseInOut
animations:^{
self.recordButton.transform = CGAffineTransformMakeScale(1.2, 1.2);
} completion:^(BOOL finished) {
}];
It appears that when the transform is applied, the origin of the button's frame stays at the same spot.
How can I animate scale transform so the center of the button remains in the same spot once the transform is applied?
I usually play with the frame and CGRect utility functions
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionRepeat|
UIViewAnimationOptionAutoreverse|
UIViewAnimationOptionAllowUserInteraction|
UIViewAnimationCurveEaseInOut
animations:^{
self.recordButton.frame = CGRectInset(self.recordButton.frame, -1.2, -1.2);
} completion:^(BOOL finished) {
}];
I am making a card game and would like to use a Card flipping animation.
Currently I'm using this code with two images, front and back:
card, is a uiview with two UIImageView propertys
[UIView transitionWithView:card duration:0.65f
options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
card.backImageView.image = card.frontImageView.image;
card.layer.shadowOpacity = 0.8;
} completion:^(BOOL finished){
card.layer.shadowOpacity = 0.0;
}];
In order to create a basic card flipping animation like the one in the video you've linked to, I suggest putting frontImageView and the backImageView directly on top of each other on the UIView you intend to flip. To start, set their images to front and back accordingly; and, in this particular case, hide the frontImageView and show the backImageView.
Assuming "card" is the UIView you intend to flip, to perform the flip try:
[UIView transitionWithView:card duration:0.65f
options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
frontImageView.hidden = NO;
backImageView.hidden = YES;
} completion:^(BOOL finished) {
// whatever you'd like to do immediately after the flip completes
}];
Edit:
And to handle the shadow, first off, it appears in the video you posted that the shadow grows in length moreso than it just fades in. And it seems as if (and makes logical sense that) the shadow reaches its peak during the middle of the animation as the card is lifted at its highest point. Since the shadow grows then shrinks during the course of the flip animation, it doesn't make sense to include the shadow animation within the same animation block as the flip since they're on different time schedules.
Secondly with regard to the shadow, to animate the layer property, you have to use Core Animations.
Perhaps you can run the two animations concurrently, i.e. while the above animation is performing, also do something like:
CABasicAnimation *shadowAnimation = [CABasicAnimation animationWithKeyPath:#"shadowRadius"];
shadowAnimation.delegate = self;
[shadowAnimation setFromValue:[NSNumber numberWithFloat:3.0]];
[shadowAnimation setToValue:[NSNumber numberWithFloat:10.0]];
[shadowAnimation setDuration:0.65f];
shadowAnimation.autoreverses = YES;
[[card layer] addAnimation:shadowAnimation forKey:#"shadowRadius"];
The last portion has been adapted from this code and takes advantage of the autoreverse property to automatically reverse the shadow's growth.
This is how to perform a card flipping animation in swift 3:
UIView.transition(from: frontImageView,
to: backImageView,
duration: 0.65,
options: .transitionFlipFromRight,
completion: nil)
i tested a few things, and Compromise with this:
_tempTransform = card.transform;
[card loadFront];//loads the front image.
card.frontImageView.hidden=YES;
[UIView animateWithDuration:0.02f
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -500;
transform = CATransform3DRotate(transform, 15.0f * M_PI / 180.0f, 0, -1, 0.0f);
card.layer.transform = transform;
}completion:^(BOOL done){
card.layer.shadowOpacity=0.1f;
card.transform=CGAffineTransformScale(card.transform, 1.2f, 1.2f);
[UIView transitionWithView:card duration:0.4f
options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
card.frontImageView.hidden=NO;
card.backImageView.hidden=YES;
} completion:^(BOOL finished){
card.layer.shadowOpacity=0.0f;
card.transform=_tempTransform;
}];
}];
I'm now implementing an app, for iOS devices so in objective C, and i was asking how to keep back to origin position an UIImageView after a rotation ?
For example, i use my UIImageView like this :
CGAffineTransform initialPosition = CGAffineTransformMakeRotation(0);
CGAffineTransform finalPosition = CGAffineTransformMakeRotation(M_PI/2);
[UIView beginAnimations: #"Rotate animation" context: NULL];
MySuperUIImageView.transform = initialPosition;
[UIView setAnimationDuration:1.0];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationDelegate:self];
MySuperUIImageView.transform = finalPosition;
[UIView commitAnimations];
But after, i made it desappear for a time, using :
MySuperUIImageView.alpha = 0.0f;
And when i re-use it, i want it to be in the first original position, with no rotation. Is it possible easily ?
Thanks in advance !
Yes. Very easily:
MySuperUIImageView.transform = CGAffineTransformIdentity;
Actually, there is. Since you're applying an affine transform to the view, you can reset all transforms applied to the view by setting its transform to CGAffineTransformIdentity which applies an identity transform matrix:
1 - 0 - 0
0 - 1 - 0
0 - 0 - 1
[mySuperUIImageView setTransform:CGAffineTransformIdentity];
Note: In Objective C, the convention is to start class names with a capital letter, and instances with a lower case.
As of iOS 4, Apple recommends using block based UIView animation. Here's an example of what I believe you're trying to attempt using updated code.
CGAffineTransform finalPosition = CGAffineTransformMakeRotation(M_PI/2);
[UIView animateWithDuration:1.0 delay:0.0 options:kNilOptions animations:^{
[mySuperUIImageView setTransform:finalPosition];
} completion:^(BOOL finished) {
[mySuperUIImageView setTransform:CGAffineTransformIdentity];
}];
I'm using the UIView method animateWithDuration:animations to animate sliding a UIView. It appears slightly choppy. Is there a better method, like CoreGraphics, to accomplish a smoother animation?
You can try to use different UIViewAnimationOptions
The default is UIViewAnimationOptionCurveEaseInOut, but you can try others:
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
v.center = CGPointMake(400, 400);
}
completion:^(BOOL finished) {
}
];
I'm trying to implement the following animation:
yourSubView.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.4 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
//change time duration according to requirement
// animate it to the identity transform (100% scale)
yourSubView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
// if you want to do something once the animation finishes, put it here
}];
combined with some movement of the subview. I know in core animation you can combine animations but how can you do that in UIView animation?
Can I translate this code from UIView animation to Core animation?
yourSubView.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.4 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
//change time duration according to requirement
// animate it to the identity transform (100% scale)
yourSubView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
// if you want to do something once the animation finishes, put it here
}];
You can combine animations by changing more than one animatable property. For example, you can also set yourSubView.alpha, then change the alpha within the animation block. It will combine the scale and alpha change together.
To do a simple translation, try this in your animation block:
yourSubView.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, 100.0, 100.0);
this should set the scale back to identity along with moving 100px in x and y direction.
For Core Animation, this Grouping two Core Animations with CAAnimationGroup causes one CABasicAnimation to not run should get you started. You'll use a CAAnimationGroup to combine multiple animations, and can do pretty fancy stuff including 3D rotation.
Scaling:
CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale"];
[scale setValues:[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.01f],[NSNumber numberWithFloat:1.0f],nil]];
[scale setKeyTimes:[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.4f],nil]];
[mySubview.layer addAnimation:scale forKey:#"myScale"];