iOS 使用transform和CABasicAnimation实现视图围绕定点旋转和实现一个旋转的圆的动画 以转盘为例

Posted 2020-08-19

效果图如下

实现的代码

 1 #import "TurntableView.h"
 2 //#import "TurntableLabel.h"
 3 
 4 @implementation TurntableView
 5 {
 6     UIImageView *_bgImgV;
 7     CGFloat _angle;
 8 }
 9 - (instancetype)initWithFrame:(CGRect)frame
10 {
11     self = [super initWithFrame:frame];
12     if (self) {
13         [self createSubviews];
14     }
15     return self;
16 }
17 
18 - (void)createSubviews{
19     //NSArray *arr = @[@"10",@"20",@"40",@"50",@"60",@"80",@"100",@"140",@"200",@"300",@"400",@"500",@"1000",@"2000",@"10000"];
20     NSArray *arr = @[@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10"];
21     // 背景图片
22     UIImageView *bgImgV = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
23     bgImgV.layer.cornerRadius = bgImgV.frame.size.width/2;
24     bgImgV.layer.masksToBounds = YES;
25     bgImgV.center = self.center;
26     bgImgV.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
27     [self addSubview:bgImgV];
28     _bgImgV = bgImgV;
29     
30     //
31     NSInteger i = 0;
32     // 圆的半径
33     CGFloat r = bgImgV.frame.size.width/2;
34     // 转盘每一扇形的角度
35     CGFloat angle = M_PI/180 * 360/arr.count;
36     _angle = angle;
37     // 循环创建扇形上的数字
38     for (NSString *str in arr) {
39         
40         UILabel *rewardMoneyLabel = [UILabel new];
41         rewardMoneyLabel.frame = CGRectMake(r, 0, cos(angle/2) * r,2 * sin(angle/2) * r);
42         rewardMoneyLabel.center = CGPointMake(rewardMoneyLabel.center.x,bgImgV.frame.size.height/2);
43         rewardMoneyLabel.textAlignment = NSTextAlignmentRight;
44         //rewardMoneyLabel.backgroundColor = [UIColor greenColor];
45         rewardMoneyLabel.text = str;
46         [bgImgV addSubview:rewardMoneyLabel];
47         
48         // 设置锚点（以视图上的哪一点为旋转中心，（0，0）是左下角，（1，1）是右上角，（0.5，0.5）是中心）
49         rewardMoneyLabel.layer.anchorPoint = CGPointMake(0, 0.5);
50         // 设置旋转的位置
51         rewardMoneyLabel.layer.position = CGPointMake(r, r);
52         // 旋转
53         rewardMoneyLabel.transform = CGAffineTransformMakeRotation(angle * i);
54         i ++ ;
55     }
56     
57     //红色开始按钮
58     UIButton *startBtn = [UIButton buttonWithType:UIButtonTypeCustom];
59     startBtn.frame = CGRectMake(0, 0, 50, 50);
60     startBtn.center = CGPointMake(r, r);
61     startBtn.backgroundColor = [UIColor redColor];
62     // 开始按钮点击事件
63     [startBtn addTarget:self action:@selector(startBtnAction:) forControlEvents:UIControlEventTouchUpInside];
64     [self addSubview:startBtn];
65 }
66 // 点击红色开始按钮事件
67 - (void)startBtnAction:(UIButton*)sender{
68     // 创建一个基础动画
69     CABasicAnimation *animation = [CABasicAnimation new];
70     // 设置动画要改变的属性
71     animation.keyPath = @"transform.rotation.z";
72     //animation.fromValue = @(_bgImgV.layer.transform.m11);
73     // 动画的最终属性的值（转7.5圈）
74     animation.toValue = @(M_PI*15);
75     // 动画的播放时间
76     animation.duration = 3;
77     // 动画效果慢进慢出
78     animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
79     // 解决动画结束后回到原始状态的问题
80     animation.removedOnCompletion = NO;
81     animation.fillMode = kCAFillModeForwards;
82     // 将动画添加到视图bgImgV的layer上
83     [_bgImgV.layer addAnimation:animation forKey:@"rotation"];
84     
85     
86     // 其他两种旋转方法
87 //    [UIView animateWithDuration:1 animations:^{
88 ////        _bgImgV.transform = CGAffineTransformRotate(_bgImgV.transform, M_PI/180 + _angle);
89 //    }];
90 //    [UIView animateWithDuration:1 animations:^{
91 //        _bgImgV.layer.transform = CATransform3DRotate(_bgImgV.layer.transform, _angle, 0, 0, 1);
92 //    }];
93 }
94 
95 @end

最后是一些常用的animation的KeyPath值的总结