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

Question

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!

This is a perspective transform and cannot be accomplished with an affine transform. You need to rotate around the Y-axis which can't be accomplished with this type of matrix. — user1118321, May 20 '14 at 00:10
You could try converting the view into an image and applying the [`CIPerspectiveTransform`](https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html#//apple_ref/doc/filter/ci/CIPerspectiveTransform) filter to it. — user1118321, May 20 '14 at 00:26
try this http://www.informit.com/articles/article.aspx?p=1951182 — B.I.A, May 20 '14 at 00:44
@user1118321 Oh, I actually do want to transform a UIImageView that shows a UIImage (called myImageView and myImage respectively). They are just in a UIView. — WunDaii, May 20 '14 at 00:50

score 4 · Accepted Answer · edited May 23 '17 at 11:53

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;
        }];
     }];

  }

Thanks a lot for this, it worked! One more thing - how do I get it to come back to it's usual position? Like in my code I posted in my original question, when I tap the button in the centre it comes back to its original size/position. In this case, how do I get it back to its original perspective (please see my sketch I posted in OP). I can't figure out how to do it :S — WunDaii, May 20 '14 at 11:40

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

1 Answers1