macoscore-animationnsviewfacebook-pop

How do I scale a NSView from the center using Facebook Pop animation?


Please note, this is a Mac OS X (NSView) related question.

I'm trying to use Facebook's POP animation to scale a NSView from the center (to 75% its size) and then back to 100%, however I can't get it to work. Given kPOPLayerScaleXY doesn't seem to work, I did the following but this gives me incorrect results (as it seems to scale down from the top left, and when zoomIn is false, it goes too large:

  CGRect baseRect = CGRectMake(0, 0, 30, 24);
  CGFloat scale = (zoomIn) ? 0.75 : 1.0;

  CGFloat x = baseRect.origin.x;
  CGFloat y = baseRect.origin.y;
  CGFloat width = baseRect.size.width;
  CGFloat height = baseRect.size.height;

  if (zoomIn) {
    width -= floorf((1.0 - scale) * width);
    height -= floorf((1.0 - scale) * height);

    x += floorf((width * (1.0f - scale)) / 2);
    y += floorf((height * (1.0f - scale)) / 2);
  }

  CGRect scaleRect = CGRectMake(x, y, width, height);

  [myView.layer pop_removeAllAnimations];

  POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
  animation.springBounciness = 8;
  animation.toValue = [NSValue valueWithCGRect: scaleRect];
  [myView.layer pop_addAnimation:animation forKey:@"zoom"];

Solution

  • I got it working finally by using two animations instead:

      CGRect baseRect = CGRectMake(0, 0, 30, 24);
      CGFloat scale = (zoomIn) ? 0.80 : 1.0;
    
      CGFloat x = baseRect.origin.x;
      CGFloat y = baseRect.origin.y;
    
      if (zoomIn) {
        x = floorf((baseRect.size.width * (1.0 - scale)) / 2);
        y = floorf((baseRect.size.height * (1.0 - scale)) / 2);
      }
    
      [myView.layer pop_removeAllAnimations];
    
      POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
      animation.springBounciness = 8;
      animation.toValue = [NSValue valueWithCGSize:CGSizeMake(scale, scale)];
      [myView.layer pop_addAnimation:animation forKey:@"zoom"];
    
      animation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerTranslationXY];
      animation.springBounciness = 8;
      animation.toValue = [NSValue valueWithCGPoint:CGPointMake(x, y)];
      [myView.layer pop_addAnimation:animation forKey:@"translate"];