UIBezierPath Анимация в UIView

Question

Я пытаюсь сделать анимацию, которая выполняется в приложении Skype iOS. Анимацию можно увидеть по этой ссылке Animation Section 3:Add a Contact

Я пробовал с UIBezierPath, но я не могу этого сделать. Есть идеи?

Спасибо! Мой код

@implementation CustomView 

#pragma mark - Lifecycle and initialize components 


- (instancetype) initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 

     self.alpha = 0; 

     [self configureCancelButton]; 
     [self configureCollectionView]; 


     [self addSubview:self.cancelButton]; 
     [self addSubview:self.collectionView]; 


    } 

    return self; 
} 

- (void) configureCancelButton { 
    self.cancelButton = [UIButton buttonWithType:UIButtonTypeSystem]; 
    [self.cancelButton setTitle:@"Cancel" forState:UIControlStateNormal]; 
    self.cancelButton.titleLabel.font = [UIFont systemFontOfSize:20]; 
    [self.cancelButton addTarget:self action:@selector (cancelView) forControlEvents:UIControlEventTouchUpInside]; 
    self.cancelButton.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.8]; 
    self.cancelButton.layer.cornerRadius = 7.f; 

    self.frameForCancelButton = CGRectMake (self.bounds.origin.x+5, self.bounds.size.height - kCancelButtonHeight - 5, self.bounds.size.width-10, kCancelButtonHeight); 

    self.cancelButton.frame = CGRectMake (self.frameForCancelButton.origin.x, self.frameForCancelButton.origin.y + kAnimationOffset, self.frameForCancelButton.size.width, self.frameForCancelButton.size.height); 
} 

- (void) configureCollectionView { 
    UICollectionViewFlowLayout *layout= [[UICollectionViewFlowLayout alloc] init]; 
    layout.itemSize = CGSizeMake(kItemSize, kItemSize); 
    layout.minimumInteritemSpacing = 3.0; 
    layout.sectionInset = UIEdgeInsetsMake(0, 7, 7, 10); 
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; 

    self.frameForCollectionView = CGRectMake(self.cancelButton.frame.origin.x, self.frame.size.height - (self.cancelButton.frame.size.height + 10 + kCollectionHeight), self.cancelButton.bounds.size.width, kCollectionHeight); 

    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake (self.frameForCollectionView.origin.x, self.frameForCollectionView.origin.y + kAnimationOffset, self.frameForCollectionView.size.width, self.frameForCollectionView.size.height) 
              collectionViewLayout:layout]; 

    self.collectionView.backgroundColor = [UIColor colorWithWhite:1 alpha:.8]; 
    [self.collectionView registerClass:[RAShareCell class] forCellWithReuseIdentifier:@"Cell"]; 

    self.collectionView.delegate = self; 
    self.collectionView.dataSource = self; 
    self.collectionView.layer.cornerRadius = 7.f; 


} 


#pragma mark - Public Methods 


- (void) present { 

    [UIView animateWithDuration:0.35 animations:^{ 
     self.alpha = 1; 
     self.darkView.alpha = .5; 
    }]; 

    [UIView animateWithDuration:1.0 delay:0.45 options:(UIViewAnimationOptions) UIViewAnimationCurveEaseInOut animations:^{ 
     [self setupAnimation]; 
    }    completion:nil]; 
} 


- (void) cancelView { 

    [UIView animateWithDuration:0.35 delay:0 options:UIViewAnimationCurveEaseInOut animations:^{ 
     self.cancelButton.frame = CGRectMake (self.frameForCancelButton.origin.x, self.frameForCancelButton.origin.y + kAnimationOffset, self.frameForCancelButton.size.width, self.frameForCancelButton.size.height); 
     self.collectionView.frame= CGRectMake(self.frameForCollectionView.origin.x, self.frameForCollectionView.origin.y + kAnimationOffset, self.frameForCollectionView.size.width, self.frameForCollectionView.size.height); 
    } completion:^(BOOL finished) { 
     [self removeFromSuperview]; 
    }]; 
    ; 
} 

- (void) setupAnimation { 
    self.cancelButton.alpha = 1; 
    self.collectionView.alpha = 1; 

    self.cancelButton.frame = self.frameForCancelButton; 
    self.collectionView.frame = self.frameForCollectionView; 

    [self addShapeLayer]; 

} 

- (void)addShapeLayer 
{ 
    self.shapeLayer = [CAShapeLayer layer]; 
    self.shapeLayer.path = [[self pathAtInterval:0.0] CGPath]; 
    self.shapeLayer.fillColor = [[UIColor redColor] CGColor]; 
    self.shapeLayer.lineWidth = 3.0; 
    self.shapeLayer.strokeColor = [[UIColor redColor] CGColor]; 
    [self.collectionView.layer insertSublayer:self.shapeLayer atIndex:0]; 

} 

- (UIBezierPath *) pathAtInterval:(NSTimeInterval) interval { 
    UIBezierPath *path = [UIBezierPath bezierPath]; 

    [path moveToPoint:CGPointMake(self.collectionView.frame.origin.x,self.collectionView.frame.origin.y)]; 

    [path addQuadCurveToPoint:CGPointMake(self.collectionView.frame.size.width, self.collectionView.frame.origin.y) controlPoint:CGPointMake(self.collectionView.frame.size.width/2, self.collectionView.frame.origin.y-30)]; 


    return path; 
} 

Answer 1

анимации блок не содержит каких-либо анимации. Вы должны перенести свою настройку за пределы блока анимации, а затем оживить ее.

[self setupAnimation]; 
[UIView animateWithDuration:1.0 delay:0.45 options:(UIViewAnimationOptions) UIViewAnimationCurveEaseInOut animations:^{ 
    // animate something 
}    completion:nil]; 

В дополнение к этому, ваша целевая анимация не имеет линейной прогрессии, а это означает, что you'l хотите использовать animateKeyframesWithDuration вместо.

[UIView animateKeyframesWithDuration:1.0 delay:0.45 options:UIViewAnimationCurveEaseInOut animations:^{ 
    for (NSInteger i = 0; i < 10; i++) { 
    [UIView addKeyframeWithRelativeStartTime:i/10.0 
          relativeDuration:1.0/10.0 
            animations:^{ 
             self.shapeLayer = [self pathAtInterval:i/10.0]; 
            }]; 
    } 
} completion:nil]; 

Answer 2

1, добавьте путь, который вы создали к объекту CAShaperLayer; 2, см. Свойства «strokeStart» и «strokeEnd» в классе CAShapeLayer; 3, добавьте анимацию, которая называется «CABasicAnimation», к вашему слою obj.