如何在Core Plot中動畫顯示條形圖的外觀？

Question

首次使用Core Plot顯示條形圖時，我希望條形圖向上生長，直到達到正確的高度。

您將如何使用此框架創建這樣的動畫？

Answer 1

這是非常相似的：How to animate the pie charts developed using core-plot library?

Answer 2

這是我做過什麼：

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 :) . 
   

Answer 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"]; 

Answer 4

感謝米歇爾爲你的偉大回答。

我已經從她的答案上傳了一個Github的例子給那些想要下載演示並立即開始工作的人！

https://github.com/mayuur/CoreplotAnimation

享受編碼！

Answer 5

添加不透明度動畫這樣的...

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"];