Lật, phát triển và dịch hoạt ảnh

Question

Nhìn vào this video của ứng dụng MLB Tại Bat. Về cơ bản, tôi chỉ muốn trình bày một modalViewController với phong cách UIModalPresentationFormSheet và giúp nó phát triển từ chế độ xem khác rồi lật. Giống như khi bạn nhấn vào một trò chơi trong bảng điểm trên ứng dụng MLB. Bất cứ ai biết làm thế nào tôi có thể thực hiện điều này?

Cảm ơn

EDIT: Chế độ xem chính của tôi khá giống với ứng dụng MLB. Tôi đang sử dụng AQGridView và muốn hoạt ảnh xuất hiện khi một ô trong chế độ xem lưới được nhấn.

CHỈNH SỬA 2: Tôi cũng sẽ mở để bỏ qua khái niệm UIViewController và chỉ sử dụng đồng bằng UIView, sau đó nhân rộng kiểu UIModalPresentationFormSheet theo cách thủ công nếu điều đó dễ dàng hơn.

EDIT 3: OK, quên sử dụng UIViewController để thực hiện việc này, vì tôi chưa nhận được bất kỳ phản hồi nào, tôi cho rằng điều đó là không thể. Câu hỏi mới của tôi chỉ là làm cách nào để sao chép hoạt ảnh trong video đã đăng bằng cách sử dụng chỉ UIView 's? Về cơ bản, chế độ xem ban đầu cần phải phát triển, di chuyển và lật tất cả cùng một lúc.

CHỈNH SỬA 4: Tôi nghĩ rằng tôi có hoạt ảnh thực tế đã được tìm ra, hiện tại vấn đề duy nhất của tôi là tính tọa độ để nạp vào CATransform3DTranslate. Chế độ xem của tôi cần tạo hiệu ứng khá giống chính xác trong video. Nó cần phải bắt đầu trên một chế độ xem khác và hoạt ảnh ở giữa màn hình. Đây là cách tôi đang cố gắng để tính toán tọa độ cho quan điểm cho rằng bật lên trong trung tâm:

CGPoint detailInitialPoint = [gridView convertPoint:view.frame.origin toView:detailView.frame.origin]; 
CGPoint detailFinalPoint = detailView.frame.origin; 

gridView là quan điểm container của giao diện chính của tôi chứa các mục lưới nhỏ hơn. view là mục lưới cụ thể mà chúng tôi đang tạo hoạt ảnh. Và detailView là chế độ xem xuất hiện ở giữa màn hình.

Answer 1

OK, tôi đã tìm ra. Dưới đây là những gì tôi đã làm:

CGFloat duration = 0.8; 

/* 
//Detail View Animations 
*/ 

CATransform3D initialDetailScale = CATransform3DMakeScale(view.frame.size.width/vc.view.frame.size.width, view.frame.size.height/vc.view.frame.size.height, 1.0); 
CATransform3D initialDetailTransform = CATransform3DRotate(initialDetailScale, -M_PI, 0.0, -1.0, 0.0); 
CATransform3D finalDetailScale = CATransform3DMakeScale(1.0, 1.0, 1.0); 
CATransform3D finalDetailTransform = CATransform3DRotate(finalDetailScale, 0.0, 0.0, -1.0, 0.0); 

NSMutableArray *detailAnimations = [NSMutableArray array]; 

CABasicAnimation *detailTransform = [CABasicAnimation animationWithKeyPath:@"transform"]; 
detailTransform.fromValue = [NSValue valueWithCATransform3D:initialDetailTransform]; 
detailTransform.toValue = [NSValue valueWithCATransform3D:finalDetailTransform]; 
detailTransform.duration = duration; 
[detailAnimations addObject:detailTransform]; 

CABasicAnimation *detailFadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
detailFadeIn.fromValue = [NSNumber numberWithFloat:1.0]; 
detailFadeIn.toValue = [NSNumber numberWithFloat:1.0]; 
detailFadeIn.duration = duration/2; 
detailFadeIn.beginTime = duration/2; 
[detailAnimations addObject:detailFadeIn]; 

CABasicAnimation *detailMove = [CABasicAnimation animationWithKeyPath:@"position"]; 
detailMove.fromValue = [NSValue valueWithCGPoint:vc.view.layer.position]; 
detailMove.toValue = [NSValue valueWithCGPoint:self.view.layer.position]; 
detailMove.duration = duration; 
[detailAnimations addObject:detailMove]; 

CAAnimationGroup *detailGroup = [CAAnimationGroup animation]; 
[detailGroup setAnimations:detailAnimations]; 
[detailGroup setDuration:duration]; 
detailGroup.removedOnCompletion = NO; 
detailGroup.fillMode = kCAFillModeForwards; 
detailGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
[vc.view.layer addAnimation:detailGroup forKey:@"anim"]; 

/* 
//Grid Item View Animations 
*/ 

CATransform3D initialGridScale = CATransform3DMakeScale(1.0, 1.0, 1.0); 
CATransform3D initialGridTransform = CATransform3DRotate(initialGridScale, 0.0, 0.0, 1.0, 0.0); 
CATransform3D finalGridScale = CATransform3DMakeScale(vc.view.frame.size.width/view.frame.size.width, vc.view.frame.size.height/view.frame.size.height, 1.0); 
CATransform3D finalGridTransform = CATransform3DRotate(finalGridScale, M_PI, 0.0, 1.0, 0.0); 

NSMutableArray *gridAnimations = [NSMutableArray array]; 

CABasicAnimation *gridTransform = [CABasicAnimation animationWithKeyPath:@"transform"]; 
gridTransform.fromValue = [NSValue valueWithCATransform3D:initialGridTransform]; 
gridTransform.toValue = [NSValue valueWithCATransform3D:finalGridTransform]; 
gridTransform.duration = duration; 
[gridAnimations addObject:gridTransform]; 

CABasicAnimation *gridFadeOut = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
gridFadeOut.fromValue = [NSNumber numberWithFloat:0.0]; 
gridFadeOut.toValue = [NSNumber numberWithFloat:0.0]; 
gridFadeOut.duration = duration/2; 
gridFadeOut.beginTime = duration/2; 
[gridAnimations addObject:gridFadeOut]; 

CABasicAnimation *gridMove = [CABasicAnimation animationWithKeyPath:@"position"]; 
gridMove.fromValue = [NSValue valueWithCGPoint:view.layer.position]; 
gridMove.toValue = [NSValue valueWithCGPoint:[self.view.layer convertPoint:self.view.layer.position toLayer:gridView.layer]]; 
gridMove.duration = duration; 
[gridAnimations addObject:gridMove]; 

CAAnimationGroup *gridGroup = [CAAnimationGroup animation]; 
[gridGroup setAnimations:gridAnimations]; 
gridGroup.duration = duration; 
gridGroup.fillMode = kCAFillModeForwards; 
gridGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
gridGroup.removedOnCompletion = NO; 
[view.layer addAnimation:gridGroup forKey:@"anim"]; 

Tôi đang làm điều này với một mục trong một AQGridView. Trong mã mẫu của tôi view là bản sao của AQGridViewCell mà tôi đang làm động. Và vc.view là chi tiết của tôi UIViewController/UIView mà tôi đang hiển thị.

Answer 2

Bạn có thể triển khai quá trình chuyển đổi của riêng mình bằng cách sử dụng danh mục trên UIViewControler.

UIViewController + ShowModalFromView.h

#import <Foundation/Foundation.h> 
#import <QuartzCore/QuartzCore.h> 

@interface UIViewController (ShowModalFromView) 
- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view; 
@end 

UIViewController + ShowModalFromView.m

#import "UIViewController+ShowModalFromView.h" 

@implementation UIViewController (ShowModalFromView) 

- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view { 
    modalViewController.modalPresentationStyle = UIModalPresentationFormSheet; 

// Add the modal viewController but don't animate it. We will handle the animation manually 
[self presentModalViewController:modalViewController animated:NO]; 

// Remove the shadow. It causes weird artifacts while animating the view. 
CGColorRef originalShadowColor = modalViewController.view.superview.layer.shadowColor; 
modalViewController.view.superview.layer.shadowColor = [[UIColor clearColor] CGColor]; 

// Save the original size of the viewController's view  
CGRect originalFrame = modalViewController.view.superview.frame; 

// Set the frame to the one of the view we want to animate from 
modalViewController.view.superview.frame = view.frame; 

// Begin animation 
[UIView animateWithDuration:1.0f 
       animations:^{ 
        // Set the original frame back 
        modalViewController.view.superview.frame = originalFrame; 
       } 
       completion:^(BOOL finished) { 
        // Set the original shadow color back after the animation has finished 
        modalViewController.view.superview.layer.shadowColor = originalShadowColor; 
       }]; 
} 

@end 

này có thể dễ dàng được thay đổi để sử dụng bất cứ chuyển hoạt hình bạn muốn; cho của bạn, bạn có thể muốn sử dụng một CA3DTransform. Hi vọng điêu nay co ich!

Answer 3

Để làm một flip, phát triển, và dịch hoạt hình bạn có thể sử dụng đoạn mã sau:

- (void)animate { 
    int newX, newY; //New position 
    int newW, newH; //New size 
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{ 
     yourView.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway 
     yourView.frame = CGRectMake(newX/2, newY/2, newW/2, newH/2); 
    } completion:^{ 
     while ([yourView.subviews count] > 0) 
      [[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews 
     // Add your new views here 
     [UIView animateWithDuration:someDuration delay:someDelay animations:^{ 
      yourView.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip 
      yourView.frame = CGRectMake(newX, newY, newW, newH); 
     } completion:^{ 
      // Flip completion code here 
     }]; 
    }]; 
} 

Hope this helps!

Answer 4

Tôi rất muốn giới thiệu xem this bài đăng.

Bạn không cần thực sự xử lý tất cả hoạt ảnh này.

Nếu bạn sử dụng phương pháp lớp học UIViewtransitionFromView:toView:duration:options:completion: và chuyển qua UIViewAnimationOptionTransitionFlipFromLeft hoặc UIViewAnimationOptionTransitionFlipFromRight - tùy theo cách bạn muốn hoạt ảnh lật.

Tôi đã thực hiện điều tương tự như được hiển thị trong ứng dụng MLB bằng phương pháp này. from view của bạn sẽ là ô trong lưới và to view sẽ là thứ sẽ có trên "lưng" của ô.

Hy vọng điều này sẽ làm giảm mã tổng thể bạn cần.

Answer 5

Tôi sẽ sử dụng UICollectionView với UICollectionViewCell tùy chỉnh và hoạt ảnh với cuộc gọi đại biểu của nó ... Chỉ là một ví dụ cho những người khác chọn.

#pragma mark - UICollectionViewDelegate 
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath: 
(NSIndexPath *)indexPath 
{ 


[UIView beginAnimations:@"showImage" context:Nil]; 
    CGRect cellFrame = cell.frame; 
    CGRect imgFram = cell.imageView.frame; 
    [UIView setAnimationDuration:0.8]; 
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell 
cache:YES]; 
    cellFrame.size = CGSizeMake(200, 200); 
    cellFrame.origin.y = 10; 
    cellFrame.origin.x = 45; 
    cell.frame = cellFrame; 
    imgFram.size = CGSizeMake(200, 200); 
    cell.imageView.frame = imgFram; 
    [collectionView bringSubviewToFront:cell]; 
    [UIView commitAnimations]; 
}