iOS动画效果五：CABasicAnimation实现绕定点旋转

作者: 落叶兮兮 | 来源:发表于2020-11-08 09:05 被阅读0次

前面提到过CALayer的anchorPoint和position对CABasicAnimation的动画过程会有影响，这篇文章主要讲的是：通过设置anchorPoint和position来实现CABAsicAnimation绕右下角旋转的效果
最终的效果图为：

CABasicAnimation绕定点旋转.gif

Demo地址
对应的实现文件为：
FourthViewController

首先，根据上面的最终效果图，我们现将两个view 和一个button定义相应的属性
在.h文件中

@property (nonatomic, strong) UIView *testView;
@property (nonatomic, strong) UIView *blueView;
@property (nonatomic, strong) UIButton *button;

在.m文件中,实现相应的懒加载，并将它们添加到界面上

- (UIView *)testView {
    if (_testView) {
        return _testView;
    }
    _testView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    _testView.backgroundColor = [UIColor redColor];
    return _testView;
}

- (UIView *)blueView {
    if (_blueView) {
        return _blueView;
    }
    _blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 60, 100)];
    _blueView.backgroundColor = [UIColor blueColor];
    return _blueView;
}
- (UIButton *)button {
    if (_button) {
        return _button;
    }
    _button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    _button.backgroundColor = [UIColor whiteColor];
    [_button setTitle:@"开始动画" forState:UIControlStateNormal];
    [_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_button addTarget:self action:@selector(beginAnimation) forControlEvents:UIControlEventTouchUpInside];
    return _button;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.title = @"CABasicAnimation实现绕定点旋转";
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationController.navigationBar.translucent = NO;
    [self.view addSubview:self.testView];
    [self.testView addSubview:self.blueView];
    self.button.frame = CGRectMake((self.view.bounds.size.width - 100) / 2, 400, 100, 50);
    [self.view addSubview:self.button];
}

接下来，我们需要的是让其绕右下角的点旋转，我们只能设置layer的anchorPoint和posiiton的点，将其设置在右下角即可

默认情况下：
anchorPoint和position都是中心点，即anchorPoint为（0.5，0.5），position为view在其父视图中的frame
所以我们旋转时都是以图形的中心为轴进行相应的旋转

为了让其绕右下角旋转，我们需要将anchorPoint和position设置为右下角即可

这里存在一个争议，在iOS开发中，有的人认为anchorPoint左上角是（0.，0）即起始点，有人认为左下角是（0，0）
经过查阅资料发现：

iOS开发中,(0,0)是左上角
在OS X开发中，（0，0）是左下角
相关的资料链接
)
资料中相应的截图：

锚点影响集合操纵截图1
锚点影响集合操纵截图2
有兴趣的可以去阅读一下这部分的内容

所以，为了让其围绕右下角旋转，那么anchorPoint的值为（1，1），position的值为（60，200）

接着在button对应的点击方法中，实现相应的动画：

- (void)beginAnimation {
    CABasicAnimation *animation1 = [CABasicAnimation animation];
    //旋转必须在前面加上transform
    animation1.keyPath = @"transform.rotation.z";
    animation1.fromValue = @(M_PI_2);
    animation1.toValue = @(0);
    animation1.duration = 2.0f;
    animation1.beginTime = 0.f;
    animation1.delegate = self;
    animation1.removedOnCompletion = NO;
    animation1.fillMode = kCAFillModeForwards;  
   //设置blueView的锚点anchorPoint为右下角
    self.blueView.layer.anchorPoint = CGPointMake(1, 1);
   //设置blueView的position为右下角
    self.blueView.layer.position = CGPointMake(60, 200);
    [self.blueView.layer addAnimation:animation1 forKey:@"animation1"];

}

这样点击屏幕，得到的就是最终的动画效果