如何在Core Plot中为条形图的外观设置动画?

时间:2011-04-05 13:20:09

标签: iphone ios core-plot

当首次使用Core Plot显示条形图时,我希望条形图向上生长,直到它们达到正确的高度。

你会如何使用这个框架创建这样的动画?

5 个答案:

答案 0 :(得分:11)

这就是我所做的:

  1. 在我的viewDidLoad控制器的方法中,我创建了CPTXYGraph:

    graph = [[CPTXYGraph alloc] initWithFrame:self.view.bounds];
    
  2. 我在空图表中添加了动画:

    CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    
  3. 然后在animationDidStop委托的方法中,我将绘图数据和动画添加到图表中:

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
    [anim setDuration:2.0f];
    
    anim.toValue = [NSNumber numberWithFloat:1.0f];
    anim.fromValue = [NSNumber numberWithFloat:0.0f];
    anim.removedOnCompletion = NO;
    anim.delegate = self;
    anim.fillMode = kCAFillModeForwards;
    
    gPlot.anchorPoint = CGPointMake(0.0, 0.0);
    
    [gPlot addAnimation:anim forKey:@"grow"];
    
    [graph addPlot:gPlot ];// IMPORTANT here I added the plot data to the graph :) .
    

答案 1 :(得分:3)

为您的CPTBarPlot添加动画,如下所示:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
[animation setDuration:1];
CATransform3D transform = CATransform3DMakeScale(1, 0.0001, 1);
// offsetY=[PlotDisplayAreaUnderXAxisHeight]-[PlotDisplayAreaHeight]/2
transform = CATransform3DConcat(transform, CATransform3DMakeTranslation(0, offsetY, 0));
animation.fromValue = [NSValue valueWithCATransform3D:transform];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
[barPlot addAnimation:animation forKey:@"barGrowth"];

答案 2 :(得分:2)

感谢Michele的回答。

我已经从她对Github的回答中上传了一个例子,供那些想要下载演示并立即开始工作的人使用!

https://github.com/mayuur/CoreplotAnimation

享受编码!!!

答案 3 :(得分:1)

答案 4 :(得分:0)

像这样添加不透明度动画...

CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeInAnimation.duration = 1.0f;
fadeInAnimation.removedOnCompletion = NO;
fadeInAnimation.fillMode = kCAFillModeForwards;
fadeInAnimation.toValue = [NSNumber numberWithFloat:1.0];
[xSquaredPlot addAnimation:fadeInAnimation forKey:@"animateOpacity"];