PowerPlotPercolation logo

Line animation

This is a basic animation of a chart with a single line. Animations are supported on iOS 4.0 and later.

This page describes the class “AnimatedGraph” in the PowerPlot demo app.

Single line animation chart

The data model is generated by a method that takes three parameters, an offset, an overall scale factor and a phase factor; note that this code has also been used in the automatic chart update example:

    _sineFunction = [WSData new];
    const CGFloat resolution = 50;
    [DemoData sineFunctionWithData:_sineFunction
                              xmin:0.
                              xmax:8.
                            factor:1.
                             phase:0.
                            offset:0.
                        resolution:resolution];

Generating the chart with the line plot is done in a few lines of code:

    self.chart = [WSChart linePlotWithFrame:[self.view bounds]
                                       data:_sineFunction
                                      style:kChartLineGradient
                                  axisStyle:kCSGrid
                                colorScheme:kColorDark
                                     labelX:NSLocalizedString(@"x", @"")
                                     labelY:NSLocalizedString(@"o+f*sin(x+p)", @"")];
    [self.chart setChartTitle:NSLocalizedString(@"Sine function", @"")];

Now the animation can be initiated using a simple block call:

    // Setup the animation.
    [self.chart dataAnimateWithDuration:5
                             animations:^{
                                 [DemoData sineFunctionWithData:_sineFunction
                                                           xmin:0.
                                                           xmax:8.
                                                         factor:1.5
                                                          phase:0.5
                                                         offset:1.
                                                     resolution:resolution];
                             }];

The call is similar to an animation of UIView. However, a WSChart animation is called as an instance method. Thus, different instances can be animated asynchronously and independently. The block following animations: sets up the animatable properties to their final values. While the animation is in progress, each WSChart contains the current status of the animation.

It is also possible to get an even more powerful degree of control on the animation by using the update: callback:

    // Setup the animation.
    [self.chart dataAnimateWithDuration:5
                                  delay:2
                                options:kWSChartAnimationOptionCurveEaseInOut
                             animations:^{
                                 [DemoData sineFunctionWithData:_sineFunction
                                                           xmin:0.
                                                           xmax:8.
                                                         factor:1.5
                                                          phase:0.5
                                                         offset:1.
                                                     resolution:resolution];
                             }
                                context:NULL
                                 update:^(CGFloat progress, id customData) {
                                     NSLog(@"This is update: %f!", progress);
                                 }
                             completion:^(BOOL completion){
                                 NSLog(@"This is completion: %d!", completion);
                             }];

The update: callback is called at each frame during the animation. The parameter progress represents the progress between 0 and 1 (which will smooth in and out depending on the option: given when the animation is set up). customData corresponds to the context passed at the time the animation is set up. Finally, the completion: handler works similar to the completion handler of a UIView and is called when the animation is completed or aborted. These situations correspond to the BOOL-value of completion of YES and NO, respectively.

Note that only one animation of an instance of WSChart can be run at a time. It results in an exception to attempt to run multiple animations of the same instance of WSChart concurrently. The current status can be obtained at any time using the animationTimer property of WSChart — if it is set to nil then no animation is currently running. This restriction does not apply to combining PowerPlot animations with UIView's class animations.