Search code examples
ioscocoa-touchcore-animationuiviewanimationcgaffinetransform

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!


Solution

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