1

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.

Buyin Brian
  • 2,781
  • 2
  • 28
  • 48
  • It's not entirely clear what you want to see. Do you want to start with nothing of the bar visible, and then see it rise up to its final height? – rdelmar Nov 20 '14 at 05:19
  • I would like to start at a given height and end at one that is higher. For the sake of clarity, let's say start at 50 pixels of height and end at 300 pixels. – Buyin Brian Nov 20 '14 at 05:21
  • 1
    I would do this by animating the y position of the bar, not its height (create the bar with whatever its maximum height should be). If the superview of the bar has its clipsToBounds property set to YES, you can position the bar where you want to start, then move it up so it's all visible (or any portion you want to see). Any part of the bar below the superview will not be visible. – rdelmar Nov 20 '14 at 05:24
  • @rdelmar: That's a good workaround. I'll make that my back-up plan. Thanks. – Buyin Brian Nov 20 '14 at 05:41

0 Answers0