跑马灯

作者: 帆123 | 来源:发表于2017-08-28 14:46 被阅读10次

很多项目中在新闻页要求跑马灯的效果,特记下来,方便下次使用

//创建label

UILabel *lable = [[UILabel alloc]init];

lable.font = [UIFont systemFontOfSize:15];

//设置label显示文字

NSString *textString =@"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据";

lable.text = textString;

lable.backgroundColor = [UIColor yellowColor];

//获取文字的长度,方便做长度适配

CGSize textSize =[lable.text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}];

lable.frame = CGRectMake(self.view.bounds.size.width,0, [lable.text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}].width,40);

UIView *subView = [[UIView alloc]initWithFrame:CGRectMake(100,50,self.view.bounds.size.width -100,40)];

subView.backgroundColor = [UIColor redColor];

[self.view addSubview:subView];

[subView addSubview:lable];

subView.clipsToBounds =YES;

CGFloat speet;

//判断文字长度是否大于label显示的长度,以此来设置文字显示的时长

if(textSize.width >self.view.bounds.size.width -100) {

speet = textSize.width/15;

}else{

speet = (self.view.bounds.size.width -100)/15;

}

lable.layer.anchorPoint = CGPointMake(0,0);

//设置动画

CABasicAnimation *action1 = [CABasicAnimation animation];

action1.keyPath =@"position";

action1.fromValue = [NSValue valueWithCGPoint:CGPointMake(textSize.width,0)];

action1.toValue = [NSValue valueWithCGPoint:CGPointMake(-textSize.width,0)];

action1.repeatCount =1e100f;

//设置文字显示时长

action1.duration =0.5*speet;

action1.removedOnCompletion =NO;

action1.fillMode = kCAFillModeBoth;

//添加动画

[lable.layer addAnimation:action1 forKey:nil];

相关文章

  • GitHub上受欢迎的Android UI Library(下)

    跑马灯 MarqueeView★1568 - 垂直翻页公告 MarqueeViewDemo★896 - 跑马灯Vi...

  • Android 基础 UI 之 TextView

    一、显示富文本 效果图image 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯:...

  • textview - 跑马灯

    textview 的跑马灯不用说了吧,大家肯定都知道这是个啥,但是呢我还是放个图吧: 实现单个跑马灯 跑马灯的核心...

  • Kevin Learn Android:TextView

    一、显示富文本 效果图01.png 布局文件 逻辑代码 二、跑马灯效果 1. 横向跑马灯 效果图: 单个实现跑马灯...

  • TextView漏的知识点

    跑马灯效果

  • leetcode ascii码 汇总

    跑马灯效果

  • iOS 跑马灯的实现

    介绍 我们一说起跑马灯第一个想到的就是:山寨机。接下来介绍的跑马灯和那个跑马灯是不一样滴。在iOS中,跑马灯是指l...

  • Android实现跑马灯效果

    实现方式1 跑马灯相关属性 实现方式2:自定义跑马灯类 上面方式1能暂时实现跑马灯效果,但在多次点击事件之后容易失...

  • 流水灯(2016-04-03)

    跑马灯: 左右跑马灯(for循环后面不要加分号) 数码管依次显示0-9

  • flutter跑马灯

    flutter_marquee flutter 插件 flutter 跑马灯可以指定跑马灯的方向可以传入数组,可以...

网友评论

      本文标题:跑马灯

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