在日常的开发中，动画的使用是较为频繁的。今天小编就来浅谈一下CABasicAnimation使用中的所遇到的坑。
小编在利用CABasicAnimation时自定义一个类似于支付宝弹框的控件时，下图为理想情况
于是，编写如下代码
- (void)pop:(UIButton*)sender {
sender.selected= !sender.selected;
//使用CABasicAnimation创建基础动画
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
CGPoint from = CGPointZero;
CGPoint to = CGPointZero;
if(!sender.selected) {
from =CGPointMake(0,ScreenHeight-300);
to =CGPointMake(0,ScreenHeight);
[sendersetTitle:@"pop up" forState:UIControlStateNormal];
}else{
from =CGPointMake(0,ScreenHeight);
to =CGPointMake(0,ScreenHeight-300);
[sendersetTitle:@"pop off" forState:UIControlStateNormal];
}
anima.fromValue = [NSValue valueWithCGPoint:from];
anima.toValue = [NSValue valueWithCGPoint:to];
anima.duration=0.5f;
anima.fillMode = kCAFillModeForwards;
anima.removedOnCompletion = NO;
[self.animationObj.layer addAnimation:anima forKey:@"positionAnimation"];
}
但实际效果并非如此，运动的视图只在左下角出现部分，运动也只运动了一半。如下图
经过一番观察，小编猜测，是否是CABasicAnimation的fromValue和toValue是否是代表运动的中心点，于是对代码进行如下修改
- (void)pop:(UIButton*)sender {
sender.selected= !sender.selected;
//使用CABasicAnimation创建基础动画
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
CGPoint from = CGPointZero;
CGPoint to = CGPointZero;
if(!sender.selected) {
from =CGPointMake(ScreenWidth/2.f, ScreenHeight-150);
to =CGPointMake(ScreenWidth/2.f, ScreenHeight+150);
[sendersetTitle:@"pop up" forState:UIControlStateNormal];
}else{
from =CGPointMake(ScreenWidth/2.f, ScreenHeight+150);
to =CGPointMake(ScreenWidth/2.f, ScreenHeight-150);
[sendersetTitle:@"pop off" forState:UIControlStateNormal];
}
anima.fromValue = [NSValue valueWithCGPoint:from];
anima.toValue = [NSValue valueWithCGPoint:to];
anima.duration=0.5f;
anima.fillMode = kCAFillModeForwards;
anima.removedOnCompletion = NO;
[self.animationObj.layer addAnimation:anima forKey:@"positionAnimation"];
}
最终，如小编所想的一样，CABasicAnimation的fromValue和toValue是运动的中心点！fromValue和toValue是运动的中心点！fromValue和toValue是运动的中心点！重要的事情说三遍。最好效果如预期一样。美滋滋～
但是，后面新的问题又来了，虽然视图如预期移动到了指定位置，但是点击无效。小编猜测，该动画只是将视图的layer移动到指定位置，让用户看到想要的效果，其实视图本身还是没有跟着移动过来。于是，小编在动画完成后，改变视图的frame，问题解决！
视图和layer的关系，可以去网上参考其他大佬的分析文章。
一点笔记，希望能帮到遇到同样问题的小伙伴，如理解有误，欢迎各位指正^ . ^
