類似於在ios7中打開應用程序的動畫

Question

我想創建一個類似於iOS7中的iPhone打開的動畫。 在這個動畫中，它只顯示應用程序從哪個點打開並在同一點關閉。

誰能幫幫我嗎？

Answer 1

@property (weak, nonatomic) IBOutlet UIImageView *bg;
@property (weak, nonatomic) IBOutlet UIImageView *cal;
…

bool nowZoomed = NO;
CGRect iconPosition = {16,113,60,60}; // customize icon position

- (CGRect)zoomedRect // just a helper function, to get the new background screen size
{
    float screenWidth = UIScreen.mainScreen.bounds.size.width;
    float screenHeight = UIScreen.mainScreen.bounds.size.height;

    float size = screenWidth / iconPosition.size.width;
    float x = screenWidth/2 - (CGRectGetMidX(iconPosition) * size);
    float y = screenHeight/2 - (CGRectGetMidY(iconPosition) * size);

    return CGRectMake(x, y, screenWidth * size, screenHeight * size);
}

- (IBAction)test
{
    float animationDuration = 0.3f; //default
    if (nowZoomed) // zoom OUT
    {
        [UIView animateWithDuration:animationDuration animations:^{ // animate to original frame
            _cal.frame = iconPosition;
            _bg.frame = UIScreen.mainScreen.bounds;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:animationDuration/2.0f animations:^{ // then fade out
                _cal.alpha = 0.0f;
            } completion:^(BOOL finished) {
                _cal.hidden = YES;
            }];
        }];
    }
    else // zoom IN
    {
        _cal.alpha = 0.0f;
        _cal.hidden = NO;
        [UIView animateWithDuration:animationDuration/2.0f animations:^{ // fade in faster
            _cal.alpha = 1.0f;
        }];
        [UIView animateWithDuration:animationDuration animations:^{ // while expanding view
            _cal.frame = UIScreen.mainScreen.bounds;
            _bg.frame = [self zoomedRect];
        }];
    }
    nowZoomed = !nowZoomed;
}

您可以通過創建這樣的示例項目來測試它：

• 像我一樣從模擬器制作兩個截圖（主屏幕和日歷視圖）或抓住這兩個： 主屏幕 / 日歷
• 在故事板中添加2個圖像視圖和1個按鈕
• 使背景圖像視圖與整個屏幕一樣大
• 以及具有此尺寸的其他圖像視圖： {16,113,60,60}
• 為兩者創建一個IBOutlet （前兩行代碼）
• 將按鈕操作目標設置為-(void)test

故事板圖片（左）和動畫過渡（右）

Answer 2

在這種情況下，我個人更喜歡使用CGAffineTransformMakeScale()和設置-[CALayer affineTransform] 。

affineTransform非常易於使用，並帶有Core Animation的一些不錯的隱含優勢。 這樣做的例子就是處理隱式更改框架原點的處理，並且如果需要的話可以很容易地重置回初始尺寸 - 你從來沒有丟失它！

[UIView animateWithDuration:0.3 animations:^{
    view.layer.affineTransform = CGAffineTransformMakeScale(10.0, 10.0); // To make a view larger:
    otherView.layer.affineTransform = CGAffineTransformMakeScale(0.0, 0.0); // to make a view smaller
}];

和

// To reset views back to their initial size after changing their sizes:
[UIView animateWithDuration:0.3 animations:^{
    view.layer.affineTransform = CGAffineTransformIdentity;
    otherView.layer.affineTransform = CGAffineTransformIdentity;
}];

Answer 3

據我所知，該動畫是使用截圖制作的。 它會更新視圖的框架，同時從應用程序徽標平滑過渡到應用程序的屏幕截圖。 我已經將iPod（音樂）應用程序的開頭從設備的右下角模仿到屏幕大小：

UIView * v = [[UIView alloc]init];
CGSize size = self.view.bounds.size;
CGRect frameInitial = CGRectMake(size.width - 30, size.height - 30, 20, 20);
CGRect frameFinal = CGRectMake(0,0, size.width, size.height);
[v setFrame:frameInitial];

如果要為幀大小設置動畫，請使用下面的行：

[UIView animateWithDuration:0.3f
                      delay:0.0f
                    options:UIViewAnimationOptionBeginFromCurrentState
                 animations:^{

    [v setFrame:frameFinal];

} completion:nil];

編輯：沒有意識到縮放也包括背景。 下面的代碼沒有經過測試（我不在工作）所以期待一些缺陷和錯別字。

想象一下，在視圖控制器的視圖中有兩層。 直接在vc上有你想要打開的應用程序，我們稱之為finalView。 在頂層有一個包含所有應用程序的窗口，可以縮放和淡入您的應用程序，這是它背后的視圖。 讓我們先調用它。

初始cond：firstView的框架為320 x 480（這是一個包含所有應用程序圖標的窗口）。 它的alpha值為1. finalView具有相同的框架和alpha，但它位於firstView后面。 最終的cond：finalView仍將具有相同的幀和alpha。 但是firstView將放大到右下角（將有一個巨大的框架）和淡出（alpha - > 0）。

//初始cond :(或者更好地使用IB）

CGRect frameInitial = CGRectMake(0,0, self.view.size.width, self.view.size;
CGRect frameFinal = CGRectMake(self.view.size.width * -4 ,self.view.size.height * -5, self.view.size.width * -5,self.view.size.width * -6);
[v setFrame:frameInitial];

如果要為幀大小設置動畫，請使用下面的行：

[UIView animateWithDuration:0.3f
                      delay:0.0f
                    options:UIViewAnimationOptionBeginFromCurrentState
                 animations:^{

                                 [v setFrame:frameFinal];

                              } completion:nil];

Answer 4

我有一個小型UICollectionViewFloatLayout ，它使用UICollectionViewFloatLayout來創建縮放效果， https：//github.com/MichaelQuan/ios7ZoomEffect 。 它仍然是一項正在進行的工作，但基本的想法就在那里

布局代碼是：

@interface ExpandingCollectionViewLayout ()

@property (nonatomic, assign) CGRect selectedCellFrame;
@property (nonatomic, strong) NSIndexPath *selectedIndexPath;

@end

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *layoutAttributes = [super layoutAttributesForElementsInRect:rect];

    [layoutAttributes enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *obj, NSUInteger idx, BOOL *stop) {
        [self _transformLayoutAttributes:obj];
    }];

    return layoutAttributes;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];

    [self _transformLayoutAttributes:layoutAttributes];

    return layoutAttributes;
}

- (void)_transformLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    if (self.selectedIndexPath != nil)
    {
        if ([layoutAttributes.indexPath isEqual:self.selectedIndexPath]) {
            // set the frame to be the bounds of the collectionView to expand to the entire collectionView
            layoutAttributes.frame = self.collectionView.bounds;
        } else {
            //scale = collectionView.size / cell_selected.size
            //translate = (scale - 1)(cell_i.center - cell_selected.center) + (collectionView.center - cell_selected.center)

            CGRect collectionViewBounds = self.collectionView.bounds;

            CGRect selectedFrame = self.selectedCellFrame;
            CGRect notSelectedFrame = layoutAttributes.frame;

            // Calculate the scale transform based on the ratio between the selected cell's frame and the collection views bound
            // Scale on that because we want everything to look scaled by the same amount, and the scale is dependent on how much the selected cell has to expand
            CGFloat x_scale = collectionViewBounds.size.width / selectedFrame.size.width;
            CGFloat y_scale = collectionViewBounds.size.height / selectedFrame.size.height;
            CGAffineTransform scaleTransform = CGAffineTransformMakeScale(x_scale, y_scale);

            // Translation based on how much the selected cell has been scaled
            // translate based on the (scale - 1) and delta between the centers
            CGFloat x_zoomTranslate = (x_scale - 1) * (CGRectGetMidX(notSelectedFrame) - CGRectGetMidX(selectedFrame));
            CGFloat y_zoomTranslate = (y_scale - 1) * (CGRectGetMidY(notSelectedFrame) - CGRectGetMidY(selectedFrame));
            CGAffineTransform zoomTranslate = CGAffineTransformMakeTranslation(x_zoomTranslate, y_zoomTranslate); //Translation based on how much the cells are scaled

            // Translation based on where the selected cells center is
            // since we move the center of the selected cell when expanded to full screen, all other cells must move by that amount as well
            CGFloat x_offsetTranslate = CGRectGetMidX(collectionViewBounds) - CGRectGetMidX(selectedFrame);
            CGFloat y_offsetTranslate = CGRectGetMidY(collectionViewBounds) - CGRectGetMidY(selectedFrame);
            CGAffineTransform offsetTranslate = CGAffineTransformMakeTranslation(x_offsetTranslate, y_offsetTranslate);

            // multiply translations first
            CGAffineTransform transform = CGAffineTransformConcat(zoomTranslate, offsetTranslate);
            transform = CGAffineTransformConcat(scaleTransform, transform);

            layoutAttributes.transform = transform;
        }

    }
}

要使用此布局代碼展開單元格，請將selectedCellFrame和selectedIndexPath設置為要擴展的單元格，並在集合視圖上調用performBatchUpdates:completion: . 要折疊設置selectedCellFrame = CGRectNull和selectedIndexPath = nil並調用performBatchUpdates:completion: