"Fill button" 动画 iOS

Question

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

Answer 1

首先，你有一个像这样的图像的 imageView。

其次，你用白色覆盖它UIView，同时，为v符号初始化一个UIImageview，将它变成白色。

下一步，运行动画在 0.2 秒内将白色视图从 1 缩放到 0。完成后，您运行其他动画使白色 v 符号在 0.2 秒内从 1 缩放到 1.2。

这是我的想法。

Answer 2

好的，让我们把这个动画分成几段来弄清楚。

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

第一步

在您的界面文件中添加绿色 UIView。这将是背景视图。我们不需要为这个视图设置动画。然后 link 绿色视图到 IBOutlet 像这样：

IBOutlet UIView *greenView;

第二步

在绿色 UIView 内添加一个白色的 UIView，并使其大小与绿色 UIView 完全相同。然后 link 白色 UIView 到头文件中的 IBOutlet 像这样：

IBOutlet UIView *whiteView;

第三步

制作或下载 'tick' 图像并将其添加到您的 Xcode 项目中。然后添加刻度图像 ABOVE 我们刚刚创建的 green/white 视图。请在视图上方打勾，并在视图中打上 NOT。然后 link 刻度图像到 IBOutlet - 这将帮助我们检测视图何时被按下。这样做：

IBOutlet UIImageView *tickImage;

第四步

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

然后在您的 viewDidLoad 方法中，添加以下代码，将 green/white 视图更改为圆圈：

    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;
    }
}

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

Answer 3

您可以为颜色填充设置 layer.borderWidth 属性的动画。它在图层内部绘制，类似这样。

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(30, 30, 100, 100)];
[self.view addSubview:button];

button.layer.borderWidth = 10;
button.layer.borderColor = [UIColor greenColor].CGColor;
button.layer.cornerRadius = 50;

CABasicAnimation *border = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
[border setFromValue:[NSNumber numberWithInt:10]];
[border setToValue:[NSNumber numberWithInt:50]];
border.duration = 1.0;
button.layer.borderWidth = 50;

[button.layer addAnimation:border forKey:@"border"];

这是在 autoReverse 设置为 true 的情况下工作的非常慢的 gif 屏幕截图。

如果你喜欢Swift它看起来像这样

var button = UIButton(frame: CGRect(x: 30, y: 30, width: 100, height: 100))
self.view.addSubview(button)

button.layer.borderWidth = 10
button.layer.borderColor = UIColor.greenColor().CGColor
button.layer.cornerRadius = 50

let border:CABasicAnimation = CABasicAnimation(keyPath: "borderWidth")
border.fromValue = 10
border.toValue = 50
border.duration = 1.0
button.layer.borderWidth = 50

button.layer.addAnimation(border, forKey: "border")

"Fill button" 动画 iOS

"Fill button" animation in iOS

ios

objective-c

iphone

uianimation