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;}
** These images are screen shots taken during the animation
Thank you for your time.