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

標籤：hit   添加   table   ota   targe   selector   ima   oat   log   

如下

實現的代碼

 1 #import "TurntableView.h" 2 //#import "TurntableLabel.h" 3  4 @implementation TurntableView 5 { 6     UIImageView *_bgImgV; 7     CGFloat _angle; 8 } 9 - (instancetype)initWithFrame:(CGRect)frame10 {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值的總結

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