iOS中的"填充按钮"动画

Question

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

Answer 1

好吧,让我们将这个动画分成几个部分来解决它.

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

第一步

UIView在接口文件中添加绿色.这将是背景视图.我们不需要为此视图设置动画.然后将绿色视图链接到IBOutlet如此:

IBOutlet UIView *greenView;

第二步

在绿色内部添加白色UIView UIView,使其与绿色完全相同UIView.然后将白色链接UIView到IBOutlet您的头文件中,如下所示:

IBOutlet UIView *whiteView;

第三步

制作或下载"刻度"图像并将其添加到Xcode项目中.然后将刻度图像添加到我们刚刚创建的绿色/白色视图上方.请将勾号置于视图上方而不是视图中.然后将刻度图像链接到IBOutlet- 这将帮助我们检测视图何时被按下.这样做:

IBOutlet UIImageView *tickImage;

第四步

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

然后在您的viewDidLoad方法中,添加以下代码,将绿色/白色视图更改为圆形:

    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;

第五步

为了运行动画,我们需要将图像视图连接到将运行动画的方法.你可以使用一个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;

现在我们可以继续动画了.从我所看到的,这被分成两个动画.第一个是使白色视图变小,第二个是在刻度图像上进行微妙的弹出动画.更新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;
    }
}

这是我尝试制作这种动画.我希望这有帮助 :)