歡迎同樣喜愛動效的你加入
iOS動效特攻隊–>QQ群:547897182
iOS動效特攻隊–>熊熊:648070256
CRAnimation開源項目:https://github.com/CRAnimation/CRAnimation
gitHub:CRNumberFadedAnimation
斷斷續(xù)續(xù)3周的時間,把這個動效還原出來了袭蝗。
原型是這樣的绊诲。
最終的實現(xiàn)效果是這樣的
當(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),右半邊的同理牙躺。
//基本用法
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脓恕。