iOS 使用transform和CABasicAnimation實現視圖圍繞定點旋轉和實現一個旋轉的圓的動畫 以轉盤爲例

效果圖以下

實現的代碼

 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值的總結