UIView 中的 UIBezierPath 动画

Posted 2023-03-13

【中文标题】UIView 中的 UIBezierPath 动画

【英文标题】：UIBezierPath Animation in UIView

【发布时间】：2015-02-23 19:44:10

【问题描述】：

我正在尝试制作在 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;

【问题讨论】：

使用UIBezierPath。如果您展示您的代码并就您遇到的特定问题提出问题，那么有人可能会为您提供帮助。

好的。我添加了代码。谢谢！！

【参考方案1】：

您的动画块不包含任何动画。您应该将您的设置移到动画块之外，然后在其中制作动画。

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

除此之外，您的预期动画没有线性进展，这意味着您需要改用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];

【参考方案2】：

1、将你创建的路径添加到 CAShaperLayer 对象中； 2、查看CAShapeLayer类中的“strokeStart”和“strokeEnd”属性； 3、添加一个名为“CABasicAnimation”的动画到你的Layer obj中。