苹果跑马灯怎么设置(怎么在iOS中实现一个跑马灯效果)

实现方法

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

2、.h文件

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

@classLGJAutoRunLabel;typedefNS_ENUM(NSInteger,RunDirectionType){LeftType=0,RightType=1,};@protocolLGJAutoRunLabelDelegate<NSObject>@optional-(void)operateLabel:(LGJAutoRunLabel*)autoLabelanimationDidStopFinished:(BOOL)finished;@end@interfaceLGJAutoRunLabel:UIView@property(nonatomic,weak)id<LGJAutoRunLabelDelegate>delegate;@property(nonatomic,assign)CGFloatspeed;@property(nonatomic,assign)RunDirectionTypedirectionType;-(void)addContentView:(UIView*)view;-(void)startAnimation;-(void)stopAnimation;

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

3、.m文件

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

@interfaceLGJAutoRunLabel()<CAAnimationDelegate>{CGFloat_width;CGFloat_height;CGFloat_animationViewWidth;CGFloat_animationViewHeight;BOOL_stoped;UIView*_contentView;//滚动内容视图}@property(nonatomic,strong)UIView*animationView;//放置滚动内容视图@end

初始化方法:

-(instancetype)initWithFrame:(CGRect)frame{if(self==[superinitWithFrame:frame]){_width=frame.size.width;_height=frame.size.height;self.speed=1.0f;self.directionType=LeftType;self.layer.masksToBounds=YES;self.animationView=[[UIViewalloc]initWithFrame:CGRectMake(_width,0,_width,_height)];[selfaddSubview:self.animationView];}returnself;}

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

-(void)addContentView:(UIView*)view{[_contentViewremoveFromSuperview];view.frame=view.bounds;_contentView=view;self.animationView.frame=view.bounds;[self.animationViewaddSubview:_contentView];_animationViewWidth=self.animationView.frame.size.width;_animationViewHeight=self.animationView.frame.size.height;}

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

-(void)startAnimation{[self.animationView.layerremoveAnimationForKey:@"animationViewPosition"];_stoped=NO;CGPointpointRightCenter=CGPointMake(_width+_animationViewWidth/2.f,_animationViewHeight/2.f);CGPointpointLeftCenter=CGPointMake(-_animationViewWidth/2,_animationViewHeight/2.f);CGPointfromPoint=self.directionType==LeftType?pointRightCenter:pointLeftCenter;CGPointtoPoint=self.directionType==LeftType?pointLeftCenter:pointRightCenter;self.animationView.center=fromPoint;UIBezierPath*movePath=[UIBezierPathbezierPath];[movePathmoveToPoint:fromPoint];[movePathaddLineToPoint:toPoint];CAKeyframeAnimation*moveAnimation=[CAKeyframeAnimationanimationWithKeyPath:@"position"];moveAnimation.path=movePath.CGPath;moveAnimation.removedOnCompletion=YES;moveAnimation.duration=_animationViewWidth/30.f*(1/self.speed);moveAnimation.delegate=self;[self.animationView.layeraddAnimation:moveAnimationforKey:@"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方法。

-(void)stopAnimation{_stoped=YES;[self.animationView.layerremoveAnimationForKey:@"animationViewPosition"];}-(void)animationDidStop:(CAAnimation*)animfinished:(BOOL)flag{if(self.delegate&&[self.delegaterespondsToselector:@selector(operateLabel:animationDidStopFinished:)]){[self.delegateoperateLabel:selfanimationDidStopFinished:flag];}if(flag&&!_stoped){[selfstartAnimation];}}

4、在controller中使用方法

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

//MARK:-CreateAutoRunLabel-(void)createAutoRunLabel{LGJAutoRunLabel*runLabel=[[LGJAutoRunLabelalloc]initWithFrame:CGRectMake(0,100,kWidth,50)];runLabel.delegate=self;runLabel.directionType=LeftType;[self.viewaddSubview:runLabel];[runLabeladdContentView:[selfcreateLabelWithText:@"繁华声遁入空门折煞了梦偏冷辗转一生情债又几如你默认生死枯等枯等一圈又一圈的浮图塔断了几层断了谁的痛直奔一盏残灯倾塌的山门容我再等历史转身等酒香醇等你弹一曲古筝"textColor:[selfrandomColor]labelFont:[UIFontsystemFontOfSize:14]]];[runLabelstartAnimation];}-(UILabel*)createLabelWithText:(NSString*)texttextColor:(UIColor*)textColorlabelFont:(UIFont*)font{NSString*string=[NSstringstringWithFormat:@"%@",text];CGFloatwidth=[UILabelgetWidthByTitle:stringfont:font];UILabel*label=[[UILabelalloc]initWithFrame:CGRectMake(0,0,width,50)];label.font=font;label.text=string;label.textColor=textColor;returnlabel;}-(UIColor*)randomColor{return[UIColorcolorWithRed:[selfrandomValue]green:[selfrandomValue]blue:[selfrandomValue]alpha:1];}-(CGFloat)randomValue{returnarc4random()%255/255.0f;}

上述内容就是怎么在iOS中实现一个跑马灯效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注本站行业资讯频道。