Fade數(shù)字切換動效

歡迎同樣喜愛動效的你加入

iOS動效特攻隊–>QQ群:547897182

iOS動效特攻隊–>熊熊:648070256

CRAnimation開源項目:https://github.com/CRAnimation/CRAnimation

gitHub:CRNumberFadedAnimation

斷斷續(xù)續(xù)3周的時間,把這個動效還原出來了袭蝗。

原型是這樣的绊诲。

048D2384C794BDF62E9D8145002217B0.gif

最終的實現(xiàn)效果是這樣的

CRNumberFaded2.gif
當(dāng)然了级遭,這個動效里面的部分控件還是可以使用的惨驶。大家英文都辣么好随闪,除非特別難理解的蹬癌,一般的我就不寫注釋了捻勉。

數(shù)字切換控件 CRNumberFaded

CRNumberFaded控件實際上只有三個Label在一直復(fù)用昨登。所以可以不用擔(dān)心內(nèi)存的問題哦。

//基本用法
CRNumberFaded *_numberFadedView = [[CRNumberFaded alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
_numberFadedView.font = [UIFont fontWithName:@"Helvetica-Bold" size:150];
_numberFadedView.textColor = [UIColor whiteColor];
_numberFadedView.strings = strings;
_numberFadedView.delegate = self;
_numberFadedView.backgroundColor = [UIColor clearColor];
[_sliderIndicator addSubview:_numberFadedView];

//可使用參數(shù)和方法
@property (weak, nonatomic) id <CRNumberFadedDelegate> delegate;
@property (strong, nonatomic) NSArray   *strings;
@property (strong, nonatomic) UIFont    *font;
@property (strong, nonatomic) UIColor   *textColor;
@property (assign, nonatomic) BOOL      allowCircle;    //是否允許無限滾動

- (void)showNextView;
- (void)showLastView;
- (void)showToIndex:(int)toIndex;

//支持的代理方法
@protocol CRNumberFadedDelegate <NSObject>

- (void)willShowLastOneFadeAnimationWithString:(NSString *)string index:(int)index;
- (void)willStartFirstAnimationWithString:(NSString *)string index:(int)index;
- (void)fadingAnimationWithString:(NSString *)string index:(int)index;

@end

滑桿控件 CRSlider

CRSlider繼承自UIControl贯底,支持UIControlEventValueChanged監(jiān)聽事件丰辣。
原生的UISlider可自定義的屬性滿足不了這個動效的需求,只能自己重新寫了禽捆。

//基本用法
CRSlider *_slider = [[CRSlider alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 40)];
_slider.delegate = self;
_slider.minimumValue = 0;
_slider.maximumValue = _maxNum;
_slider.poleImageVOffX = _poleImageVOffX;
[_slider addTarget:self action:@selector(testSliderChanged:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:_slider];

//可使用參數(shù)和方法
@property(nonatomic) float value;
@property(nonatomic) float minimumValue;
@property(nonatomic) float maximumValue;

@property(nonatomic) float poleImageVOffX;
@property (strong, nonatomic) UIImageView *poleImageV;
@property (strong, nonatomic) UIImageView *thumbImageV;

//支持的代理方法
@protocol CRSliderDelegate <NSObject>
- (void)thumbImageVDidSlided:(CRSlider *)slider;
@end

滑桿指示器控件 CRSliderIndicator

指示器里面的這個圓槽是折騰了一段時間才出來的笙什。主要考慮到適配的問題,想想還是用比例來做的胚想,通過Sketch臨摹出曲線琐凭,然后把貝塞爾曲線的幾個控制點(diǎn)挑出來,通過比例來做適配浊服。圖示如下统屈,只點(diǎn)出來了左半邊的幾個點(diǎn),右半邊的同理牙躺。

CRSliderIndicatorMind.png
//基本用法
CRSliderIndicator *_sliderIndicator = [[CRSliderIndicator alloc] initWithFrame:CGRectMake(0, _customNaviBarView.maxY, WIDTH, sliderIndicatorHeight) withStrings:strings];
_sliderIndicator.chipOffX = _poleImageVOffX;
[self.view addSubview:_sliderIndicator];

//可使用參數(shù)和方法
@property (assign, nonatomic) CGFloat   circleCenterX;              //Slider按鈕的CenterX
@property (assign, nonatomic) CGFloat   r;                          //Slider按鈕的半徑
@property (assign, nonatomic) CGFloat   toCircleCenterYDistance;    //Slider按鈕的垂直距離
@property (strong, nonatomic) NSArray   *gradientColors;            //背景漸變色數(shù)組
@property (assign, nonatomic) CGFloat   chipOffX;

- (instancetype)initWithFrame:(CGRect)frame withStrings:(NSArray *)strings;

擼動效揪心的還是細(xì)節(jié)的不斷調(diào)試愁憔,因為想盡可能的還原出來還是需要慢慢打磨的。不過希望大家能喜歡孽拷,也能真正的用在項目中吨掌。
如果各位在使用過程中遇到問題或者bug,歡迎在github上提出issue脓恕。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膜宋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子炼幔,更是在濱河造成了極大的恐慌秋茫,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乃秀,死亡現(xiàn)場離奇詭異肛著,居然都是意外死亡圆兵,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門策泣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來衙傀,“玉大人抬吟,你說我怎么就攤上這事萨咕。” “怎么了火本?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵危队,是天一觀的道長。 經(jīng)常有香客問我钙畔,道長茫陆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任擎析,我火速辦了婚禮簿盅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘揍魂。我一直安慰自己桨醋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布现斋。 她就那樣靜靜地躺著喜最,像睡著了一般。 火紅的嫁衣襯著肌膚如雪庄蹋。 梳的紋絲不亂的頭發(fā)上瞬内,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機(jī)與錄音限书,去河邊找鬼虫蝶。 笑死,一個胖子當(dāng)著我的面吹牛倦西,可吹牛的內(nèi)容都是我干的秉扑。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼调限,長吁一口氣:“原來是場噩夢啊……” “哼舟陆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起耻矮,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤秦躯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后裆装,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體踱承,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡倡缠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茎活。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昙沦。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖载荔,靈堂內(nèi)的尸體忽然破棺而出盾饮,到底是詐尸還是另有隱情,我是刑警寧澤懒熙,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布丘损,位于F島的核電站,受9級特大地震影響工扎,放射性物質(zhì)發(fā)生泄漏徘钥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一肢娘、第九天 我趴在偏房一處隱蔽的房頂上張望呈础。 院中可真熱鬧,春花似錦橱健、人聲如沸而钞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽笨忌。三九已至,卻和暖如春俱病,著一層夾襖步出監(jiān)牢的瞬間官疲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工亮隙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留途凫,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓溢吻,卻偏偏與公主長得像维费,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子促王,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容