简易轮播文字的封装（流动字幕）

￡神魔★判官ぃ 2022-08-19 15:09 156阅读 0赞

**大体思路：**

1.首先明确一点，我们是用一个继承自UIScrollView的类来实现字幕的滚动播放效果

2.在UIScrollView上放置一个和他一样大小的UILabel用来显示文字

3.用一个计时器，每隔0.05秒调用一个方法，定时改变UIScrollView的contentOffset，

从而达到字幕滚动播放的最终视觉效果

**方法实现：**

A.初始化方法里只能传入需要轮播的文字，即一个字符串

@interface MyScollview :  UIScrollView

//初始化方法

\- (instancetype)initWithFrame:(CGRect)frame str:(NSString \*)Str;

@end

B:为了保证UILabel的宽度刚好和字符串实际所需宽度相一致，我们需要将传入的字符串调用一个方法来计算出UILabel的所需的宽度，方法如下：

1）CGSize里面的width是一个特别大的估算数字，可以是一个无穷大的系统参数，只要明显大于计算出的值就可以。

2）font是字体大小，不同的字体大小所计算出的结果是不同的

CGRect frame = \[str boundingRectWithSize:CGSizeMake(10000, Wdth) options:(NSStringDrawingUsesLineFragmentOrigin) attributes:\[NSDictionarydictionaryWithObject:\[UIFont systemFontOfSize:font\] forKey:NSFontAttributeName\] context:nil\];

@implementation MyScollview

\- (instancetype)initWithFrame:(CGRect)frame str:(NSString \*)Str

\{

self = \[super initWithFrame:frame\];

if (self) \{ //此处计算的是高度

\[self returnStringHeight:Str Wdth:frame.size.height Font:17\];

\_title = \[\[UILabel alloc\] initWithFrame:CGRectMake(0, 0, \_wdth, frame.size.height)\];

\_title.text = Str;

\_title.numberOfLines = 0;

\_title.textAlignment = NSTextAlignmentCenter;

\[self addSubview:\_title\];

self.userInteractionEnabled = NO;

self.contentSize = CGSizeMake(\_wdth, frame.size.height);

/\*设置定时器\*/

self.time = \[NSTimertimerWithTimeInterval:0.04target:selfselector:@selector(overtime:) userInfo:nilrepeats:YES\];

\[\[NSRunLoopcurrentRunLoop\]addTimer:self.timeforMode:NSDefaultRunLoopMode\];

self.tmeer = 0;

\}

return self;

\}

//根据传入的字符串计算UILabel的宽度

\- (CGFloat)returnStringHeight:(NSString \*)string Wdth:(CGFloat)Wdth Font:(int)font\{

CGRect frame = \[string boundingRectWithSize:CGSizeMake(10000, Wdth) options:(NSStringDrawingUsesLineFragmentOrigin) attributes:\[NSDictionarydictionaryWithObject:\[UIFontsystemFontOfSize:font\] forKey:NSFontAttributeName\] context:nil\];

self.wdth = frame.size.width;

return frame.size.width;

\}

//计时器调用的实现字幕滚动的核心方法

\- (void)overtime:(NSTimer \*)time\{

//定时器每隔一段时间调用这个方法

//我们设置一个数来进行增加和减少并控制滚动的偏移距离

self.tmeer\++;

self.contentOffset = CGPointMake(self.tmeer, 0);

if (self.tmeer>self.wdth \-20) \{ //如果偏移距离超过需要的宽的我们把它重新开始滚动

self.tmeer=0;

//恢复原位

self.contentOffset = CGPointMake(self.tmeer, 0);

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript经典案例：图片流动轮播

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

旧城等待，/ 2022年12月24日 11:00/ 0 赞/ 95 阅读

相关实现简易轮播图效果

所用知识点：定时器 setInterval(function()\{ count(); \},1000) 每隔1000ms执行一次co

亦凉/ 2022年12月13日 04:54/ 0 赞/ 192 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 300 阅读

相关 js之图片轮播简易

要想简单的实现图片的轮播，当点击上一张按钮跳转到上一张，点击下一张按钮跳转到下一张图片。 ![watermark_type_ZHJvaWRzYW5zZm

心已赠人/ 2022年09月10日 08:24/ 0 赞/ 138 阅读

相关 uniapp封装一个轮播组件

<template> <view class="content"> <uni-swiper-dot class="uni-swiper-dot-b

小灰灰/ 2022年08月30日 11:55/ 0 赞/ 331 阅读

相关简易轮播文字的封装（流动字幕）

大体思路： 1.首先明确一点，我们是用一个继承自UIScrollView的类来实现字幕的滚动播放效果 2.在UIScrollView上放置一个和他一样大小的UILabel用

￡神魔★判官ぃ/ 2022年08月19日 15:09/ 0 赞/ 157 阅读

相关轮播封装(初步简单封装)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年06月03日 05:44/ 0 赞/ 167 阅读

相关无缝轮播的实现与封装

轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理 ![SouthEast][] 轮播图HTML中应包含几个部分? 1.

青旅半醒/ 2022年06月01日 12:21/ 0 赞/ 151 阅读

相关 JavaScript实现简易轮播图

JavaScript实现简易轮播图 -------------------- Html代码块： <div class="container"> <d

- 日理万妓/ 2022年04月10日 08:28/ 0 赞/ 341 阅读

相关简易轮播的实现

jquery实现ppt轮播 html代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

深藏阁楼爱情的钟/ 2021年12月03日 15:51/ 0 赞/ 296 阅读