chart size change animation

2 posts, 0 answers
  1. Oleg
    Oleg avatar
    3 posts
    Member since:
    Jan 2015

    Posted 05 Jan 2015 Link to this post

    when i try to animate a size change of the chart it just changes to the final value without animation, every thing else (background and other views) changes animated but the chart is not.
    I tried 3 different ways to animate:

         widthConstraint.constant = 200;

        [UIView animateWithDuration:0.5 animations:^{
              [self.view layoutIfNeeded];

    2. Frame change:
          [UIView animateWithDuration:0.5 animations:^{
              _chart.bounds = CGRectMake(0, 0, 200, 200);

    3. Layer change:

        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
        animation.duration = 0.5;
        animation.toValue = [NSValue valueWithCGSize:CGSizeMake(200, 200)];
        [_chart.layer addAnimation:animation forKey:@"sizeAnimation"];


  2. Adrian
    Adrian avatar
    159 posts

    Posted 06 Jan 2015 Link to this post

    Hi Oleg,

    Thank you for contacting us.

    TKChart is a complex view containing other subviews and sublayers in its hierarchy. The reason for the issue you have is that when you change the chart's frame in the animations block, TKChart's layoutSubviews method is called. It uses the chart's final frame to calculate and layout its subviews, which makes it look like the chart is not animating. A better approach to achieve similar animation is to use UIView's transform property. Please consider the following snippet:
    - (void)viewDidLoad {
        chart.transform = CGAffineTransformMakeScale(0, 0);
    - (void)viewDidAppear:(BOOL)animated
        chart.clipsToBounds = YES;
        [UIView animateWithDuration:2.
                             chart.transform = CGAffineTransformIdentity;

    I hope this helps. Should you have further questions, do not hesitate to contact us.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft banner
Back to Top