年前的最后一篇了,希望年前收获的喜欢可以突破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];
