आईओएस एंड्रॉयड मटीरियल डिज़ाइन श्रेणीबद्ध UICollectionView

Question

का उपयोग कर रहा UICollectionView

का उपयोग कर एनीमेशन आईओएस में एंड्रॉयड मटीरियल डिज़ाइन Hierarchical Timing द्वारा शुरू करना चाहता हूँ समय अपने कहते हैं कि एक collectionView चलें, और देखने का आकार बदलने के कोई मुद्दा नहीं है, हो सकता है क्या उस समय पर फैशन में इस एनीमेशन को करने का सबसे अच्छा अभ्यास। देरी

Answer 1

ऐसा करने का एक तरीका टाइमर के साथ एक समय में कोशिकाओं को जोड़ना होगा, और वे कोशिकाएं खिड़की पर आने के बाद पूर्ण आकार में विस्तारित होंगी।

#import "ViewController.h" 
#import "RDCollectionViewCell.h" 

@interface ViewController() <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout> 
@property (weak,nonatomic) IBOutlet UICollectionView *collectionview; 
@property (strong,nonatomic) NSMutableArray *mutableArray; 
@property (strong,nonatomic) NSArray *data; 
@end 

@implementation ViewController 

-(void)viewDidLoad { 
    [super viewDidLoad]; 
    self.mutableArray = [NSMutableArray new]; 
    self.data = @[@"one", @"two", @"three", @"four", @"five", @"six", @"seven", @"eight", @"nine", @"ten"]; 
    [self performSelector:@selector(startTimer) withObject:nil afterDelay:0.5]; 
} 

-(void)startTimer { 
    [NSTimer scheduledTimerWithTimeInterval:.05 target:self selector:@selector(addCells:) userInfo:nil repeats:YES]; 
} 


-(void)addCells:(NSTimer *) timer { 
    static int counter = 0; 
    [self.mutableArray addObject:self.data[counter]]; 
    counter ++; 
    [self.collectionview insertItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:self.mutableArray.count -1 inSection:0]]]; 
    if (self.mutableArray.count == self.data.count) { 
     [timer invalidate]; 
    } 
} 


-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { 
    return self.mutableArray.count; 
} 


-(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 
    RDCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath]; 
    cell.contentView.backgroundColor = (indexPath.row % 2 == 0)? [UIColor colorWithRed:180/255.0 green:210/255.0 blue:254/255.0 alpha:1] : [UIColor colorWithRed:50/255.0 green:167/255.0 blue:85/255.0 alpha:1]; 
    cell.label.text = self.mutableArray[indexPath.row]; 
    return cell; 
} 

कस्टम सेल कक्षा में,

@implementation RDCollectionViewCell 

-(void)awakeFromNib { 
    self.contentView.transform = CGAffineTransformMakeScale(0.01, 0.01); 
} 


-(void)didMoveToWindow { 
    [UIView animateWithDuration:0.3 delay:0.1 options:0 animations:^{ 
     self.contentView.transform = CGAffineTransformIdentity; 
    } completion: nil]; 
} 

परियोजना यहां पाया जा सकता, http://jmp.sh/aDw846R

, इस एनीमेशन, डिजाइन और एनीमेशन बाद में बदल गया है, लेकिन दिलचस्प जवाब पर काम नहीं कर

Answer 2

कुछ ऐसा करने के लिए कैसे काम करना चाहिए। यादृच्छिक टुकड़े एक साथ फेंक दिया, मुझे पता है।

Here's a very well done pen जो आप वर्णन कर रहे हैं। यह में आप मिल जाएगा प्रश्न में समय समारोह वक्र, के रूप में सीएसएस में परिभाषित किया गया है कि:

cubic-bezier(0.650, 0.045, 0.405, 1.000) 

समय समारोह जानने के बाद, आप आईओएस में इस एनीमेशन लागू कर सकते हैं। यहां एक अन्य प्रश्न का एक लिंक दिया गया है - यह दिखाता है कि कस्टम एनिमेशन को कैसे खींचें और बहुत अच्छी तरह से समझाया गया है।

Custom timing functions in iOS

कुछ सरल गणित लग सकता है, लेकिन यह मदद करनी चाहिए! ...मुझे उम्मीद है।

चियर्स

Answer 3

उपवर्ग अपने संग्रह को देखने सेल और इस पद्धति जोड़ें:

class YourCollectionViewCell: UICollectionViewCell { 
    //Some IBOutlets if needed 

    func popAfter(delay: NSTimeInterval){ 
     transform = CGAffineTransformMakeScale(0, 0) 
     UIView.animateWithDuration(0.7, delay: delay, options: UIViewAnimationOptions.CurveEaseInOut, animations: {() -> Void in 
     self.transform = CGAffineTransformMakeScale(1, 1) 
     }, completion: nil)  
    } 
} 

सेट अपने संग्रह को देखने के delegate और आपके विचार नियंत्रक से dataSource (इस इंटरफ़ेस बिल्डर में किया जा सकता है)। कोशिकाओं चेतन करने के लिए अपने दृश्य नियंत्रक से स्थिरांक जोड़ें और फिर से लोड viewDidAppear में संग्रह दृश्य:

class YourViewController{ 
    private let numberOfCellsInLine = 3 
    private let numberOfVisibleCellsOnTheScreen = 12 
    private let baseDelay = 0.15 

    override func viewDidAppear(animated: Bool) { 
     super.viewDidAppear(animated) 
     collectionView.reloadData() 
    } 
} 

UICollectionView डेटा स्रोत के लिए आपके विचार नियंत्रक से एक्सटेंशन जोड़ें & प्रतिनिधि:

extension YourViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{ 
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{ 
     return numberOfCells 
    } 

    // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath: 
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{ 
     let cell = collectionView.dequeueReusableCellWithReuseIdentifier("YourCellID", forIndexPath: indexPath) as YourCollectionViewCell 
     //set cell's content 
     let index = indexPath.row 
     let yIndex = index/numberOfCellsInLine 
     let delay = Double(index % numberOfCellsInLine + (index >= numberOfVisibleCellsOnTheScreen ? 0 : yIndex)) * baseDelay 
     cell.popAfter(delay) 
     return cell 
    } 
} 

आप baseDelay और एनिमेशन की अवधि में समायोजित कर सकते हैं वांछित समय प्राप्त करने के लिए सेल का popAfter मान। उम्मीद है कि यह आपके ऐप के साथ मदद करता है और शुभकामनाएं देता है! आप कोई भी प्रश्न पूछ सकते हैं।