I'm trying to scale my view like so:
CGRect endFrame = self.detailView.bounds;
[UIView animateWithDuration:0.25 animations:^{
self.descriptionButton.bounds = endFrame;
}completion:^(BOOL finished) {
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
My detailView is the container view. My descriptionButton is in the upper left corner. I want to give a zoom in type effect by having the button take up the whole screen. However, by default Core Animation scales from the anchor point at its center.
I tried setting the anchor point to the lower right corner of the view's layer like this:
self.descriptionButton.layer.anchorPoint = CGPointMake(self.descriptionButton.bounds.size.width, self.descriptionButton.bounds.size.height);
CGRect endFrame = self.detailView.bounds;
[UIView animateWithDuration:0.25 animations:^{
self.descriptionButton.bounds = endFrame;
}completion:^(BOOL finished) {
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
But when I do that, I don't see any animation at all. Any thoughts? Thanks.
You can just use a little math
CGRect endFrame = self.detailView.frame;
CGRect currentFrame = self.detailView.frame;
[UIView animateWithDuration:0.25 animations:^
{
self.descriptionButton.frame = CGRectMake(currentFrame.x - (endFrame.size.width - currentFrame.size.width), currentFrame.y - (endFrame.size.height - currentFrame.size.height), endFrame.size.width, endFrame.size.height);
}
completion:^(BOOL finished)
{
self.containerView.alpha = 0.0;
self.detailView.alpha = 1.0;
}];
The anchorPoint property is "normalized" to values from 0 to 1. 0.5, 0.5 is the center. 0,0 is top left. 1,1 is bottom right.
Your code is setting the anchorPoint property using pixel coordinates, which is wrong. I don't know what it would do, but it's wrong.
Related
I have a UIButton laid out using storyboard. The button just contains an image. When the button is clicked, I want to animate the size of the button - decrease in size and then bring it back to the original size again.
I used the following code -
[UIView animateWithDuration:2.0 animations:^{
_favButton.transform = CGAffineTransformMakeScale(0.5, 0.5);
}completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 animations:^{
_favButton.transform = CGAffineTransformMakeScale(1, 1);
}];
}];
This code moves my button on the screen which I do not want. I want the center of the button to be fixed and the size be animated.
I have not used any Top Constraint in the storyboard for the button. How can I rectify this behaviour?
If you have auto layout turned on, you would need to turn it off.
But it doesn't seem to your problem here as per your description.
I would do the following to re-adjust to the center as it scales:
CGPoint cP = _favButton.center;
[UIView animateWithDuration:2.0 animations:^
{
_favButton.transform = CGAffineTransformMakeScale(0.5, 0.5);
_favButton.layer.position = cp;
}
completion:^(BOOL finished)
{
[UIView animateWithDuration:2.0 animations:^
{
_favButton.transform = CGAffineTransformMakeScale(1, 1);
_favButton.layer.position = cp;
}];
}];
Hope this helps.
SWIFT 3
button.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
Hi maybe this is a duplicated question and I just don't know the keyword to describe my question, if this is the case please point out.
I'm currently implementing a transition between two view, as the second view shows, it should looked like it's zoomed into the screen from outside, kind of fall on the screen. My idea is to zoom the second view 9 * original size and place the origin to -original_width, -original_height, and set alpha to 0. At the end I set alpha to 1 and show the original size.
so the following code is not working, the subviews are not resized. Could anyone tell me what I miss here or better show me some API which do the task?
[toVC.view setFrame:CGRectMake(0-fromVC.view.frame.size.width, 0-screenRect.size.height, fromVC.view.frame.size.width*3, fromVC.view.frame.size.height*3)];
for (UIView* view in toVC.view.subviews) {
CGRect frame = view.frame;
[view setFrame:CGRectMake(frame.origin.x*3, frame.origin.y*3, frame.size.width*3, frame.size.height*3)];
}
[toVC.view layoutIfNeeded];
[toVC.view setAlpha:0.1];
[UIView animateWithDuration:duration*5
animations:^{
[toVC.view setAlpha:1.0];
[toVC.view setFrame:CGRectMake(0, 0, fromVC.view.frame.size.width, fromVC.view.frame.size.height)];
for (UIView* view in toVC.view.subviews) {
CGRect frame = view.frame;
[view setFrame:CGRectMake(frame.origin.x/3, frame.origin.y/3, frame.size.width/3, frame.size.height/3)];
}
}
completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
}];
You could just set the view transform prior and after the transition:
CGAffineTransform scaleTransform = CGAffineTransformIdentity;
scaleTransform = CGAffineTransformScale(rotationTransform, 9., 9.);
view.transform = scaleTransform;
view.alpha = 0;
[UIView animateWithDuration:duration*5
animations:^{
view.transform = CGAffineTransformIdentity;
view.alpha = 1.;
}
}
completion:^(BOOL finished) {
}];
EDIT with correct observation.
I used the following two snippets to rotate an UIImageView. After the stage1, I got the desired 3D effect: the view rotate (3D effect) and stretched out (larger size). On stage2, I am trying to swing the rightView with the hinge on the right.
If I applied the line that changes the anchor point, the view swings correctly (hinge on right) with one major issue: The view's size got restored back to original size (smaller) while the (rotation) 3D effect is still intact and then the swinging occurs.
Any suggestions?
rightView.layer.anchorPoint = CGPointMake(1.0, 0.5);
-(void)stage1
{
[UIView animateWithDuration:1.5 animations:^{
rightView.transform = CGAffineTransformMakeTranslation(0,0); //rightView i UIImageView
CATransform3D _3Dt = CATransform3DIdentity;
_3Dt =CATransform3DMakeRotation(3.141f/42.0f,0.0f,-1.0f,0.0f);
_3Dt.m34 = -0.001f;
_3Dt.m14 = -0.0015f;
rightView.layer.transform = _3Dt;
} completion:^(BOOL finished){
if (finished) {
NSLog(#"finished..");
}
}];
}
-(void)Stage2
{
rightView.layer.anchorPoint = CGPointMake(1.0, 0.5); //issue?
rightView.center = CGPointMake(1012, 384);
[UIView animateWithDuration:1.75 animations:^{
CATransform3D rightTransform = rightView.layer.transform;
rightTransform.m34 = 1.0f/500;
rightTransform = CATransform3DRotate(rightTransform, M_PI_2, 0, 1, 0);
rightView.layer.transform = rightTransform;
} completion:^(BOOL finished) {
}];
}
You need to add the "options" to your animate with duration and add options:UIViewAnimationOptionBeginFromCurrentState
Otherwise it starts from the beginning again.
So your stage 2 would look like this:
-(void)Stage2
{
rightView.layer.anchorPoint = CGPointMake(1.0, 0.5); //issue?
rightView.center = CGPointMake(1012, 384);
[UIView animateWithDuration:1.75
delay:0.00
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
CATransform3D rightTransform = rightView.layer.transform;
rightTransform.m34 = 1.0f/500;
rightTransform = CATransform3DRotate(rightTransform, M_PI_2, 0, 1, 0);
rightView.layer.transform = rightTransform;
} completion:^(BOOL finished) {
}];
}
Good evening,
I scale down a UIView by using CGAffineTransformScale.
[UIView animateWithDuration:0.3 animations:^{
gridContainerView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.2, 0.2);
gridContainerView.alpha = 0.0;
} completion:^(BOOL finished) {
// show UIView B
}];
and scale it back to its original size:
[UIView animateWithDuration:0.3 animations:^{
gridContainerView.transform = CGAffineTransformIdentity;
gridContainerView.alpha = 1.0;
} completion:^(BOOL finished) {
// remove UIView B
}];
This works fine. The gridContainerView get scaled down to the center of the screen. However, if I change the devices orientation (to a.e. landscape) the center is somehow shifted to the bottom left. The transformation is not going to the center of the screen anymore once I change orientation.
The only way to fix this is to release the gridContainerView and reallocate/init it. But unfortunately this is not an option for me at this point.
Any help is truly appreciated.
I have an UIImageView with an rotation animation that loops, I need to move the UIImageView by x and y in the screen.
The rotation animation code is:
-(void)rotate{
if (leftRotate){
leftRotate = NO;
}else{
leftRotate = YES;
}
CGRect initFrame = self.frame;
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse
animations:^{
if (leftRotate){
self.transform = CGAffineTransformRotate(self.transform, -1 * (M_PI/8));
}else{
self.transform = CGAffineTransformRotate(self.transform, M_PI / 8);
}
}
completion:^(BOOL completed) {
if (completed){
if (!stopRotate){
[self rotate];
}
}
}];
}
I try differents approaches to move the image, like setting the center but I cant move it.
I found the way, I have to set the center out side the animation:
CGPoint facePosition = CGPointMake(self.face1.center.x+1,
self.face1.center.y);
self.face1.center = facePosition;