服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS 实现跑马灯效果的方法示例

iOS 实现跑马灯效果的方法示例

2021-03-02 15:57irembeu IOS

可能说起跑马灯,大家第一个会想到的就是山寨机。但接下来这篇文章介绍的跑马灯和那个跑马灯是不一样滴。在iOS中,跑马灯是指label上的字自动滚动,形成类似跑马灯似的条幅。下面通过这篇文章我们来一起看看iOS 实现跑马灯

在网页开发当中跑马灯是常用到的,用来显示通知等,在游戏开发当中也如此。

首先来看看效果图:

iOS 实现跑马灯效果的方法示例

接下来就简单看看这效果是怎么实现的。

实现方法

1、首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画,或者还有有用scrollView的思路,这里我是用的动画的方式实现的。

2、.h文件

自定义一个继承UIView的LGJAutoRunLabel类,在.h文件中:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@class LGJAutoRunLabel;
 
typedef NS_ENUM(NSInteger, RunDirectionType) {
 LeftType = 0,
 RightType = 1,
};
 
@protocol LGJAutoRunLabelDelegate <NSObject>
 
@optional
- (void)operateLabel: (LGJAutoRunLabel *)autoLabel animationDidStopFinished: (BOOL)finished;
 
@end
 
@interface LGJAutoRunLabel : UIView
 
@property (nonatomic, weak) id <LGJAutoRunLabelDelegate> delegate;
@property (nonatomic, assign) CGFloat speed;
@property (nonatomic, assign) RunDirectionType directionType;
 
- (void)addContentView: (UIView *)view;
- (void)startAnimation;
- (void)stopAnimation;

定义一个NS_ENUM用来判断自动滚动的方向,分别是左和右,声明一个可选类型的协议,用来在controller中调用并对autoLabel进行操作。声明对外的属性和方法。这里一目了然,主要的实现思路都集中在.m文件中。

3、.m文件

声明“私有”变量和属性:

?
1
2
3
4
5
6
7
8
9
10
11
@interface LGJAutoRunLabel()<CAAnimationDelegate>
{
 CGFloat _width;
 CGFloat _height;
 CGFloat _animationViewWidth;
 CGFloat _animationViewHeight;
 BOOL _stoped;
 UIView *_contentView;//滚动内容视图
}
@property (nonatomic, strong) UIView *animationView;//放置滚动内容视图
@end

初始化方法:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (instancetype)initWithFrame:(CGRect)frame {
 
 if (self == [super initWithFrame:frame]) {
 _width = frame.size.width;
 _height = frame.size.height;
 
 self.speed = 1.0f;
 self.directionType = LeftType;
 self.layer.masksToBounds = YES;
 self.animationView = [[UIView alloc] initWithFrame:CGRectMake(_width, 0, _width, _height)];
 [self addSubview:self.animationView];
 }
 return self;
}

将滚动内容视图contentView添加到动画视图animationView上:

?
1
2
3
4
5
6
7
8
9
10
11
- (void)addContentView:(UIView *)view {
 
 [_contentView removeFromSuperview];
 view.frame = view.bounds;
 _contentView = view;
 self.animationView.frame = view.bounds;
 [self.animationView addSubview:_contentView];
 
 _animationViewWidth = self.animationView.frame.size.width;
 _animationViewHeight = self.animationView.frame.size.height;
}

让animationView上的contentView自动滚动起来的主要方法在这儿,重点来了,就是这个- (void)startAnimation方法,看一下这个方法里面是怎么样实现的:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (void)startAnimation {
 [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];
 _stoped = NO;
 
 CGPoint pointRightCenter = CGPointMake(_width + _animationViewWidth / 2.f, _animationViewHeight / 2.f);
 CGPoint pointLeftCenter = CGPointMake(-_animationViewWidth / 2, _animationViewHeight / 2.f);
 CGPoint fromPoint = self.directionType == LeftType ? pointRightCenter : pointLeftCenter;
 CGPoint toPoint  = self.directionType == LeftType ? pointLeftCenter : pointRightCenter;
 
 self.animationView.center = fromPoint;
 UIBezierPath *movePath = [UIBezierPath bezierPath];
 [movePath moveToPoint:fromPoint];
 [movePath addLineToPoint:toPoint];
 
 CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 moveAnimation.path   = movePath.CGPath;
 moveAnimation.removedOnCompletion = YES;
 moveAnimation.duration  = _animationViewWidth / 30.f * (1 / self.speed);
 moveAnimation.delegate  = self;
 [self.animationView.layer addAnimation:moveAnimation forKey:@"animationViewPosition"];
}

↘️首先先把animationView.layer上的动画移除掉,接下来就是要找到animationView\contentView的pointCenter这里把这个中点当做是animationView或者是contentView都行,因为这两个视图的frame是相等的,这步找左右中点的意义在于,完全显示出文字内容,因为可能会遇到那种比如文字太长了,view长度不够,不能完全显示出来文字的全部内容, 这里我们找到中点,也就相当于确定了内容视图要滑动的范围了,接下来根据起始方向的枚举值设置fromPoint和toPoint这里我们默认是从右向左滚动的。这里我们做动画设置,用到了贝塞尔曲线,我们设置UIBezierPath的起始位置就是fromPoint也就是屏幕右方(我们看不见)self.animationView.center。终止位置是屏幕左方toPoint此时animationView滚动的起始位置的首和终止位置的尾的距离正好是屏幕的宽度。这里我们使用CAKeyframeAnimation关键帧动画,moveAnimation.path                 = movePath.CGPath; ,moveAnimation.removedOnCompletion  = YES;动画完成后就将动画移除,不保留最终的状态。 [self.animationView.layer addAnimation:moveAnimation forKey:@"animationViewPosition"];将动画添加到animationView.layer上。

(这段是对上面代码的解释)

-------------------分割线-------------------

接下来的这个就是代理方法的实现了,当动画完成后悔调用LGJAutoRunLabelDelegate我们自定义的delegate方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
- (void)stopAnimation {
 _stoped = YES;
 [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];
}
 
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
 if (self.delegate && [self.delegate respondsToSelector:@selector(operateLabel:animationDidStopFinished:)]) {
 [self.delegate operateLabel:self animationDidStopFinished:flag];
 }
 if (flag && !_stoped) {
 [self startAnimation];
 }
}

4、在controller中使用方法

主要的方法就是声明LGJAutoRunLabel实例,将代理设为自身,声明directionType默认为Left,在runLabel上创建label也就是我们看到的文字。其余方法一目了然了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//MARK:- CreateAutoRunLabel
- (void)createAutoRunLabel {
 LGJAutoRunLabel *runLabel = [[LGJAutoRunLabel alloc] initWithFrame:CGRectMake(0, 100, kWidth, 50)];
 runLabel.delegate = self;
 runLabel.directionType = LeftType;
 [self.view addSubview:runLabel];
 [runLabel addContentView:[self createLabelWithText:@"繁华声 遁入空门 折煞了梦偏冷 辗转一生 情债又几 如你默认 生死枯等 枯等一圈 又一圈的 浮图塔 断了几层 断了谁的痛直奔 一盏残灯 倾塌的山门 容我再等 历史转身 等酒香醇 等你弹 一曲古筝" textColor:[selfrandomColor] labelFont:[UIFont systemFontOfSize:14]]];
 [runLabel startAnimation];
}
 
- (UILabel *)createLabelWithText: (NSString *)text textColor:(UIColor *)textColor labelFont:(UIFont *)font {
 NSString *string = [NSString stringWithFormat:@"%@", text];
 CGFloat width = [UILabel getWidthByTitle:string font:font];
 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 50)];
 label.font = font;
 label.text = string;
 label.textColor = textColor;
 return label;
}
 
- (UIColor *)randomColor {
 return [UIColor colorWithRed:[self randomValue] green:[self randomValue] blue:[self randomValue] alpha:1];
}
 
- (CGFloat)randomValue {
 return arc4random()%255 / 255.0f;
}

总结

这个例子挺小的,主要思路就是利用动画将其变活,可能不太好理解的地方就是在动画移动的path这个路径的距离上,我们想这个路径的时候肯定要这样想,我让动画从最初我看不见的地方出现,然后最后到我看不见的地方消失,这个中间的距离之差就是屏幕的宽度了,而这个屏幕的宽度正好我们可以用contentView.frame来表示。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

原文链接:http://www.jianshu.com/p/1cdb3e6a9d80

延伸 · 阅读

精彩推荐
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22