目录
Core Animation
CAShapeLayer
https://juejin.cn/post/6992819241124626469
UIBezierPath 绘制圆弧主要利用以下方法:
- (void)addArcWithCenter:(CGPoint)center // 圆心
radius:(CGFloat)radius // 半径
startAngle:(CGFloat)startAngle // 开始弧度
endAngle:(CGFloat)endAngle // 结束弧度
clockwise:(BOOL)clockwise; // 绘制方向,YES 为顺时针,NO 为逆时针
// 系统提供了如下宏
#define M_PI 3.14159265358979323846264338327950288 /* pi */
#define M_PI_2 1.57079632679489661923132169163975144 /* pi/2 */
#define M_PI_4 0.785398163397448309615660845819875721 /* pi/4 */
其实圆上的一个弧度有两种表示方法,顺时针(正方向)一种,逆时针(负方向)一种。可以参考下文图示以及文字描述:
从0 PI 的点开始顺时针数算是正方向的弧度,用正数表示(PI 表示 π \piπ)
从0 PI 的点开始逆时针数算是反方向的弧度,用负数表示
CGFloat radius = 40;
CGPoint startPoint = CGPointMake(50, 200);
CGPoint endPoint = CGPointMake(150, 200);
CGPoint centerPoint = CGPointMake(150 + radius, 200);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
[path addArcWithCenter:centerPoint radius:radius startAngle:M_PI endAngle:1.5 * M_PI clockwise:NO];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:layer];
可以通过调整CAShapeLayer的更多属性,改变线条或者填充做出不同的动效
https://www.cnblogs.com/xianfeng-zhang/p/7743627.html
#import <QuartzCore/CALayer.h>
NS_ASSUME_NONNULL_BEGIN
CA_CLASS_AVAILABLE (10.6, 3.0, 9.0, 2.0)
@interface CAShapeLayer : CALayer
@property(nullable) CGPathRef path; //CGPathRef路径,不支持隐式动画
@property(nullable) CGColorRef fillColor; //填充颜色
@property(copy) NSString *fillRule; //填充规则(默认是非零法则) 齐偶原则
@property(nullable) CGColorRef strokeColor; //路径颜色
@property CGFloat strokeStart; //部分绘制[0-1],开始值和结束值
@property CGFloat strokeEnd;
@property CGFloat lineWidth; //先宽
@property CGFloat miterLimit; //内角和外角距离
@property(copy) NSString *lineCap; //线端口类型
@property(copy) NSString *lineJoin; //线连接处类型
//绘制虚线路径
@property CGFloat lineDashPhase; //线型模板的起始位置
@property(nullable, copy) NSArray<NSNumber *> *lineDashPattern; //线型模板 数组实线和虚线循环
@end
/* `fillRule' values. */
CA_EXTERN NSString *const kCAFillRuleNonZero //非零
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCAFillRuleEvenOdd //齐偶
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
/* `lineJoin' values. */
CA_EXTERN NSString *const kCALineJoinMiter
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineJoinRound
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineJoinBevel
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
/* `lineCap' values. */
CA_EXTERN NSString *const kCALineCapButt
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineCapRound
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
CA_EXTERN NSString *const kCALineCapSquare
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
NS_ASSUME_NONNULL_END
------------------
- (void)starShowCAShapeLayer{
UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
layer.path = bezi.CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor whiteColor].CGColor;
layer.lineWidth = 15;
layer.strokeStart = 0;
layer.strokeEnd = 0;
layer.lineDashPattern = @[@4,@4];
[self.showView.layer addSublayer:layer];
self.layer = layer;
self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];
}
- (void)waterAction{
if (self.layer.strokeEnd >=1) {
[self.waterTimer invalidate];
self.waterTimer = nil;
return;
}else{
self.layer.strokeEnd +=0.02;
}
}
CAGradientLayer
一般给UIView添加CAGradientLayer,来实现渐变效果
UIView *gradientView = [[UIView alloc] init];
CAGradientLayer *gradientLayer = [CAGradientLayer alloc] init];
// 设置gradientlayer的各个属性
[gradientView.layer addSublayer:gradientLayer];
CAGradientLayer:渐变层在其背景色上绘制颜色渐变,即是填充层的形状(包括圆角),通俗的来说就是根据shape形状来绘制渐变色。
- CAGradientLayer可以用于处理渐变色的层结构,可以用作PNG的遮罩效果
- CAGradientLayer和CAShapeLayer可以配合使用做简单的动画
- CAGradientLayer的坐标系统是从(0,0)到(1,1)绘制的矩形,如果frame值的size不为正方形的话,坐标系统会被拉伸
- CAGradientLayer的startPoint和endPoint决定了颜色的绘制方向
- CAGradientLayer的颜色分割点时以0到1的比例来计算的
CAGradientLayer继承CALayer,所以CAGradientLayer可以使用其父类CALayer所有开放的属性。
1. colors
设置渐变的颜色,可以添加多个颜色,但颜色属于CGColorRef类,所以必须加CGColor,而且前面还要加(id)。
@property(nullable, copy) NSArray *colors;
gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
2. locations
渐变颜色的区间分布,locations的数组长度和color可以一致,也可以不一致,默认值是nil,nil表示平均分布。locations用于控制渐变发生的位置,如gradient.locations = @[@(0.5f), @(1.0f)];
表示渐变范围是[0.5, 1]。
@property(nullable, copy) NSArray<NSNumber *> *locations;
3. startPoint和endPoint
startPoint(渐变的起始方向)与endPoint(渐变的结束方向),以矩形的四个角为基础的,(0,0)为左上角、(1,0)为右上角、(0,1)为左下角、(1,1)为右下角,默认是值是(0.5,0)和(0.5,1)
@property CGPoint startPoint;
@property CGPoint endPoint;
//渐变从左下角开始
gradient.startPoint = CGPointMake(0, 1);
//渐变到右上角结束
gradient.endPoint = CGPointMake(1, 0);
CAGradientLayer的坐标系统和屏幕的坐标系统是一致的:
4. type
默认值是kCAGradientLayerAxial,表示按像素均匀变化。除了默认值也无其它选项。
@property(copy) NSString *type;
CAGradientLayer和CAShapeLayer配合使用
https://www.jianshu.com/p/3ed9ac2ec4fa
https://www.cnblogs.com/YouXianMing/p/3793913.html
CAGradientLayer隐式动画
https://www.jianshu.com/p/9d492373c80f
当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果,而这些属性称为Animatable Properties(可动画属性)
列举几个常见的Animatable Properties:
- bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画。
- backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画。
- position:用于设置CALayer的位置。修改这个属性会产生平移动画。
[CATransaction begin];
[CAT