objective-c - 目标c蒙版动画

Question

我想制作如下动画。这就像愤怒的小鸟游戏的设置轮按钮。

我用图像来描述我的问题。

我可以转动轮子

我可以上传图像（set_bg.png）。

启动位置：

结束位置（点击滚轮后）：

正如您在启动位置上看到的那样，我想隐藏在轮子上方，但我做不到。我该怎么做这个动画？

我试过那个代码：

在 ViewDid 上：

CALayer *maskLayer = [CALayer layer];
UIImage *maskImage = [UIImage imageNamed:@"set_bg.png"];

maskLayer.contents = (id)maskImage.CGImage;
maskLayer.bounds = CGRectMake(0,0,92,219);
maskLayer.frame =CGRectMake(0,-135,92,219);
btn_setting_bg.layer.mask = maskLayer;
btn_setting_bg.layer.masksToBounds = YES;

在车轮上触摸：

  CGRect position;
    CGRect oldBounds;
    CGRect newBounds;
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    if(isSubMenuOpened == YES){
        animation.fromValue = [NSNumber numberWithFloat:2*M_PI];
        animation.toValue = [NSNumber numberWithFloat: 0.0f];
        position = CGRectMake(btn_setting_bg.frame.origin.x,btn_settings.frame.origin.y + 6, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
        newBounds = CGRectMake(0,-135,92,219);
        oldBounds = CGRectMake(0,0,92,219);
        isSubMenuOpened = NO;

    }else{
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat: 2*M_PI];
        position = CGRectMake(btn_setting_bg.frame.origin.x,btn_setting_bg.frame.origin.y - btn_setting_bg.frame.size.height -13 + btn_settings.frame.size.height, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);

        oldBounds = CGRectMake(0,-135,92,219);
        newBounds = CGRectMake(0,0,92,219);

        isSubMenuOpened = YES;

       // NSLog([NSString stringWithFormat:@"x:%f,y:%f", position.origin.x, position.origin.y]);
    }



    [UIView animateWithDuration:1.2
                          delay:0.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{

                         [btn_setting_bg setFrame:position];
                         //[btn_setting_bg.layer.mask setFrame:CGRectMake(0,500,92,219)];
                     }
                     completion:^(BOOL finished){
                         CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"scale.y"];

                         animation2.fromValue = [NSValue valueWithCGRect:oldBounds];
                         animation2.toValue = [NSValue valueWithCGRect:newBounds];
                         animation2.duration = 1.2f;

                         btn_setting_bg.layer.mask.frame = newBounds;
                         // btn_setting_bg.layer.mask.bounds = CGRectMake(0,0,92,219);
                         [btn_setting_bg.layer.mask addAnimation:animation2 forKey:@"scale.y"];
                     }];


    animation.duration = 1.2f;
    animation.repeatCount = 1;
    [btn_settings.layer addAnimation:animation forKey:@"SpinAnimation"];

Answer 1

我已经使用 alpha 解决了问题。这不是我想要的，但这也是一个很好的解决方案。

感谢@paulrehkugler 和@kate-gregory

现在我的代码很简单：

 CGRect position;

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    if(isSubMenuOpened == YES){
        animation.fromValue = [NSNumber numberWithFloat:2*M_PI];
        animation.toValue = [NSNumber numberWithFloat: 0.0f];
        position = CGRectMake(btn_setting_bg.frame.origin.x,btn_settings.frame.origin.y + 6, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
        isSubMenuOpened = NO;

    }else{
        animation.fromValue = [NSNumber numberWithFloat:0.0f];
        animation.toValue = [NSNumber numberWithFloat: 2*M_PI];
        position = CGRectMake(btn_setting_bg.frame.origin.x,btn_setting_bg.frame.origin.y - btn_setting_bg.frame.size.height -13 + btn_settings.frame.size.height, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);



        isSubMenuOpened = YES;


    }



    [UIView animateWithDuration:1.2
                          delay:0.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{

                         [btn_setting_bg setFrame:position];

                     }
                     completion:^(BOOL finished){


                     }];


    animation.duration = 1.2f;
    animation.repeatCount = 1;
    [btn_settings.layer addAnimation:animation forKey:@"SpinAnimation"];


    if(isSubMenuOpened == YES){
        [UIView animateWithDuration:3.5 animations:^(void) {
            btn_setting_bg.alpha = 1;
        }];
    }else{
        [UIView animateWithDuration:0.8 animations:^(void) {
            btn_setting_bg.alpha = 0;
        }];
    }

Answer 2

尝试为from to的alpha属性设置动画。wheel0.0f1.0f