iOS实现网易云音乐右上角view跳动效果

iOS 729 2018-09-17 16:17

效果走起!


iOS实现网易云音乐右上角view跳动效果-JEESNS
  • 链接: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"];
}

以下是评论区读者们给出的建议:使用CAReplicatorLayer实现该动画效果。

代码我已经更新上传了,感兴趣的可以去看看。

iOS实现网易云音乐右上角view跳动效果-JEESNS
文章评论