跳动的头像

一.项目链接

链接:
https://pan.baidu.com/s/1XYfnhkO5qUDz3B-0SwIo4g 密码:r8yo

二.开发流程

1.自定义一个将继承于UIView的类HeadAnimationView管理显示头像

创建文件

2.为HeadAnimationView提供创建方法

//实现快速创建
+(HeadeAnimationView *)headeAnimationViewWithName:(NSString *)imageName Frame:(CGRect)frame{
    
    //创建
    HeadeAnimationView *haView = [[HeadeAnimationView alloc] initWithFrame:frame];
    
    //保存图片名字
    haView.headImageName = imageName;
    
    //返回
    return haView;
}

3.在HeadAnimationView里面重写initWithFrame:方法(在类方法中我们使用了initWithFrame:创建，所以重写该方法进行控件布局)

-(instancetype)initWithFrame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]) {
        
        //对界面布局
        
        //添加容器视图 用于管理所有的容器视图
        self.containerView = [[UIView alloc] initWithFrame:CGRectMake((frame.size.width-kContainerSize)/2.0, (frame.size.height-kContainerSize)/2.0, kContainerSize, kContainerSize)];
        //背景颜色-测试
        _containerView.backgroundColor = [UIColor lightGrayColor];
        
        //显示
        [self addSubview:_containerView];
        
        //头像图层
        self.headLayer = [CALayer layer];
        _headLayer.position = CGPointMake(kContainerSize/2.0, kContainerSize/2.0);
        _headLayer.bounds = CGRectMake(0, 0, 100, 100);
        _headLayer.cornerRadius = 50;

        //显示
        [_containerView.layer addSublayer:_headLayer];
        
        //边框图层
        self.circleLayer = [CALayer layer];
        _circleLayer.position = _headLayer.position;
        _circleLayer.bounds = CGRectMake(0, 0, 80, 80);
        _circleLayer.cornerRadius = 40;
        _circleLayer.borderWidth = 4;
        _circleLayer.borderColor = [UIColor colorWithRed:138/255.0 green:209/255.0 blue:195/255.0 alpha:1].CGColor;
        
        //显示
        [_containerView.layer addSublayer:_circleLayer];
    }
    return self;
}

4.重写headImageName属性变量的set方法(类方法中我们是先调用了initWithFrame:方法再给headImageName赋值，所以headLayer.contents不能在initWithFrame:方法里面设置)

//重写headImageName的set方法
-(void)setHeadImageName:(NSString *)headImageName{
    
    _headImageName = headImageName;
    
    //initWithFrame之后才传值的
    _headLayer.contents = (__bridge id _Nullable)([UIImage imageNamed:self.headImageName].CGImage);
}

5.设置动画(利用CABasicAnimation给两个layer添加动画)

//开启动画
-(void)startAnimation{
    
    //头像放大缩小
    CABasicAnimation *headScaleAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    headScaleAni.fromValue = @(0.8);
    headScaleAni.toValue = @(1.3);
    headScaleAni.duration = 1;
    headScaleAni.repeatCount = CGFLOAT_MAX;
    //添加
    [_headLayer addAnimation:headScaleAni forKey:@"headkey"];
    
    
    //边框放大渐变
    //放大
    CABasicAnimation *scaleAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAni.toValue = @(2);
    //渐变 lineWidth
    CABasicAnimation *opacityAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAni.toValue = @(0);
    
    //组动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[scaleAni,opacityAni];
    group.duration = 1;
    group.repeatCount = CGFLOAT_MAX;
    
    //添加
    [_circleLayer addAnimation:group forKey:@"circlekey"];
}

6.利用HeadAnimationView创建跳动的头像

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建headerView
    self.headView = [HeadAnimationView headeAnimationViewWithName:@"beauty" Frame:CGRectMake(0, 50, self.view.frame.size.width, self.view.frame.size.height)];
    //背景颜色-测试
    _headView.backgroundColor = [UIColor greenColor];
    //显示
    [self.view addSubview:_headView];
}

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    
    [_headView startAnimation];
}

三.运行结果

跳动的头像

最后编辑于：2019.03.22 08:48:19