WunDaii
WunDaii

Reputation: 2312

Scale/Animate One Side of UIView to Be Smaller? - CGAffineTransformMakeScale

I would like to animate a UIView so its right side becomes smaller and then back again. This animation will trigger when a UIButton in this UIView is tapped. Here is a quick mockup of what I would like - the UIView will go from state 1 > state 2 > state 1:

Proposed Animation

It looks like it is being pushed on one side.

Here is the code I have for another action - this makes the UIView smaller and larger again as if it is being pushed on the centre, rather than the side.

self.myView.transform = CGAffineTransformMakeScale(0.95,0.95);
self.myView.alpha = 1.f;

[UIView beginAnimations:@"button" context:nil];
[UIView setAnimationDuration:0.5];
self.myView.transform = CGAffineTransformMakeScale(1,1);
self.myView.alpha = 1.0f;
[UIView commitAnimations];

How do I apply this same effect but only to the right side? Any help would be much appreciated, thanks!

Upvotes: 1

Views: 929

Answers (1)

Shankar BS
Shankar BS

Reputation: 8402

According to this question u need t make Perspective Transform for example, i modified a bit from that question i linked

  CATransform3D perspectiveTransform = CATransform3DIdentity;
  perspectiveTransform.m34 = 1.0 / -500;
  perspectiveTransform = CATransform3DRotate(perspectiveTransform, 40.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);

  [UIView animateWithDuration:0.4 animations:^{
    self.myView.layer.transform = perspectiveTransform;

  }];

EDIT 2 Brings back to original

 - (void)startAnimation:(id)sender
  {
     CATransform3D perspectiveTransform = CATransform3DIdentity;
     perspectiveTransform.m34 = 1.0 / -500;
     perspectiveTransform = CATransform3DRotate(perspectiveTransform, 40.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
     [UIView animateWithDuration:1.4 animations:^{
     self.myView.layer.transform = perspectiveTransform;
     }completion:^(BOOL finished) {

      CATransform3D originalPerspectiveTransform = CATransform3DIdentity;
      [UIView animateWithDuration:0.9 animations:^{
         self.myView.layer.transform = originalPerspectiveTransform;
        }];
     }];

  }

Upvotes: 4

Related Questions