ios - UIView 图标动画

Question

我试图在用户单击 View 时制作连拍动画。当用户单击特定 View 时，我将 View 分成圆形 block 。所以我已经将 uiview 转换为 uiimage，如下所示，

   - (UIImage *) imageWithView:(UIView *)view
    {
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];

        UIImage * img = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        return img;
    }

然后我将 uiimage 分解成如下碎片，

-(void)splitImage:(UIImage *)image
{
    CGFloat imgWidth = image.size.width/2;
    CGFloat imgheight = image.size.height;
    CGRect leftImgFrame = CGRectMake(0, 0, imgWidth, imgheight);
    CGRect rightImgFrame = CGRectMake(imgWidth, 0, imgWidth, imgheight);

    CGImageRef left = CGImageCreateWithImageInRect(image.CGImage, leftImgFrame);
    CGImageRef right = CGImageCreateWithImageInRect(image.CGImage, rightImgFrame);

    UIImage* leftImage = [UIImage imageWithCGImage:left];
    UIImage* rightImage = [UIImage imageWithCGImage:right];

    CGImageRelease(left);
    CGImageRelease(right);
}

但是我在做的过程中遇到了一些问题。

1. 我只能将 uiimage 分成两部分，但不能分成两部分动态片段。
2. 我怎样才能像 uiview 那样用这些 splinter 的 uiimages 爆裂成圆形碎片？

更新:以下是我更新的代码...

-(void)startAnimation{


    //Add the initial circle
//    UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 60, 60)];
    UIView *circleView = [[UIImageView alloc] initWithFrame:self.submit.bounds];

    circleView.bounds = self.submit.bounds;

    CAShapeLayer *circleLayer = [CAShapeLayer layer];

    //set colors
    [circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
    [circleLayer setFillColor:[[UIColor clearColor] CGColor]];
    [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
    [circleView.layer addSublayer:circleLayer];
    [self.view addSubview:circleView];

    //Animate circle
    [circleView setTransform:CGAffineTransformMakeScale(0, 0)];
    [UIView animateWithDuration:0.7 animations:^{
        [circleView setTransform:CGAffineTransformMakeScale(1.3, 1.3)];
    } completion:^(BOOL finished) {
        circleView.hidden = YES;
        //start next animation
        [self createIconAnimation];
    }];
}

-(void)createIconAnimation{

    //load icon which pops up
    UIImageView* iconImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ic_tick"]];
    iconImage.frame = CGRectMake(50, 50, 60, 60);
    iconImage.bounds = self.submit.bounds;
    [iconImage setTransform:CGAffineTransformMakeScale(0, 0)];
    [self.view addSubview:iconImage];

    //animate icon
    [UIView animateWithDuration:0.3/1.5 animations:^{
        iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3/2 animations:^{
                iconImage.transform = CGAffineTransformIdentity;
            }];
        }];
    }];


    //add circles around the icon
    int numberOfCircles = 20;
    CGPoint center = iconImage.center;
    float radius= 35;
    BOOL isBig = YES;;
    for (int i = 0; i<numberOfCircles; i++) {

        float x = radius*cos(M_PI/numberOfCircles*i*2) + center.x;
        float y = radius*sin(M_PI/numberOfCircles*i*2) + center.y;

        float circleRadius = 10;
        if (isBig) {
            circleRadius = 5;
            isBig = NO;
        }else{
            isBig = YES;
        }

        UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(x, y, circleRadius, circleRadius)];
        CAShapeLayer *circleLayer = [CAShapeLayer layer];
        [circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
        [circleLayer setFillColor:[[UIColor redColor] CGColor]];
        [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
        [circleView.layer addSublayer:circleLayer];
        [self.view addSubview:circleView];

        //animate circles
        [UIView animateWithDuration:0.8 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            [circleView setTransform:CGAffineTransformMakeTranslation(radius/3*cos(M_PI/numberOfCircles*i*2), radius/3*sin(M_PI/numberOfCircles*i*2))];
            [circleView setTransform:CGAffineTransformScale(circleView.transform, 0.01, 0.01)];
        } completion:^(BOOL finished) {
            circleView.hidden = YES;
        }];


    }

}

动画必须在 self.submit 按钮的顶部，但它没有定位在它的顶部

Answer 1

给你，只需将这段代码添加到你的 View Controller 。它给你这个结果:

只需调整颜色和动画即可获得您想要的结果。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self startAnimation];

}

-(void)startAnimation{

    //Add the initial circle
    UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 60, 60)];
    CAShapeLayer *circleLayer = [CAShapeLayer layer];

    //set colors
    [circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
    [circleLayer setFillColor:[[UIColor clearColor] CGColor]];
    [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
    [circleView.layer addSublayer:circleLayer];
    [self.view addSubview:circleView];

    //Animate circle
    [circleView setTransform:CGAffineTransformMakeScale(0, 0)];
    [UIView animateWithDuration:0.7 animations:^{
        [circleView setTransform:CGAffineTransformMakeScale(1.3, 1.3)];
    } completion:^(BOOL finished) {
        circleView.hidden = YES;
        //start next animation
        [self createIconAnimation];
    }];
}

-(void)createIconAnimation{

    //load icon which pops up
    UIImageView* iconImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Untitled"]];
    iconImage.frame = CGRectMake(50, 50, 60, 60);
    [iconImage setTransform:CGAffineTransformMakeScale(0, 0)];
    [self.view addSubview:iconImage];

    //animate icon
    [UIView animateWithDuration:0.3/1.5 animations:^{
        iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            iconImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3/2 animations:^{
                iconImage.transform = CGAffineTransformIdentity;
            }];
        }];
    }];


    //add circles around the icon
    int numberOfCircles = 20;
    CGPoint center = iconImage.center;
    float radius= 35;
    BOOL isBig = YES;;
    for (int i = 0; i<numberOfCircles; i++) {

        float x = radius*cos(M_PI/numberOfCircles*i*2) + center.x;
        float y = radius*sin(M_PI/numberOfCircles*i*2) + center.y;

        float circleRadius = 10;
        if (isBig) {
            circleRadius = 5;
            isBig = NO;
        }else{
            isBig = YES;
        }

        UIView* circleView = [[UIView alloc] initWithFrame:CGRectMake(x, y, circleRadius, circleRadius)];
        CAShapeLayer *circleLayer = [CAShapeLayer layer];
        [circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
        [circleLayer setFillColor:[[UIColor redColor] CGColor]];
        [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleView.bounds] CGPath]];
        [circleView.layer addSublayer:circleLayer];
        [self.view addSubview:circleView];

        //animate circles
        [UIView animateWithDuration:0.8 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            [circleView setTransform:CGAffineTransformMakeTranslation(radius/3*cos(M_PI/numberOfCircles*i*2), radius/3*sin(M_PI/numberOfCircles*i*2))];
            [circleView setTransform:CGAffineTransformScale(circleView.transform, 0.01, 0.01)];
        } completion:^(BOOL finished) {
            circleView.hidden = YES;
        }];


    }

}



@end