iOS 跑馬燈的實現

2021-10-02 03:46:10 字數 3686 閱讀 7114

介紹

我們一說起跑馬燈第乙個想到的就是:山寨機。接下來介紹的跑馬燈和那個跑馬燈是不一樣滴。在ios中,跑馬燈是指label上的字自動滾動,形成類似跑馬燈似的條幅。像這樣子:

接下來就簡單看看這效果是怎麼實現的。

實現1、

首先我們從這個裡面能聯想到如果實現這個效果必然需要使用到動畫,或者還有有用scrollview的思路,這裡我是用的動畫的方式實現的。

2、.**件

自定義乙個繼承uiviewlgjautorunlabel類,在.**件中:

@class lgjautorunlabel;

typedef ns_enum(nsinteger, rundirectiontype) ;

@protocol lgjautorunlabeldelegate @optional

- (void)operatelabel: (lgjautorunlabel *)autolabel animationdidstopfinished: (bool)finished;

@end

@inte***ce lgjautorunlabel : uiview

@property (nonatomic, weak) id 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檔案

宣告「私有」變數和屬性:

@inte***ce lgjautorunlabel()

@property (nonatomic, strong) uiview *animationview;//放置滾動內容檢視

@end

初始化方法:

- (instancetype)initwithframe:(cgrect)frame 

return self;

}

將滾動內容檢視contentview新增到動畫檢視animationview上:

- (void)addcontentview:(uiview *)view
animationview上的contentview自動滾動起來的主要方法在這兒,重點來了,就是這個- (void)startanimation方法,看一下這個方法裡面是怎麼樣實現的:

- (void)startanimation
↘️首先先把animationview.layer上的動畫移除掉,接下來就是要找到animationview\contentviewpointcenter這裡把這個中點當做是animationview或者是contentview都行,因為這兩個檢視的frame是相等的,這步找左右中點的意義在於,完全顯示出文字內容,因為可能會遇到那種比如文字太長了,view長度不夠,不能完全顯示出來文字的全部內容, 這裡我們找到中點,也就相當於確定了內容檢視要滑動的範圍了,接下來根據起始方向的列舉值設定frompointtopoint這裡我們預設是從右向左滾動的。這裡我們做動畫設定,用到了貝塞爾曲線,我們設定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 

- (void)animationdidstop:(caanimation *)anim finished:(bool)flag

if (flag && !_stoped)

}

4、在controller中使用方法

主要的方法就是宣告lgjautorunlabel例項,將**設為自身,宣告directiontype預設為left,在runlabel上建立label也就是我們看到的文字。其餘方法一目了然了。

//mark:- createautorunlabel

- (void)createautorunlabel

- (uilabel *)createlabelwithtext: (nsstring *)text textcolor:(uicolor *)textcolor labelfont:(uifont *)font

- (uicolor *)randomcolor

- (cgfloat)randomvalue

總結

這個例子挺小的,主要思路就是利用動畫將其變活,可能不太好理解的地方就是在動畫移動的path這個路徑的距離上,我們想這個路徑的時候肯定要這樣想,我讓動畫從最初我看不見的地方出現,然後最後到我看不見的地方消失,這個中間的距離之差就是螢幕的寬度了,而這個螢幕的寬度正好我們可以用contentview.frame來表示。

簡單實現跑馬燈

1.可以自己實現自定義view public class marqueetestview extends textview implements runnable 畫筆工具 override protected void ondraw canvas canvas override public vo...

jQuery實現跑馬燈

前段時間做專案乙個需求,輪播方式實現不了,自己寫了乙個跑馬燈實現效果。html class container class scroll div class scroll begin href 文字1a li href 文字2a li href 文字3a li href 文字4a li href 文...

iOS開發之跑馬燈

1.法一 類似於彈幕,乙個label的實現 void viewdidload self.backview addsubview self.annonlabel self.backview sendsubviewtoback self.annonlabel void anmationfornotice...