UIView圆圈面具动画

时间:2015-07-22 12:35:13

标签: ios iphone uiview uiviewanimation quartz-core

我有一个抽象奇怪的形状UIView。 我需要显示平滑外观动画。

我假设我应该将该动画应用于该视图上方的蒙版。 面具将呈圆形。 因此用户将看到1'2'3'4'序列。 我该如何实现呢? 我想我应该应用一些仿射变换 到面具视图。在那种情况下,面具的原始形状应该是什么? 垂直线?

enter image description here

1 个答案:

答案 0 :(得分:4)

一个简单的例子,假设我有一个100 * 100 imageview

注意:为简单起见,我使用硬代码

 CAShapeLayer * maskLayer = [CAShapeLayer layer];
maskLayer.bounds = CGRectMake(0, 0, 100, 100);
maskLayer.position = CGPointMake(50, 50);
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50.0, 50.0) radius:50 startAngle:0 endAngle:M_PI *2 clockwise:true];
maskLayer.path = path.CGPath;
maskLayer.fillColor = [UIColor clearColor].CGColor;
maskLayer.strokeColor = [UIColor blackColor].CGColor;
maskLayer.strokeEnd = 0.0;
maskLayer.lineWidth = 100;
self.imageview.layer.mask = maskLayer;

CABasicAnimation * animation = [CABasicAnimation animation];
animation.keyPath = @"strokeEnd";
animation.toValue = @(1.0);
animation.duration = 2.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;

[maskLayer addAnimation:animation forKey:@"keyFrame"];