当单击按钮时，如何通过动画显示视图?

I am new to the coding. I am making an application where i need to make a view appear when a button is clicked and the view should appear as if it has come from the button itself. And on clicking the button again the view should go back to button (animated).

我对编码不熟。我正在创建一个应用程序，当单击按钮时，我需要显示一个视图，视图应该显示为它来自按钮本身。当再次点击按钮时，视图应该返回到按钮(动画)。

I have animations like flip, curl but I don't know how to do this.

我有像flip, curl这样的动画，但我不知道怎么做。

2 个解决方案

#1

Here is a simple example. Set showView: as the button's action.

这里有一个简单的例子。设置showView:作为按钮的动作。

- (IBAction)showView:(UIButton *)sender {
    // Create a view with the size and position of the tapped button
    UIView *view = [[UIView alloc] initWithFrame:sender.frame];
    // Set a color on the view
    view.backgroundColor = [UIColor redColor];
    // Add the new view to the main view. The new view will be displayed over any other views
    [self.view addSubview:view];
    // Animate the change of the new view's frame. We use the bounds of the main view.
    [UIView animateWithDuration:3.6 animations:^{
        view.frame = self.view.bounds;
    }];
}

Complete solution:

完整的解决方案:

First create properties for the view and the button. How you initialize these is up to you.

首先为视图和按钮创建属性。如何初始化这些取决于您。

@property (strong, nonatomic) UIButton *button;
@property (strong, nonatomic) UIView *aView;
...
@synthesize button = _button;
@synthesize aView = _aView;

Then create a method that animates a view between two frames and will remove the view from its superview at the end of the animation if asked to.

然后创建一个方法，使两个帧之间的视图动画化，并在动画结束时将视图从其父视图中删除。

- (void)animateView:(UIView *)view 
           fromRect:(CGRect)from 
             toRect:(CGRect)to 
       inParentView:(UIView *)parent 
     removeWhenDone:(BOOL)remove 
{
    if (!remove) {
        [parent addSubview:view];
    }
    view.frame = from;
    [UIView animateWithDuration:3.6 animations:^{
        view.frame = to;
    } completion:^(BOOL finished) {
        if (remove) {
            [view removeFromSuperview];
        }
    }];
}

Then create a boolean property that indicates if the view is shown, and implement a custom setter for the property.

然后创建一个布尔属性，指示是否显示视图，并为属性实现自定义setter。

@property (assign, nonatomic) BOOL viewShown;
...
@synthesize viewShown = _viewShown;

- (void)setViewShown:(BOOL)viewShown
{
    _viewShown = viewShown;
    if (_viewShown) {
        // Insert your own toRect
        [self animateView:self.aView fromRect:self.button.frame toRect:CGRectMake(0, 0, 100, 100) inParentView:self.view removeWhenDone:NO];
    } else {
        [self animateView:self.aView fromRect:self.aView.frame toRect:self.button.frame inParentView:self.view removeWhenDone:YES];
    }
}

Finally, in the button's action you flip the viewShown property.

最后，在按钮的操作中，您将翻转viewshow属性。

- (IBAction)showView:(UIButton *)sender {
    self.viewShown = !self.viewShown;
}

#2

-2

//Here animationButton is the name of the button // Here aView is a view

//这里是动画按钮的名称//这里是视图

aView.view.center=animationButton.center;

aView.view.center = animationButton.center;

Now,scale the view to a small scale as shown so that when you make it bib,it gets shown as if it is coming from the button itself.

现在，将视图缩放到如图所示的小比例，这样当你做bib时，它就会显示出来，就好像它来自按钮本身。

CGAffineTransform trans = CGAffineTransformScale(aView.view.transform, 0.01, 0.01);

aView.view.transform = trans;   // do it instantly, no animation

[self.view addSubview:aView.view];

// now return the view to normal dimension, animating this transformation

//Now with the help of animation ,scale the view to some large extent by animation

//现在在动画的帮助下，通过动画将视图放大到一定程度

[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationCurveEaseInOut
                 animations:^{
                                  aView.view.transform =   CGAffineTransformScale(aView.view.transform, 70.0, 70.0);
                 }
                 completion:nil];

#1