web-dev-qa-db-ja.com

Uiviewの非表示モードを変更しながらアニメーションを追加するにはどうすればよいですか？

非表示モードを変更しながら、アニメーションをビューに追加したい

my_view.hidden=YES;

ナビゲーションバーにボタンを追加しました。クリックすると、新しいビューが再表示されるように設定されます。ナビゲーションテーブルの上部に描画します。

iosanimationbuttonuiviewnavigationbar
43
Sanchit Paurush

残念ながら、hiddenはUIViewアニメーションを通じてアニメーション化できるプロパティではありません。最善の策は、@ Erik Bが提案したアニメーションの1つを使用するか、はるかに強力なコアアニメーションを使用することです。 UIViewアニメーションとコアアニメーションのドキュメントをご覧ください。

UIViewアニメーションを使用して、新しいビューを別のビューの下からスライドさせることで、あなたの提案のようなものを達成しました。これにより、引き出しが引き出されるように見えました。そのようなことをしたい場合は、イベント内のタッチアップをインターセプトし、そこにアニメーションコードを配置する必要があります。

- (IBAction)buttonClicked:(id)sender {
    [UIView animateWithDuration:0.5
                          delay:0.0 
                        options:UIViewAnimationCurveEaseOut
                     animations:^(void) {
                        self.myView.frame = /* set the frame here */
                     } 
                     completion:NULL];
}
29
Eytan

ビューの不透明度を100％から0％にアニメートします。アニメーション完了コールバックでビューを非表示に設定します。また、コールバック中に不透明度を100％にリセットし、非表示にするとビューが完全に不透明に表示されるようにすることもできます。

yourView.alpha = 0.0 //for zero opacity
yourView.alpha = 1.0 //for 100% opacity
55
Jeremy W. Sherman

ただし、非表示にするアニメーションはありません。 Swift以下のコードで同じ結果が得られます。

UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {            
    self.yourView.alpha = 0 // Here you will get the animation you want
}, completion: { _ in  
    self.yourView.hidden = true // Here you hide it when animation done
})
31
Palyancodr

Swiftに更新されました：

UIView.animate(withDuration: 0.2, delay: 0.2, options: .curveEaseOut,
      animations: {firstView.alpha = 0}, 
      completion: { _ in firstView.isHidden = true
        //Do anything else that depends on this animation ending
    })

また、最初のビューが表示されなくなった後にアニメーションを戻す場合は、alpha = 1およびhidden = falseを使用して完了ブロック内のコードを複製できます。

19
Paula Hasstenteufel

より適切な方法は次のとおりです。

[UIView transitionWithView:aView
                  duration:0.3
                   options:UIViewAnimationOptionTransitionCrossDissolve 
                animations:^(void){
                              aView.hidden = NO;
                           }
                completion:nil];
19
Abhi

以下は、アニメーションを正しくサポートするUIViewの新しい「隠された」プロパティを紹介するために作成したカテゴリです。

@implementation UIView (AnimateHidden)

-(void)setHiddenAnimated:(BOOL)hide
{
  [UIView animateWithDuration:0.5
                        delay:0.0
                      options: UIViewAnimationCurveEaseOut
                   animations:^
                             {
                           [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
                           if (hide)
                             self.alpha=0;
                           else
                           {
                             self.hidden= NO;
                             self.alpha=1;
                           }
                         }
      completion:^(BOOL b)
      {
        if (hide)
          self.hidden= YES;
      }
  ];
}
@end
18
N.J.

これは修正されたN.J.バージョンです：

@implementation UIView (AnimateHidden)

-(void)setHiddenAnimated:(BOOL)hide duration:(NSTimeInterval)duration {
    if(self.hidden == hide)
        return;
    if(hide)
        self.alpha = 1;
    else {
        self.alpha = 0;
        self.hidden = NO;
    }
    [UIView animateWithDuration:duration animations:^{
        if (hide)
            self.alpha = 0;
        else
            self.alpha = 1;
    } completion:^(BOOL finished) {
        if(finished)
            self.hidden = hide;
    }];
}

@end
9
Stan

Swiftこのバージョン：

 UIView.animateWithDuration(0.5, delay: 0.2, options:
    UIViewAnimationOptions.CurveEaseOut, animations: {
            objView.alpha = 0
        }, completion: { finished in
            objView.hidden = true
  })

これは、5秒の持続時間と2秒の遅延の後、アニメーションを実行します。

利用可能なAnimationOptionsは次のとおりです。

CurveEaseInOut, CurveEaseIn, CurveEaseOut, CurveLinear
6
Jayprakash Dubey

ここでのニュージャージー州とスタニスラフの回答は、このカテゴリの新しいカテゴリを作成するのに役立ちました。これにより、回答が改善されると思います。

ブロックを使用しているため、iOS4以降でのみ機能します。

IView + AnimateHidden.m

#import "UIView+AnimateHidden.h"

@implementation UIView (AnimateHidden)

- (void)setHidden:(BOOL)hidden animated:(BOOL)animated
{
    // If the hidden value is already set, do nothing
    if (hidden == self.hidden) {
        return;
    }
    // If no animation requested, do the normal setHidden method
    else if (animated == NO) {
        [self setHidden:hidden];
        return;
    }
    else {
        // Store the view's current alpha value
        CGFloat origAlpha = self.alpha;

        // If we're unhiding the view, make it invisible initially
        if (hidden == NO) {
            self.alpha = 0;
        }

        // Unhide the view so we can see the animation
        self.hidden = NO;

        // Do the animation
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options: UIViewAnimationOptionCurveEaseOut
                         animations:^{
            // Start animation block
            if (hidden == YES) {
                self.alpha = 0;
            }
            else {
                self.alpha = origAlpha;
            }
            // End animation block
        }
                        completion:^(BOOL b){
            // Start completion block
            // Finish up by hiding the view if necessary...
            self.hidden = hidden;
            // ... and putting back the correct alpha value
            self.alpha = origAlpha;
            // End completion block
        }];
    }
}

@end
3
Craig Brown

これらの回答のいくつかは少し雑然としているので、このAPIのミニマルなデザインを投稿できると考えました。また、遅延と期間も追加しました-理由はありません。

実装にあります。

#import "UIView+AnimateHidden.h"

@implementation UIView (AnimateHidden)

- (void)setHiddenAnimated:(BOOL)hide
                    delay:(NSTimeInterval)delay
                 duration:(NSTimeInterval)duration {
    [UIView animateWithDuration:duration
                          delay:delay
                        options:UIViewAnimationOptionAllowAnimatedContent
                     animations:^{
                         if (hide) {
                             self.alpha = 0;
                         } else {
                             self.alpha = 0;
                             self.hidden = NO; // We need this to see the animation 0 -> 1
                             self.alpha = 1;
                         }
    } completion:^(BOOL finished) {
        self.hidden = hide;
    }];
}

@end

headerファイルにあります。

#import <UIKit/UIKit.h>

@interface UIView (AnimateHidden)

- (void)setHiddenAnimated:(BOOL)hide
                    delay:(NSTimeInterval)delay
                 duration:(NSTimeInterval)duration;

@end
3
Entalpi

より複雑なアニメーションタイプまたはUIViewでサポートされていないアニメーションを使用する場合の別のバージョン

- (void)setHidden:(BOOL)hidden withAnimationDuration:(NSTimeInterval)duration
{
    CATransition* transition = ({
        CATransition* its = [CATransition animation];
        its.duration = duration;
        its.timingFunction =
            [CAMediaTimingFunction
             functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
        its.type = kCATransitionPush;
        its.subtype = (hidden ? @"fromBottom" : @"fromTop");
        its
    });

    UIView* containerView = self.superview;
    [containerView.layer removeAllAnimations];
    [containerView.layer addAnimation: transition forKey: kCATransition];

    self.hidden = hidden;

    if (!hidden) {
        [self.superview bringSubviewToFront: self];
    }
}
0
Hofi

「もっと見る...」と「もっと少なく表示する...」ボタンクリックで「成長」と「縮小」のビューをモデル化するために使用したコードは次のとおりです。 Palyancodrからの回答をモデル化

このアプローチにより、ストーリーボードに両方のビューを作成できるため、さまざまなiOSデバイスで制約が期待どおりに機能し、すべての制約をカスタムコードする必要がありません。

@IBAction func showMoreOrLessAction(_ sender: Any) {
    // if small view showing
    if showMoreLargeView.isHidden {
        showMoreSmallView.isHidden = true

        //showMoreLargeView.isHidden = false
        UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
            self.showMoreLargeView.alpha = 1 // Here you will get the animation you want
        }, completion: { _ in
            self.showMoreLargeView.isHidden = false // Here you hide it when animation done
        })
    }
    else { // large view showing
        //showMoreSmallView.isHidden = false
        UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
            self.showMoreSmallView.alpha = 1 // Here you will get the animation you want
        }, completion: { _ in
            self.showMoreSmallView.isHidden = false // Here you hide it when animation done
        })

        showMoreLargeView.isHidden = true
    }
}
0
Jacksonsox