iOS CABasicAnimation使用心得

在日常的开发中，动画的使用是较为频繁的。今天小编就来浅谈一下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的关系，可以去网上参考其他大佬的分析文章。

     一点笔记，希望能帮到遇到同样问题的小伙伴，如理解有误，欢迎各位指正^ . ^