Question

The following is my code, it’s working properly, it’s just that the “animation” of a moving line in the line if (guidelineOn) is not smooth. The drawRect is being called every 0.01 seconds.

if (guideLineOn)
{
[self drawGuidanceLineAtPoint:CGPointMake((65+guideLineOffset)*scalingF, 98*scalingF) withAlpha:paramAlpha];
}

It’s kind of laggy and sometimes interferes with the user input. How do I resolve this? New to this so open to suggestions.

Thanks in advance for your help.

Pier.

- (void)drawRect:(CGRect)rect
{
scalingF = 1.0; // default : iPhone

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
    scalingF = IPAD_SCALING_FACTOR;
}

if (guideLineOn)
{
    [self drawGuidanceLineAtPoint:CGPointMake((65+guideLineOffset)*scalingF, 98*scalingF) withAlpha:paramAlpha];
}

// draw staff line
[self drawStaffLineFrom:CGPointMake(65*scalingF, 98*scalingF) toPoint:CGPointMake(420*scalingF, 98*scalingF)];
[self drawStaffLineFrom:CGPointMake(420*scalingF,108*scalingF) toPoint:CGPointMake(420*scalingF, 50*scalingF)];
[self drawStaffLineFrom:CGPointMake(415*scalingF,108*scalingF) toPoint:CGPointMake(415*scalingF, 50*scalingF)];

// cycle through all the static images to draw tbd
float offSet = 0.0;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
    offSet += 50.0; // to adjust the metronome down
}

if (metronomeImage)
{

    [metronomeImage drawInRect:CGRectMake(410.0f*scalingF, 195.0f*scalingF+offSet, metronomeImage.size.width*scalingF, metronomeImage.size.height*scalingF)];
}

if (circlesImage)
{
    [circlesImage drawInRect:CGRectMake(400.0f*scalingF, 255.0f*scalingF+offSet, circlesImage.size.width*scalingF, circlesImage.size.height*scalingF)];
}

for (Note * v in notesArray)
{
    UIImage * noteImage = [UIImage imageNamed: v.imageName];
    [noteImage drawInRect:CGRectMake(v.notePlacement.x*scalingF, v.notePlacement.y*scalingF, noteImage.size.width*scalingF, noteImage.size.height*scalingF)];
}

if (!clearDisplay) 
{
    // draw the arrows
    for (int i=0; i < arrowsToDrawArray.count; i++)
    {
        Arrow * arrowObj = [arrowsToDrawArray objectAtIndex:i];
        UIColor * colourOfArrow = [arrowObj colourOfArrow]; // colour determines whether right or wrong
        CGPoint p = [arrowObj arrowPlacement];
        p.x = p.x*scalingF;
        p.y = p.y*scalingF;

    //    CGPoint p = [val CGPointValue]; 
        [self drawRooftopAtTopPointof:p colour:colourOfArrow lineJoin:kCGLineJoinMiter];
    }

    // draw the ties
    for (int j=0; j < tiePointsArray.count; j++)
    {
        CGPointPair * tiePairToDraw = [tiePointsArray objectAtIndex:j];
        CGPoint firstPt = [tiePairToDraw firstPoint];
        firstPt.x = firstPt.x *scalingF;
        firstPt.y = firstPt.y *scalingF;

        CGPoint secondPt = [tiePairToDraw secondPoint];
        secondPt.x = secondPt.x *scalingF;
        secondPt.y = secondPt.y *scalingF;

        [self drawPseudoCurveFromPoint:firstPt toPoint:secondPt];
    }

    // bool perfect = true;
    // int noOfNotesHit = 0;

    // draw the tick/cross/arrow
    for (int k=0; k < answerObjArray.count; k++)
    {
        Answer * ansObj = [answerObjArray objectAtIndex:k];

        if (ansObj.hit)
        {
           // noOfNotesHit++;

            if (ansObj.earlyOrLate == -1) // early, draw right pointing arrow
            {
                UIImage * arrowImage = [UIImage imageNamed: @"arrowright.png"];
                [arrowImage drawInRect:CGRectMake((ansObj.xPosition-(0.5*arrowImage.size.width))*scalingF, 125*scalingF, arrowImage.size.width*scalingF, arrowImage.size.height*scalingF)];
               // perfect = false;
            }
            else if (ansObj.earlyOrLate == 1) // late, draw left pointing arrow
            {
                UIImage * arrowImage = [UIImage imageNamed: @"arrowleft.png"];
                [arrowImage drawInRect:CGRectMake((ansObj.xPosition-(0.5*arrowImage.size.width))*scalingF, 125*scalingF, arrowImage.size.width*scalingF, arrowImage.size.height*scalingF)];
                //perfect = false;
            }
            else // perfect!
            {
                // draw a tick
                UIImage * tickImage = [UIImage imageNamed: @"tick.png"];
                [tickImage drawInRect:CGRectMake((ansObj.xPosition-(0.5*tickImage.size.width))*scalingF, 125*scalingF, tickImage.size.width*scalingF, tickImage.size.height*scalingF)];
            }

        }
        else
        {
            // draw a cross
            UIImage * crossImage = [UIImage imageNamed: @"cross.png"];
            [crossImage drawInRect:CGRectMake((ansObj.xPosition-(0.5*crossImage.size.width))*scalingF, 125*scalingF, crossImage.size.width*scalingF, crossImage.size.height*scalingF)];
            //perfect = false;
        }

    }

}
else 
{
    // draw nothing
    clearDisplay = false; 
}

}

Answer 1

Here’s my Core Animation solution for those interested.

- (void) animateRedLine: (float) alphaParam
{
[self.view addSubview:self.redlineImageView];
/* Start from top left corner */
[self.redlineImageView setFrame:CGRectMake(65.0f*scalingF,
                                          50.0f*scalingF,
                                          self.redlineImageView.image.size.width*scalingF,
                                          self.redlineImageView.image.size.height*scalingF*2)];

[self.redlineImageView setAlpha:alphaParam];

[UIView beginAnimations:@"redLineAnimation"
                context:( void *)self.redlineImageView];

/* 3 seconds animation */
[UIView setAnimationDuration:noOfBeatsInBar*timeInSecondsForOneBeat];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
/* Receive animation delegates */
[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:
 @selector(imageViewDidStop:finished:context:)];

/* End at the bottom right corner */
[self.redlineImageView setFrame:CGRectMake((65.0f+LENGTH_OF_BAR)*scalingF,
                                          50.0f*scalingF,
                                          self.redlineImageView.image.size.width*scalingF,
                                          self.redlineImageView.image.size.height*scalingF*2)];

//[self.redlineImageView setAlpha:0.0f];

[UIView commitAnimations];
}