简单旋转动画

作者: o无尘o | 来源:发表于2015-11-22 17:56 被阅读325次
    // 某电商app首页的tableViewCell中有这种效果.
    // 挺好玩的
    // 做旋转动画的图片
    UIImageView *ggIV = [[UIImageView alloc] init];
    ggIV.frame = CGRectMake(78, 38, 19, 35);
    ggIV.image = [UIImage imageNamed:@"gg"];
    // 改锚点到top中间
    ggIV.layer.anchorPoint = CGPointMake(0.5, 0.0);
    [V addSubview: ggIV];
    self.ggIV = ggIV;
    
    // 围绕z轴 旋转动画
    CABasicAnimation *momAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    momAnimation.fromValue = [NSNumber numberWithFloat:-M_PI_4];
    momAnimation.toValue = [NSNumber numberWithFloat:M_PI_4];
    momAnimation.duration = 0.7;
    momAnimation.repeatCount = CGFLOAT_MAX;
    // 自动反转
    momAnimation.autoreverses = YES;
    // 给个旋转动画
    [self.ggIV.layer addAnimation:momAnimation forKey:@"animateLayer"];
    

    某电商旋转动画


    // 雷达动画
    // 某外卖类app的首页效果不错
    // 用工具分析界面构成并提取出图片资源模仿之
    - (void)Addradar
    {
        UIView *containerV = [[UIView alloc] init];
        containerV.frame = CGRectMake(100, 200, 220, 220);
        containerV.backgroundColor = [UIColor grayColor];
        [self.view addSubview: containerV];
        
        // 背景图 有两个圆圈的
        UIImageView *bg = [[UIImageView alloc] init];
        bg.frame = containerV.bounds;
        bg.image = [UIImage imageNamed: @"radar_bg"];
        [containerV addSubview: bg];
        
        // 放大缩小的4个点图
        UIImageView *i1 = [[UIImageView alloc] init];
        i1.frame = CGRectMake(53, 58, 11, 15);
        i1.image = [UIImage imageNamed: @"icon1"];
        i1.transform = CGAffineTransformScale(i1.transform, 0.1, 0.1);
        [containerV addSubview: i1];
        [self iconScaleWithImageView: i1 beginTime: 0.8];
        
        UIImageView *i2 = [[UIImageView alloc] init];
        i2.frame = CGRectMake(125, 80, 11, 15);
        i2.image = [UIImage imageNamed: @"icon2"];
        i2.transform = CGAffineTransformScale(i1.transform, 0.1, 0.1);
        [containerV addSubview: i2];
        [self iconScaleWithImageView: i2 beginTime: 0.2];
        
        UIImageView *i3 = [[UIImageView alloc] init];
        i3.frame = CGRectMake(60, 155, 11,15);
        i3.image = [UIImage imageNamed: @"icon3"];
        i3.transform = CGAffineTransformScale(i1.transform, 0.1, 0.1);
        [containerV addSubview: i3];
        [self iconScaleWithImageView: i3 beginTime: 0.6];
        
        UIImageView *i4 = [[UIImageView alloc] init];
        i4.frame = CGRectMake(155, 130, 11, 15);
        i4.image = [UIImage imageNamed: @"icon4"];
        i4.transform = CGAffineTransformScale(i1.transform, 0.1, 0.1);
        [containerV addSubview: i4];
        [self iconScaleWithImageView: i4 beginTime: 0.4];
        
        // 中间旋转的雷达指针图片
        UIImageView *radarIV = [[UIImageView alloc] init];
        radarIV.frame = CGRectMake(0, 0, 220, 220);
        radarIV.image = [UIImage imageNamed: @"radar_s"];
        [containerV addSubview:radarIV];
        // 给个旋转动画
        CABasicAnimation *radarRotation = [CABasicAnimation animation];
        radarRotation.keyPath = @"transform.rotation";
        radarRotation.toValue = @(2 * M_PI);
        radarRotation.duration = 2.8;
        radarRotation.repeatCount = MAXFLOAT;
        radarRotation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        [radarIV.layer addAnimation:radarRotation forKey:@"radarRotation"];
    }
    
    // 4个点的放大缩小动画
    - (void)iconScaleWithImageView:(UIImageView *)IV beginTime:(CGFloat)beginTime
    {
        CABasicAnimation *scaleA = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        scaleA.fromValue = @0.1;
        scaleA.toValue = @1.0;
        scaleA.autoreverses = YES;
        scaleA.repeatCount = MAXFLOAT;
        scaleA.duration = 0.8;
        scaleA.removedOnCompletion = NO;
        scaleA.fillMode = kCAFillModeForwards;
        scaleA.beginTime = CACurrentMediaTime() + beginTime;
        [IV.layer addAnimation:scaleA forKey:@"IV"];
    }
    

    某外卖旋转动画


    // 网易新闻的下拉刷新动画 缩放+移动
    UIView *containerV = [[UIView alloc] init];
    containerV.frame = CGRectMake(100, 200, 50, 30);
    [self.view addSubview:containerV];
    
    UIImageView *bgIV = [[UIImageView alloc] init];
    bgIV.frame = CGRectMake(10, 0, 30, 30);
    bgIV.image = [UIImage imageNamed:@"refresh_sphere"];
    [containerV addSubview:bgIV];
    
    UIImageView *circleIV = [[UIImageView alloc] init];
    circleIV.frame = CGRectMake(0, 8, 50, 15);
    circleIV.image = [UIImage imageNamed:@"refresh_circle"];
    [containerV addSubview:circleIV];
    
    // 绽放动画
    CABasicAnimation *scaleBA = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleBA.fromValue = [NSNumber numberWithFloat:0.5];
    scaleBA.toValue = [NSNumber numberWithFloat:1.0];
    scaleBA.repeatCount = MAXFLOAT;
    scaleBA.autoreverses = YES;
    scaleBA.duration = 0.7;
    
    // Y值动画
    CABasicAnimation *transBA = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    transBA.fromValue = [NSNumber numberWithFloat:-8.];
    transBA.toValue = [NSNumber numberWithFloat:8.];
    transBA.repeatCount = MAXFLOAT;
    transBA.autoreverses = YES;
    transBA.duration = 1.4;
    
    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
    group.animations = @[scaleBA, transBA];
    group.repeatCount = MAXFLOAT;
    group.duration = 2.8;
    [circleIV.layer addAnimation:group forKey:@"GROUP"];
    
    网易新闻的下拉刷新动画 缩放+移动
    http://i12.tietuku.com/58ab081217e557b2.gif

    参考资料
    1: https://github.com/EnjoySR/ESRefreshControl

    相关文章

      网友评论

        本文标题:简单旋转动画

        本文链接:https://www.haomeiwen.com/subject/tvcrhttx.html