效果走起 网易云右上角动画效果View.gif

gif跳动效果不怎么好，如果感兴趣的话，可以下载了解一下。

https://github.com/xiaojin1123/AnimationDemo.git

• 第一步还是先添加layer到红色的View上面，然后初始化设置第二和第四的Layer动画，目的是为了让它们的高度减少到原来的0.35。

- (void)viewWillLayoutSubviews {
    self.jumpingView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 70, 80)];
    self.jumpingView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.jumpingView];
    CGPoint point1 = CGPointMake(60, 5.f);
    CGPoint point2 = CGPointMake(45, 5.f);
    CGPoint point3 = CGPointMake(30, 5.f);
    CGPoint point4 = CGPointMake(15, 5.f);
    
    CGFloat lineLength = 70.f - 2*5.f;
    self.jumpingLayer = [self createLineLayer:point1 toPoint:CGPointMake(point1.x , point1.y + lineLength) withColor: [UIColor whiteColor]];
    self.jumpingLayer1 = [self createLineLayer:point2 toPoint:CGPointMake(point2.x ,point2.y + lineLength) withColor: [UIColor whiteColor]];
    self.jumpingLayer2 = [self createLineLayer:point3 toPoint:CGPointMake(point3.x , point3.y + lineLength) withColor: [UIColor whiteColor]];
    self.jumpingLayer3 = [self createLineLayer:point4 toPoint:CGPointMake(point4.x ,point4.y + lineLength) withColor: [UIColor whiteColor]];
    CGSize tempSize = self.jumpingLayer1.bounds.size;
    tempSize = CGSizeMake(tempSize.width, tempSize.height / 2);
    [self.jumpingView.layer addSublayer:self.jumpingLayer];
    [self.jumpingView.layer addSublayer:self.jumpingLayer1];
    [self.jumpingView.layer addSublayer:self.jumpingLayer2];
    [self.jumpingView.layer addSublayer:self.jumpingLayer3];
    [self createLineLayerAnim:self.jumpingLayer1 keyPath:@"strokeEnd"];
    [self createLineLayerAnim:self.jumpingLayer3 keyPath:@"strokeEnd"];
    self.jumpingView.transform = CGAffineTransformMakeRotation(-M_PI);
}

- (void)createLineLayerAnim:(CAShapeLayer *)layer keyPath:(NSString *)keyPath {
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:keyPath];
    anim.fillMode = kCAFillModeForwards;
    anim.fromValue = @1;
    anim.toValue = @0.35;
    anim.duration = 0;
    anim.removedOnCompletion = NO;
    [layer addAnimation:anim forKey:keyPath];
}

• 然后再对所有的layer统一执行动画,设置动画一直重复

- (IBAction)beginBtnClick:(id)sender {
    [self createLineLayerAnim:self.jumpingLayer keyPath:@"strokeEnd" pointX:0.f pointY:15.f values:@[@1,@0.35,@1]];
    [self createLineLayerAnim:self.jumpingLayer1 keyPath:@"strokeEnd" pointX:0.f pointY:15.f values:@[@0.35,@01,@0.35]];
    [self createLineLayerAnim:self.jumpingLayer2 keyPath:@"strokeEnd" pointX:0.f pointY:35.f values:@[@1,@0.35,@1]];
    [self createLineLayerAnim:self.jumpingLayer3 keyPath:@"strokeEnd" pointX:0.f pointY:55.f values:@[@0.35,@01,@0.35]];
}

- (void)createLineLayerAnim:(CAShapeLayer *)layer keyPath:(NSString *)keyPath pointX:(CGFloat)pointx pointY:(CGFloat)pointy values:(NSArray *)values{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:keyPath];
    anim.fillMode = kCAFillModeForwards;
    anim.removedOnCompletion = NO;
    //设置动画不停止
    anim.repeatCount = HUGE_VALF;
    anim.duration = 0.45f;
    anim.values = values;
    [layer addAnimation:anim forKey:@"jumping"];
}