iOS使用持续时间为Bezier曲线设置动画

Question

How do you animate a given Bezier curve in iOS, so that it is drawn from the start point to the end point during a given time. See the animation below.

Answer 1

Beizer Path

// set up properties for path
@property (nonatomic, assign) CGPath startPath;
@property (nonatomic, assign) CGPath endPath;
@property (nonatomic, strong) CAShapeLayer *pathLayer;

// create the startPath
UIBezierPath *path = [UIBezierPath //create your path using the paint code code
self.startPath = path.CGPath;

// create the end path
path = [UIBezierPath //create your path using the paint code code
self.endPath = path.CGPath;

// create the shapee layer
self.pathLayer = [CAShapeLayer layer];
self.pathLayer.path = self.startPath;
//also set line width, colour, shadows, etc...

[self.view.layer addSubLayer:self.pathLayer];

- (void)animatePath
{
    [UIView animateWithDuration:2.0
        animations^() {
            // set the animation block variables as suggested in imageview animation.
    }];
}

ImageView

You can achieve this easily with UIViewAnimation blocks. Get an exact image which shows entire part (for example: image1.png ). Now here is the code:

[myImageView setImage: [UIImage imageNamed:@"image1.png"]];
[myImageView setFrame: CGRectMake(0, 0, 0, 100)]; //for example width = 100 and height = 100 is required

[UIView animateWithDuration:0.5
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut
                 animations:^{
                     [myImageView setFrame: CGRectMake(0, 0, 100, 100)];
                 } 
                 completion:^(BOOL finished){
                     NSLog(@"Done!");
                 }];

Change this code as per your requirements, like time, autorepeat or completion block, etc..

Hope this helps.