web-dev-qa-db-ja.com

UIButtonの状態変化をアニメーション化する

通常の状態と強調表示された状態の画像でUIButtonを使用しています。それらは期待どおりに動作しますが、突然のスワップだけでなく、フェージング/マージの移行を行いたいです。

どうやってやるの？

iphoneobjective-cuibutton
46
Johnny Everson

これは、UIViewの遷移アニメーションを使用して行うことができます。ビュー全体を遷移させるため、isHighlightedプロパティはアニメート可能ではありません。

スウィフト3

UIView.transition(with: button,
                  duration: 4.0,
                  options: .transitionCrossDissolve,
                  animations: { button.isHighlighted = true },
                  completion: nil)

Objective-C

[UIView transitionWithView:button
                  duration:4.0
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{ button.highlighted = YES; }
                completion:nil];
115
Marián Černý

それを実現するために、UIButtonを拡張しました。次のコードでhilightedImageという新しいプロパティを追加しました。

- (void)setHilightImage:(UIImageView *)_hilightImage
{
    if (hilightImage != _hilightImage) {
        [hilightImage release];
        hilightImage = [_hilightImage retain];
    }
    [hilightImage setAlpha:0];
    [self addSubview:hilightImage];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.14];
    if(hilightImage){
        [hilightImage setAlpha:1];
    }
    [UIView commitAnimations];
    [super touchesBegan:touches withEvent:event];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

    self.highlighted = FALSE;
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.14];
    if(hilightImage){
        [hilightImage setAlpha:0];
    }

    [UIView commitAnimations];
    [super touchesEnded:touches withEvent:event];
}
3
Johnny Everson

@marián-Černý回答Swift：

UIView.transitionWithView(button, 
                          duration: 4.0, 
                          options: .TransitionCrossDissolve, 
                          animations: { button.highlighted = true },
                          completion: nil)
2
Federico Zanetello

これは、ブールanimatedフラグもサポートする自己完結型のソリューションです。

- (void)setEnabled:(BOOL)enabled animated:(BOOL)animated
{
  if (_button.enabled == enabled) {
    return;
  }

  void (^transitionBlock)(void) = ^void(void) {
    _button.enabled = enabled;
  };

  if (animated) {
    [UIView transitionWithView:_button
                      duration:0.15
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                      transitionBlock();
                    }
                    completion:nil];
  } else {
    transitionBlock();
  }
}
2
Zorayr

UIButtonはUIViewから継承します

したがって、そのビューを取得してbeginAnimations:context:を呼び出します

次に、そこからすべての適切なsetAnimationメソッド。

UIViewクラスの次のプロパティはアニメート可能です。

  • @プロパティフレーム
  • @プロパティ境界
  • @プロパティセンター
  • @property変換
  • @property alpha
  • @property backgroundColor
  • @property contentStretch

参照： IViewクラス参照

1
Arvin