登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

iOS实现网易云音乐右上角view跳动效果 [复制链接]

2018-9-25 10:28
Torr 阅读:447 评论:0 赞:0
Tag:  

123.gif

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

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

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

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

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

- (void)viewWillLayoutSubviews {
    self.jumpingView = [[UIView alloc] initWithFrame:CGRectMake(1001007080)];
    self.jumpingView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.jumpingView];
    CGPoint point1 = CGPointMake(605.f);
    CGPoint point2 = CGPointMake(455.f);
    CGPoint point3 = CGPointMake(305.f);
    CGPoint point4 = CGPointMake(155.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"];
}


分享到:
我来说两句
facelist
您需要登录后才可以评论 登录 | 立即注册
所有评论(0)
关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

返回顶部