【移動應(yīng)用開發(fā)技術(shù)】怎么在iOS中實現(xiàn)一個跑馬燈效果

【移動應(yīng)用開發(fā)技術(shù)】怎么在iOS中實現(xiàn)一個跑馬燈效果

本篇文章為大家展示了怎么在iOS中實現(xiàn)一個跑馬燈效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。實現(xiàn)方法1、首先我們從這個圖片里面能聯(lián)想到如果實現(xiàn)這個效果必然需要使用到動畫，或者還有有用scrollView的思路，這里我是用的動畫的方式實現(xiàn)的。2、.h文件自定義一個繼承UIView的LGJAutoRunLabel類，在.h文件中：@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用來判斷自動滾動的方向，分別是左和右，聲明一個可選類型的協(xié)議，用來在controller中調(diào)用并對autoLabel進(jìn)行操作。聲明對外的屬性和方法。這里一目了然，主要的實現(xiàn)思路都集中在.m文件中。3、.m文件聲明“私有”變量和屬性：@interface

LGJAutoRunLabel()<CAAnimationDelegate>

{

CGFloat

_width;

CGFloat

_height;

CGFloat

_animationViewWidth;

CGFloat

_animationViewHeight;

BOOL

_stoped;

UIView

*_contentView;//滾動內(nèi)容視圖

}

@property

(nonatomic,

strong)

UIView

*animationView;//放置滾動內(nèi)容視圖

@end初始化方法：-

(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;

}將滾動內(nèi)容視圖contentView添加到動畫視圖animationView上：-

(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自動滾動起來的主要方法在這兒，重點(diǎn)來了，就是這個-(void)startAnimation方法，看一下這個方法里面是怎么樣實現(xiàn)的：-

(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"];

}↘?首先先把a(bǔ)nimationView.layer上的動畫移除掉，接下來就是要找到animationView\contentView的pointCenter這里把這個中點(diǎn)當(dāng)做是animationView或者是contentView都行，因為這兩個視圖的frame是相等的，這步找左右中點(diǎn)的意義在于，完全顯示出文字內(nèi)容，因為可能會遇到那種比如文字太長了，view長度不夠，不能完全顯示出來文字的全部內(nèi)容，這里我們找到中點(diǎn)，也就相當(dāng)于確定了內(nèi)容視圖要滑動的范圍了，接下來根據(jù)起始方向的枚舉值設(shè)置fromPoint和toPoint這里我們默認(rèn)是從右向左滾動的。這里我們做動畫設(shè)置，用到了貝塞爾曲線，我們設(shè)置UIBezierPath的起始位置就是fromPoint也就是屏幕右方（我們看不見）self.animationView.center。終止位置是屏幕左方toPoint此時animationView滾動的起始位置的首和終止位置的尾的距離正好是屏幕的寬度。這里我們使用CAKeyframeAnimation關(guān)鍵幀動畫，moveAnimation.path

=movePath.CGPath;，moveAnimation.removedOnCompletion

=YES;動畫完成后就將動畫移除，不保留最終的狀態(tài)。[self.animationView.layeraddAnimation:moveAnimationforKey:@"animationViewPosition"];將動畫添加到animationView.layer上。（這段是對上面代碼的解釋）分割線接下來的這個就是代理方法的實現(xiàn)了，當(dāng)動畫完成后悔調(diào)用LGJAutoRunLabelDelegate我們自定義的delegate方法。-

(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實例，將代理設(shè)為自身，聲明directionType默認(rèn)為Left，在runLabel上創(chuàng)建label也就是我們看到的文字。其余方法一目了然了。//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:@"繁華聲

遁入空門

折煞了夢偏冷

輾轉(zhuǎn)一生

情債又幾

如你默認(rèn)

生死枯等

枯等一圈

又一圈的

浮圖塔

斷了幾層

斷了誰的痛直奔

一盞殘燈

傾塌的山門

容我再等

歷史轉(zhuǎn)身

等酒香醇

等你彈

一曲古箏"

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

=

fo