PowerPlotPercolation logo

Animation cascade

This is a loop of animations that subsequently call each other – in the form of an animation cascade. Animations are supported on iOS 4.0 and later.

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

The data and the basic chart is taken from the previously introduced example on scientific data.

This animation does not consist of any changes to data, but it will change the view on the chart to three different perspectives. The animations use the completion handler to call each other. Note that by the time the completion block is called, the property animationTimer of WSChart is already set to nil, so it is safe to trigger a new animation at that point:

#pragma mark - Perform a zoom to different parts of the chart, cycle zoom.

- (void)zoomToRegion1
{
    [self.chart dataAnimateWithDuration:2.
                             animations:^{
                                 WSCoordinate *cX = [[self.chart plotAtIndex:0] coordX];
                                 WSCoordinate *cY = [[self.chart plotAtIndex:0] coordY];
                                 cX.coordRangeD = NARangeMake(0.1, 0.3);
                                 cY.coordRangeD = NARangeMake(0.7, 0.8);
                             }
                             completion:^(BOOL completed) {
                                 if (completed) {
                                     [self zoomToRegion2];
                                 }
                             }];
}

- (void)zoomToRegion2
{
    [self.chart dataAnimateWithDuration:2.
                             animations:^{
                                 WSCoordinate *cX = [[self.chart plotAtIndex:0] coordX];
                                 WSCoordinate *cY = [[self.chart plotAtIndex:0] coordY];
                                 cX.coordRangeD = NARangeMake(0.9, 1.1);
                                 cY.coordRangeD = NARangeMake(0.4, 0.6);
                             }
                             completion:^(BOOL completed) {
                                 if (completed) {
                                     [self zoomToRegion3];
                                 }
                             }];    
}

- (void)zoomToRegion3
{
    [self.chart dataAnimateWithDuration:2.
                             animations:^{
                                 [self.chart autoscaleAllAxisX];
                                 [self.chart autoscaleAllAxisY];
                             }
                             completion:^(BOOL completed) {
                                 if (completed) {
                                     [self zoomToRegion1];
                                 }
                             }];
}

To trigger the animation simply start the first zoom at the end of viewDidLoad:

    // Once the chart is set up, start the animation.
    [self.chart setAllAxisPreserveOnChangeX:kPreserveRelative];
    [self.chart setAllAxisPreserveOnChangeY:kPreserveRelative];
    [self zoomToRegion1];

The lines dealing with the allAxisPreserveOnChange[X|Y]: deal with the way the coordinate axis locations are updated when the coordinate system changes. This is relevant for changing the screen orientation, for animations that change the coordinate system and for pinching and zooming gestures, see the interactive scientific data example. The setting kPreserveRelative will keep the axis at the relative position from the left/right and top/bottom borders of the chart.

Alternatively, one could keep the axis fixed to the data coordinates (which would move them off screen in this example) by using kPreserveData or at the absolute screen coordinates by using kPreserveBounds. Note that in most cases kPreserveRelative is a better choice than kPreserveBounds as the latter will produce unwanted results when the screen is rotated.