iOS - drawRect in UIView : Suggestions to smoothen animation - ios

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