2011年11月6日星期日

How to make a dynamic frame with Quartz 2D in XCode 4

Recently I need to make some dynamic frame in a Edu App. We made frame animation effect using three or more different image before.But this time we need to drag and zoom the frame, and using frame images is not prefect. So I decided to draw the frame using Quartz 2D.
First Step: Create a new project in XCode 4
Second Step: Add new subclass of UIView, named DynamicFrameView

Third Step: Assign DynamicFrameView to the view used in storyboard.


- (void)drawCircleFrame{
    CGRect rect = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
   
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextBeginPath(context);
    CGContextSetStrokeColorWithColor(context, [UIColorgreenColor].CGColor);
    CGContextSetLineWidth(context, 10);
   
    switch (_dPhase%8) {
        case0:
            CGContextMoveToPoint(context, rect.size.width/6, 0);
            CGContextAddLineToPoint(context, 0, 0);
            CGContextAddLineToPoint(context, 0, rect.size.height/6);
            break;
        case1:
            CGContextMoveToPoint(context, 0, rect.size.height/3);
            CGContextAddLineToPoint(context, 0, rect.size.height*2/3);
            break;
        case2:
            CGContextMoveToPoint(context, 0, rect.size.height*5/6);
            CGContextAddLineToPoint(context, 0, rect.size.height);
            CGContextAddLineToPoint(context, rect.size.width/6, rect.size.height);
            break;
        case3:
            CGContextMoveToPoint(context, rect.size.width/3, rect.size.height);
            CGContextAddLineToPoint(context, rect.size.width*2/3, rect.size.height);
            break;
        case4:
            CGContextMoveToPoint(context, rect.size.width*5/6, rect.size.height);
            CGContextAddLineToPoint(context, rect.size.width, rect.size.height);
            CGContextAddLineToPoint(context, rect.size.width, rect.size.height*5/6);
            break;
        case5:
            CGContextMoveToPoint(context, rect.size.width, rect.size.height*2/3);
            CGContextAddLineToPoint(context, rect.size.width, rect.size.height/3);
            break;
        case6:
            CGContextMoveToPoint(context, rect.size.width, rect.size.height/6);
            CGContextAddLineToPoint(context, rect.size.width, 0);
            CGContextAddLineToPoint(context, rect.size.width*5/6, 0);
            break;
        case7:
            CGContextMoveToPoint(context, rect.size.width*2/3, 0);
            CGContextAddLineToPoint(context, rect.size.width/3, 0);
            break;
        default:
            break;
    }
   
    CGContextStrokePath(context);
   
    _dPhase++;
    if (_dPhase == 8) {
        _dPhase = 0;
    }
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    [selfdrawCircleFrame];
}

Finally, we need a timer to refresh the view or just set the frame of this view. The green line will run around the screen.

没有评论:

发表评论