web-dev-qa-db-ja.com

XcodeでUIViewの幅と高さをアニメーション化する方法は？

メインビューに追加したいサブビューがありますが、Originから展開します。私はいくつかのAppleのドキュメントを読みましたが、どこでミスをしているのかわかりません。フレームの原点をアニメーション化できます。つまり、どこからでもスライドさせることができます。高さはアニメーション化されていないようです。

[UIView beginAnimations:@"animateAddContentView" context:nil];
[UIView setAnimationDuration:0.4];
customView.frame= CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 0, 150);
[self.view addSubview:customView];

customView.frame= CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 310, 150);
[UIView commitAnimations];

また、次のようにアニメーションにsetFrameパーツのみを配置しようとしました。

customView.frame= CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 0, 150);
[self.view addSubview:customView];
[UIView beginAnimations:@"animateAddContentView" context:nil];
[UIView setAnimationDuration:0.4];
customView.frame= CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 310, 150);
[UIView commitAnimations];

しかし、まだ機能しません！

編集：

提案に従って、私はそれをブロックベースのアニメーションソリューションに移動しました。これは正確なコードです：

NSLog(@"yourview : %@",customView);
customView.frame= CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 0, 150);

NSLog(@"yourview : %@",customView);
[self.view addSubview:customView];
NSLog(@"yourview : %@",customView);

//    [customView setFrame:CGRectMake( 0.0f, 480.0f, customView.frame.size.width, customView.frame.size.height)];

[UIView animateWithDuration:0.4
                      delay:0
                    options:UIViewAnimationCurveEaseInOut
                 animations:^ {
                     NSLog(@"yourview : %@",customView);

                     customView.frame = CGRectMake(self.view.frame.Origin.x +5, self.view.frame.Origin.y +5, 310, 150);
                     NSLog(@"yourview : %@",customView);

                 }completion:^(BOOL finished) {

                 }];

まだ何らかの理由で機能しません。考えられる問題は次のとおりです。

  1. このcustomViewをnibから読み込んでいます。具体的には310 x 150で、おそらく問題を引き起こしています。
  2. 私は正しいフレームワークをインポートしていませんが、フレームをアニメーション化できるため、このビューの元の部分はそうではありません...私はQuartzCoreとCore Graphicsをすべてインポートしてもの。

ログの各ポイントで、正しいものが提供されています。たとえば、ターゲットフレームの前はサイズが0、150で、フレームを310、150に設定した後です。しかし、アニメーションは機能しません。

iosxcodeanimationuiviewuiviewanimation
22
Hudson Buddy

ビューを所定の位置に「成長」させるには、フレームをアニメートしないでください。変換をアニメートします。

サブビューをペン先からロードします。変換を0のスケールに設定します。

view.transform = CGAffineTransformMakeScale(0,0);

次に、スーパービューに追加します。

アニメーションブロック内で、変換をidentityに設定します。

view.transform = CGAffineTransformIdentity;

そして、ビューは通常のサイズに拡大します。アンカーポイントを適切な位置から成長させるには、アンカーポイントをいじる必要がある場合があります。

ブロック内のフレームを変更することもできますが、ビューのみを移動するには、中心プロパティを変更することをお勧めします。トランスフォームもある場合は、フレームを設定しないでください。

ボーナスポイントについては、1.0スケールよりわずかに大きいアニメーションを作成し、完了ブロックからチェーンアニメーションでアイデンティティ変換にアニメーション化することもできます。これにより、画面がアラートビューのように画面から「ポップ」されます。

50
jrturton

より明確になるブロックを使用してみてください。

 // First create the view if you haven't already 
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; 
// Add it as a subview. 
[myViewController.view addSubview:myView]; 


CGRect newFrameOfMyView = CGRectMake(0.0f, 0.0f, 200.0f, 200.0f); 
/*
 * Alternatively you could just set the width/height or whatever you'd like with this: 
 * CGRect newFrameOfMyView = myView.frame; 
 * newFrameOfMyView.size.height = 200.0f; 
 * newFrameOfMyView.size.width = 200.0f; 
 */
[UIView animateWithDuration:0.3f
     animations:^{
      myView.frame = newFrameOfMyView; 
     }
     completion:^(BOOL finished){ 
     NSLog( @"woo! Finished animating the frame of myView!" ); 
}];
8
Alec

これを試して：

customView.frame= CGRectMake(self.view.frame.Origin.x +5,self.view.frame.Origin.y+5,0, 150);
[self.view addSubview:customView];
CGRect frame = customView.frame;
frame.size.width = 310;
[UIView animateWithDuration:0.4
 animations:^{
  customView.frame= frame; 
 }];

または、ブロックMethosの代わりにbeginAnimationメソッドを使用する場合は、これを使用します。

UIView *customView=[[UIView alloc]initWithFrame:CGRectMake(self.view.frame.Origin.x +5,self.view.frame.Origin.y+5,0, 150)];
[self.view addSubview:customView];
CGRect frame = customView.frame;
frame.size.width = 310;
[UIView beginAnimations:@"animateAddContentView" context:nil];
[UIView setAnimationDuration:0.4];
customView.frame= frame;
[UIView commitAnimations];
3
Ankit

これは、ビューをアニメーション化する楽しい方法です。この例では、ブロックアニメーションを実行するタッチアクションと、ビューを元の状態にリセットするためのBOOLがあります。

最初に、UIViewControllerに2つのUIViewを配置します（コントラストのために異なる色に色を付けることができます）。作成した「MainViewController.h」ファイルにそれらを接続して、大きなビューを制御します。 .hファイルは次のようになります。

#import <UIKit/UIKit.h>

@interface MainViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;

@end

.mファイルは次のようになります。

#import "MainViewController.h"
#define kViewAnimateWithDuration 0.35f
#define kViewDelay 0.05f

@interface MainViewController ()
@property (nonatomic) BOOL setTouch;
@end

@implementation MainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
        self.setTouch = NO;
    }
    return self;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self.view];

    float width_tp = self.topView.frame.size.width;
    float height_tp = self.topView.frame.size.height;

    float width_b = self.bottomView.frame.size.width;
    float height_b = self.bottomView.frame.size.height;

    if ((CGRectContainsPoint(self.bottomView.frame, touchLocation)) && !self.setTouch){

        [UIView animateWithDuration:kViewAnimateWithDuration
                              delay:kViewDelay
                            options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                         animations:^{
                             //Move frame or transform view
                             [self.topView setFrame:CGRectMake(self.topView.frame.Origin.x, self.topView.frame.Origin.y, width_tp, height_tp + 171)];

                             [self.bottomView setFrame:CGRectMake(self.bottomView.frame.Origin.x, self.bottomView.frame.Origin.y +171, width_b, height_b -171)];

                         } completion:^(BOOL finished) {
                             self.setTouch = YES;
                         }];



    }
    if ((CGRectContainsPoint(self.bottomView.frame, touchLocation)) && self.setTouch) {
        [UIView animateWithDuration:kViewAnimateWithDuration
                              delay:kViewDelay
                            options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                         animations:^{
                             //Move frame or transform view
                             [self.topView setFrame:CGRectMake(self.topView.frame.Origin.x, self.topView.frame.Origin.y, width_tp, height_tp - 171)];

                             [self.bottomView setFrame:CGRectMake(self.bottomView.frame.Origin.x, self.bottomView.frame.Origin.y -171, width_b, height_b +171)];

                         } completion:^(BOOL finished) {
                             self.setTouch = NO;
                         }];
    }

}

したがって、topViewのサイズがx：0、y：0 width：320 height：43のように、bottomViewがx：0 y：40 width：320 height：528のようになっていることを確認してください。背景の色を変えることを忘れないでください。次に、プログラムを実行すると、アニメーションが表示されます。

私にとって、コードの最も重要な行の1つはsetFrame：であると思います。これにより、DrawRectメソッドを使用せずに、フレームが自動的に長方形を再表示できるようになります。プロパティを設定すると、centerプロパティで指定されたポイントと、それに応じて境界矩形のサイズが変更されます。

もちろん、これを行う他の楽しい方法もありますが、これが誰かがiOSを本来のように魔法のように見せることに役立つことを願っています！幸せな旅！

1
tony.stack

ビューコントローラーviewWillLayoutSubviews（または）がyourViewの「初期」フレームを設定する場合、アニメーションサイクル中に明らかに呼び出され、したがってアニメーションによって設定されたフレームをリセットします。

0
mtkopone

Swift 4

  UIView.animate(withDuration: 0.3, animations: {
        self.whiteBackgroundView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
        self.view.layoutIfNeeded()
    }) { (finished) in
        // end of animation
    }
0
Alfi

重要なポイント

1）開始フレームを使用して、アニメーションの前にparentViewにビューを追加します。

2）次に、アニメーションブロック内のターゲットフレームを与える

Nibからビューを追加するため、これはもう必要ありません。

//UIVIew yourView  = [[UIView alloc] initWithFrame:YOUR_STARTING_FRAME];
//[self.view addSubview:yourView];

.........
.........
.........

ビューにアニメーションコードを指定するだけです。yourViewがnilでないことを確認してください（そうですね。

NSLog(@"yourview : %@",yourView);
[UIView animateWithDuration:your_duration 
                      delay:your_starting_delay 
                    options:UIViewAnimationCurveEaseInOut 
                 animations:^ {
                     yourView.frame = YOUR_TARGET_FRAME;
                 }completion:^(BOOL finished) {

                 }];
0
Krishnabhadra