呼吸灯动画应用(仿蘑菇街价格标签)

之前写了篇关于呼吸灯动画的,有几个朋友问我应用场景,刚好最近有用到,借此来实际应用下,先看看效果图;

Paste_Image.png

看了上面图片相信能想到一些实际的应用场景了吧
这里我已经将此控件简单封装了下,

你可以这么用

    // 创建 并设置标题,显示位置
    self.markView = [XXMarkTwinkleView markViewWithTitle:@"韩式波波头" showInRight: YES];
    // 宽度不用传,内部自适应了,如果对字体没有太大要求,高度其实也可以在内部固定
    self.markView.frame = CGRectMake(230, 320, 0, 30);
    // 设置文字颜色
    self.markView.textColor = [UIColor redColor];
    [self.view addSubview:self.markView];

也可以这么用

    // 快读创建一个呼吸灯view
    XXTwinkleView *twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
    // 根据呼吸灯view创建 标签
    XXMarkTwinkleView *markView1 = [[XXMarkTwinkleView alloc]initWithTwinkleView:self.twinkleView showInRight:NO];
    // 设置标题
    markView1.title = @"波波头";
    // 宽度自适应不需要传宽度
    markView1.frame = CGRectMake(120, 360, 0, 30);
    [self.view addSubview:markView1];

并没有啥难点就做了个自适应宽度,只需要设置呼吸灯控件的位置,内部会根据标签显示在左边还是右边,后台返回呼吸灯控件的位置,我们根据呼吸灯的位置来创建标签,所以外面设置frame中的x,y应该是呼吸灯控件的中心点,所以这里需要注意的是,如何在内部修改控件的位置,具体方法如下

- (void)layoutSubviews {
    [super layoutSubviews];
    // 下移一半
    CGRect tmpBounds = self.bounds;
    tmpBounds.origin.y -= self.cf_height * 0.5;
    self.bounds = tmpBounds;
    // 根据标签显示的位置,布局子控件
    if (self.isShowInRight) {
        self.twinkleView.frame = CGRectMake(-kTwinkleWidth * 0.5, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
        self.tagLable.frame = CGRectMake(self.twinkleView.cf_maxX + kContentMargin, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
        // 设置宽度
        self.cf_width = self.tagLable.cf_maxX;
    }else {
        
        self.tagLable.frame = CGRectMake(0, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
        self.twinkleView.frame = CGRectMake(self.tagLable.cf_maxX + kContentMargin, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
        // 计算宽度
        CGFloat width = self.twinkleView.cf_minX + kTwinkleWidth * 0.5;
        // 修改x值
        self.cf_x = self.cf_x - width;
        // 设置宽度 
        self.cf_width = width ;
    }
    // 设置圆角半径 
    self.tagLable.layer.cornerRadius = self.cf_height * 0.5;
}

最新优化 使用更简单,效果如下

app.gif

    // 两个的x y 相同因为标签类型不同,显示的方式不同,图片录制的效果不好,源码很清晰,
    self.twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
    [self.twinkleView setTitle:@"波波头" titleType:kTitleRight];
    self.twinkleView.frame = CGRectMake(120, 360, 0, 30);
    [self.view addSubview:self.twinkleView];
    
    XXTwinkleView *tmp =  [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
    [tmp setTitle:@"梨花烫" titleType:kTitleLeft];
    tmp.frame = CGRectMake(120, 360, 0, 30);
    [self.view addSubview:tmp];

具体效果请看Demo链接
如有不对的地方欢迎指出