iOS动画 狗和狐狸的对战

年前的最后一篇了,希望年前收获的喜欢可以突破100,给去年个圆满的结尾_{当然实现不了,我也很高兴的,比较已经收获了九十多个了,谢谢大家的喜欢}🤗🤗

老规矩还是先放swift和OC版本的狐狸和狗的对战,比较有的人是看不下去文章的~(我就是那类人啊)

复杂动画都是由简单动画构成的

动画的设计思路, 使用OC的代码进行讲解了

• 1.怎么由方形的图片得到圆形的带边框的图片那?

  
  A2945CB9-78AD-4731-A198-1A5EE4BDD6DF.png

你或许告诉我可以使用图片的裁剪啊,或许有人问啥叫图片的裁剪啊_{啥,你说啥我听不到啊}嘿嘿,不逗了,过年了,还是说下怎么那样裁剪吧

//普通裁剪
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width , size.height)];
    [[UIColor orangeColor] set];
    [path fill];
    //5.在添加有一个小圆,把小圆设置为裁剪区域(因为图片不是方形的所有裁剪会有问题)
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderw , borderw , image.size.width , image.size.height - 5 )];
    [path addClip];

今天咱们要使用个CALayer的强大属性mask属性,好像不对,上篇文章滑动解锁好像就使用了,今天咱们接着用~

- (void)drawRect:(CGRect)rect {
     //设置phoneLayer的图片
        self.phoneLayer.contents = (__bridge id _Nullable)(_image.CGImage);
     
        self.phoneLayer.mask = self.maskLayer;
        
        [self addSubview:self.label];
  }

-(void)layoutSubviews{
        
        NSLog(@"%@",NSStringFromCGRect(self.bounds));
        
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
        self.circleLayer.strokeColor = [UIColor whiteColor].CGColor;
        
        self.circleLayer.path = path.CGPath;
        self.circleLayer.lineWidth = _lineWidth;
        
        self.maskLayer.path = self.circleLayer.path;
        self.maskLayer.position = CGPointMake(0, 0);
        
    }

-2.前进动画

 CGPoint originalCenter = self.center;

//前进
[UIView animateWithDuration:_animationDuration delay:0.0 usingSpringWithDamping:0.8 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^{
    CGRect rect = self.frame;
    rect.origin.x += boundsOffset;
    self.frame = rect;
    
} completion:^(BOOL finished) {
    //将圆角图片变成方角图片
    [self animateToSquare];
    
}];

//图片变成方形
 -(void)animateToSquare{
        
        _isSquare = YES;
        
        UIBezierPath *squarePath = [UIBezierPath bezierPathWithRect:self.bounds];
        CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
        morph.duration = 0.25;
        morph.fromValue = (__bridge id _Nullable)(self.circleLayer.path);
        morph.toValue = (__bridge id _Nullable)(squarePath.CGPath);
       
        [self.circleLayer addAnimation:morph forKey:nil];
        [self.maskLayer addAnimation:morph forKey:nil];
        self.circleLayer.backgroundColor = [UIColor magentaColor].CGColor;
        self.circleLayer.path = squarePath.CGPath;
        self.maskLayer.path = squarePath.CGPath;
        
  }

2.后退动画

  [UIView animateWithDuration:_animationDuration delay:_animationDuration usingSpringWithDamping:0.7 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.center = originalCenter;
        
    } completion:^(BOOL finished) {
        //个人感觉这块没用,因为前进后就直接变成方形了,不需要在判断是否是方形了
        
//        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//            if(!self.isSquare){
//                [self boundsOffSet:boundsOffset morphSize:morphSize];
//            }
//        });
    }];

3.碰撞动画

  //碰撞效果

    CGRect morphedFrame = originalCenter.x > boundsOffset ? CGRectMake(0.0, self.bounds.size.height - morphSize.height,morphSize.width, morphSize.height) : CGRectMake(self.bounds.size.width - morphSize.width, self.bounds.size.height - morphSize.height, morphSize.width, morphSize.height);
    
    CABasicAnimation *morphAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    morphAnimation.duration = _animationDuration;
    morphAnimation.toValue = (__bridge id _Nullable)([UIBezierPath bezierPathWithOvalInRect:morphedFrame].CGPath);
    
    
    morphAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.circleLayer addAnimation:morphAnimation forKey:nil];
    [self.maskLayer addAnimation:morphAnimation forKey:nil];