ios - XcodeでUIViewの幅と高さをアニメーション化するには?

Question

メインビューに追加したいこのサブビューがありますが、原点から展開します。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) {

                 }];

これはまだ何らかの理由で機能しません。私が見る可能性のある問題は次のとおりです。

特に 310 x 150 からこの customView を読み込んでいますnibが、これが問題を引き起こしている可能性があります。
私は正しいフレームワークをインポートしていませんが、このビューの frame.origin 部分をアニメーション化できるので、そうであるかどうかはわかりません...私はすべてインポートしたものを持っQuartzCoreています。Core Graphics

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

score 55 · Accepted Answer

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

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

view.transform = CGAffineTransformMakeScale(0,0);

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

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

view.transform = CGAffineTransformIdentity;

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

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

ボーナスポイントの場合は、1.0スケールより少し大きいアニメーションにアニメーション化してから、完了ブロックから連鎖アニメーションでID変換にアニメーション化することもできます。これにより、ビューがアラートビューのように画面から「ポップ」します。

score 8 · Accepted Answer

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

 // 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!" ); 
}];

score 3 · Accepted Answer

これを試して：

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

または、ブロックメソッドの代わりに 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];

score 1 · Accepted Answer

ビューをアニメーション化する楽しい方法を次に示します。私の例では、ブロックアニメーションを実行するタッチアクションと、ビューを元の状態に確実にリセットするための 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 のような小さな寸法と、x:0 y:40 width:320 height:528 のような bottomView があることを確認してください。背景を異なる色に着色することを忘れないでください。次に、プログラムを実行すると、アニメーションが表示されます。

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

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

score 0 · Accepted Answer

重要なポイント

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

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) {

                 }];

score 0 · Accepted Answer

viewcontrollers viewWillLayoutSubviews (またはそのようなもの) が yourView の「初期」フレームを設定する場合、それは明らかにアニメーションサイクル中に呼び出されるため、アニメーションによって設定されたフレームがリセットされます。

ios - XcodeでUIViewの幅と高さをアニメーション化するには?

7 に答える 7

Related

Reference