फ्लिप, ग्रो, और अनुवाद एनिमेशन

Question

एमएलबी एट बैट ऐप के this video पर देखें। असल में, मैं सिर्फ UIModalPresentationFormSheet शैली के साथ प्रस्तुत करना चाहता हूं और इसे किसी अन्य दृश्य से बढ़ाना चाहता हूं, फिर फ़्लिप करें। जब आप एमएलबी ऐप पर स्कोरबोर्ड में किसी गेम पर टैप करते हैं। कोई भी जानता है कि मैं इसे कैसे पूरा कर सकता हूं?

धन्यवाद

संपादित करें: मेरा मुख्य दृश्य काफी एमएलबी ऐप जैसा सेटअप है। मैं AQGridView का उपयोग कर रहा हूं और एनीमेशन तब करना चाहता हूं जब ग्रिड व्यू में एक सेल टैप हो।

संपादित करें 2: मैं भी UIViewController अवधारणा खुदाई और सिर्फ एक सादे UIView का उपयोग कर के लिए खुला हो जाएगा, तो UIModalPresentationFormSheet कि मैन्युअल अगर आसान होता है की शैली की नकल।

संपादित करें 3: ठीक है, ऐसा करने के लिए UIViewController का उपयोग करना भूल जाएं, क्योंकि मुझे कोई प्रतिक्रिया नहीं मिली है, मुझे लगता है कि यह संभव नहीं है। मेरा नया सवाल यह है कि मैं सिर्फ UIView के उपयोग से पोस्ट किए गए वीडियो में एनीमेशन को दोहरा सकता हूं? तो मूल रूप से, प्रारंभिक दृश्य को एक ही समय में बढ़ने, स्थानांतरित करने और फ़्लिप करने की आवश्यकता होती है।

संपादित करें 4: मुझे लगता है कि मेरे पास वास्तविक एनीमेशन है, अब मेरी एकमात्र समस्या CATransform3DTranslate में फ़ीड करने के लिए निर्देशांक की गणना कर रही है। मेरे विचार को वीडियो में बिल्कुल बिल्कुल एनिमेट करने की आवश्यकता है। इसे स्क्रीन के केंद्र में एक और दृश्य शुरू करने और एनिमेट करने की आवश्यकता है। यहाँ कैसे मैं मानना ​​है कि केंद्र में पॉप-अप होने के लिए निर्देशांक की गणना करने के कोशिश कर रहा हूँ है:

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

gridView मेरा मुख्य विचार यह है कि छोटे ग्रिड आइटम धारण के कंटेनर दृश्य है। view विशिष्ट ग्रिड आइटम है जिसे हम एनिमेट कर रहे हैं। और detailView वह दृश्य है जो स्क्रीन के बीच में आता है।

Answer 1

ठीक है, मैंने इसे समझ लिया। यहाँ मैं क्या किया है:

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

मैं एक AQGridView में एक आइटम के साथ इस कर रहा हूँ। मेरे कोड नमूने में viewAQGridViewCell का उदाहरण है जो मैं एनिमेट कर रहा हूं। और vc.view मेरा विवरण UIViewController/UIView है जो मैं प्रदर्शित कर रहा हूं।

Answer 2

आप 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 

यह आसानी से जो कुछ भी एनिमेटेड संक्रमण आप चाहते हैं उपयोग करने के लिए बदला जा सकता है; आपके लिए, आप एक CA3DTransform का उपयोग करना चाह सकते हैं। उम्मीद है की यह मदद करेगा!

Answer 3

एक फ्लिप करने के लिए, बड़े होते हैं, और एनीमेशन का अनुवाद आप निम्नलिखित कोड का उपयोग कर सकते हैं:

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

आशा इस मदद करता है!

Answer 4

मैं this पोस्ट पर एक नज़र डालने की अत्यधिक अनुशंसा करता हूं।

आपको वास्तव में इस एनीमेशन को स्वयं संभालने की आवश्यकता नहीं है।

आप UIView वर्ग विधि transitionFromView:toView:duration:options:completion: और UIViewAnimationOptionTransitionFlipFromLeft या UIViewAnimationOptionTransitionFlipFromRight में गुजर का उपयोग करते हैं - जो भी जिस तरह से आप एनीमेशन फ्लिप करना चाहते हैं।

मैंने इस विधि का उपयोग कर एमएलबी ऐप में दिखाए गए वही काम को लागू किया है। आपका from view ग्रिड में सेल होगा और to view वह चीज होगी जो सेल के "पीछे" पर होगी।

आशा है कि इससे आपको आवश्यक समग्र कोड कम हो जाएगा।

Answer 5

मैं एक कस्टम UICollectionViewCell के साथ एक UICollectionView का उपयोग करता हूं और इसके प्रतिनिधि कॉल के साथ एनिमेट करता हूं ... दूसरों को चुनने के लिए बस एक उदाहरण।

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