前面提到过CALayer的anchorPoint和position对CABasicAnimation的动画过程会有影响,这篇文章主要讲的是:通过设置anchorPoint和position来实现CABAsicAnimation绕右下角旋转的效果
最终的效果图为:
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)是左下角
相关的资料链接
)
资料中相应的截图:
有兴趣的可以去阅读一下这部分的内容
所以,为了让其围绕右下角旋转,那么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"];
}
这样点击屏幕,得到的就是最终的动画效果
为了方便理解,我们可以试一下只设置锚点或者只设置position的情况下,动画的效果
上面两个动画都表现的很不正常
所以,我们在设置绕某个点旋转时,需要将锚点和position设置为相同的,才能达到我们想要的效果
总结
最终的效果图为:
iOS动画效果的探究二:UIView Animation实现动画
iOS动画效果三:CABAsicAnimation实现平移、旋转和放大