Animate UIView with Anchor Point and stretchable image

414 views Asked by At

I'm trying to animate a bar chart where the images rise from the bottom. After a few hours, I'm seeing this is not an easy thing to achieve.

I simply want to do one thing:

Create an animation that scales up from a bottom center anchor point.

- (void)startCharts{

//set the stretchable images
UIImage* stretchGray = [UIImage imageNamed:@"rescueGrayChart"];
stretchGray = [stretchGray resizableImageWithCapInsets:UIEdgeInsetsMake(50, 0, 10, 0) resizingMode:UIImageResizingModeStretch];
self.grayChart.image = stretchGray;

//set the start frame and anchor point
CGRect gframe = self.grayChart.frame;
CGPoint bottomCenterGray = CGPointMake(CGRectGetMidX(gframe), CGRectGetMaxY(gframe));
self.grayChart.layer.anchorPoint = CGPointMake(0.5, 1);

[UIView animateWithDuration:5
    delay:0
    options:UIViewAnimationOptionCurveEaseOut
    animations:^{

                     //this creates the issue where the image scales outwards from center (see image)
                     CGRect frame = self.grayChart.frame;
                     frame.size.height = 300;
                     self.grayChart.frame = frame;

                    //this animates up from bottom, but stretches the image
        /*
                    [CATransaction begin];
                    self.grayChart.layer.transform = CATransform3DMakeScale(1, 2, 1);
                    [CATransaction commit];
         */

    }
    completion:nil];

//readjust the frame
self.grayChart.layer.position = bottomCenterGray;}

UIImageView animation CATransaction animation

** These images are screen shots taken during the animation

Thank you for your time.

0

There are 0 answers