ios - iOS 中的 "Fill button"动画

Question

您对在 iOS 应用程序中实现以下按钮动画有什么建议吗？

Answer 1

好吧，让我们把这个动画分成几段来弄明白。

1) 我们需要一个白色和绿色的圆圈。2)我们需要一个刻度图像。3) 我们需要为白色圆圈和勾号设置动画。

第一步

添加绿色UIView到你的接口(interface)文件。这将是背景 View 。我们不需要为这个 View 设置动画。然后将绿色 View 链接到 IBOutlet像这样:

IBOutlet UIView *greenView;

第二步

在绿色里面添加一个白色的UIView UIView并使其与绿色的大小完全相同 UIView .然后链接小白UIView到IBOutlet在你的头文件中像这样:

IBOutlet UIView *whiteView;

第三步

制作或下载“打勾”图像并将其添加到您的 Xcode项目。然后在我们刚刚创建的绿色/白色 View 的 ABOVE 添加刻度图像。请在 View 上方打勾，不要在 View 中。然后将刻度图像链接到 IBOutlet - 这将帮助我们检测 View 何时被按下。这样做:

IBOutlet UIImageView *tickImage;

第四步

我们需要改变绿色和白色UIView到圈子。我们可以用代码来做到这一点。导入 #import <QuartzCore/QuartzCore.h>框架到你的头文件中。

然后在你的viewDidLoad方法，添加以下代码，将绿色/白色 View 更改为圆圈:

    CGPoint greenCenter = greenView.center;
    CGPoint whiteCenter = whiteView.center;

    CGRect newFrameGreen = CGRectMake(greenView.frame.origin.x, greenView.frame.origin.y, 20, 20);

    CGRect newFrameWhite = CGRectMake(whiteView.frame.origin.x, greenView.frame.origin.y, 20, 20);

    greenView.frame = newFrameGreen;
    greenView.layer.cornerRadius = newSize / 2.0;
    greenView.center = greenCenter;

    whiteView.frame = newFrameWhite;
    whiteView.layer.cornerRadius = newSize / 2.0;
    whiteView.center = whiteCenter;

第五步

为了运行动画，我们需要将 ImageView 连接到将运行动画的方法。您可以使用 UITapGestureRecognizer 来做到这一点.在你的viewDidLoad方法，添加以下内容:

UITapGestureRecognizer *newTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tickAnimation)];
[tickImage setUserInteractionEnabled:YES];
[tickImage addGestureRecognizer:newTap];

然后将动画方法添加到您的实现 (.m) 文件中:

-(void)tickAnimation {
    }

第六步

创建一个 BOOL头文件中的值 - 我们将使用它来检测按钮是处于“ON”还是“OFF”状态。

BOOL animationMode;

然后在你的viewDidLoad方法，将 animationMode bool 值设置为“OFF” - 这是因为按钮将默认为“OFF”或处于白色状态。

animationMode = NO;

现在我们可以继续制作动画了。据我所知，这分为两个动画。第一个是缩小白色 View ，第二个是在刻度图像上做一个微妙的弹出动画。更新 tickAnimation执行动画的方法:

-(void)tickAnimation {

    if (animationMode == NO) {

        // Button is OFF or set to white, lets set it to ON.

        [UIView animateWithDuration:1.0f animations:^{
             whiteView.transform = CGAffineTransformMakeScale(0,0);
        } completion:nil];

         [UIView animateWithDuration:1.0f animations:^{
              tickImage.transform = CGAffineTransformMakeScale(2,2);
         } completion:nil];

         [UIView animateWithDuration:1.0f animations:^{
              tickImage.transform = CGAffineTransformMakeScale(0,0);
         } completion:nil];

         animationMode = YES;
    }

    else if (animationMode == YES) {

        // Button is ON or set to green, lets set it to OFF.

        [UIView animateWithDuration:1.0f animations:^{
             whiteView.transform = CGAffineTransformMakeScale(1,1);
        } completion:nil];

        animationMode = NO;
    }
}

这是我制作这种动画的尝试。我希望这会有所帮助:)