有些朋友給我發(fā)郵件讓我寫個(gè)demo击奶，這給我繼續(xù)寫博客很大的動力弱卡。非常感謝。
這次采用不同的實(shí)現(xiàn)方案抛姑，但在原理上都是一樣的耘成，可以查看上一篇文章榔昔。
1. ScrollView嵌套滾動
用scrollView作為主框架視圖驹闰，并使用了第三方框架TYPagerController實(shí)現(xiàn)左右滾動視圖節(jié)省開發(fā)時(shí)間。具體實(shí)現(xiàn)可以參考源碼撒会。在此基礎(chǔ)上疮方，加了一個(gè)輪播圖背景圖片漸變的效果，這次主要來說說茧彤，漸變效果的實(shí)現(xiàn)骡显。
2. 輪播圖背景漸變
原理: 背景利用兩個(gè)imageView，分別是currentImgView和nextImgView曾掂，同一個(gè)位置重疊惫谤。根據(jù)banner滾動的rate來動態(tài)的調(diào)整currentImgView的alpha，從而實(shí)現(xiàn)兩張圖片交替顯示的效果珠洗。
self.currentImgView.alpha = 1-scrollRate;
2.1 計(jì)算banner滾動的rate
這里在SDCycleScrollView的基礎(chǔ)上做了一個(gè)私有庫溜歪，有需要的話可以pod引入。私有庫地址: https://gitee.com/5g/MRPrivatePod 可以在podfile中添加许蓖。
source 'https://github.com/CocoaPods/Specs.git'
source 'https://gitee.com/5g/MRPrivatePod.git'
platform :ios, '10.0'
inhibit_all_warnings!
target 'projectName' do
use_modular_headers!
# Pods for projectName
pod 'MRCycleScrollView'
end
2.2 顯示圖片原理
這個(gè)方法是在輪播圖didScroll方法中的回調(diào)
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollRate:(CGFloat)scrollRate currentIndex:(NSInteger)currentIndex
{
if(self.bannerBgImgArray && currentIndex < self.bannerBgImgArray.count) {
if(self.bannerBgImgArray.count == 1) {
[self.currentImgView sd_setImageWithURL:[NSURL URLWithString:[self.bannerBgImgArray firstObject]]];
self.nextImgView.image = nil;
return;
}
NSURL *currentImgUrl = [NSURL URLWithString:[self.bannerBgImgArray objectAtIndex:currentIndex]];
if(currentIndex == self.bannerBgImgArray.count - 1) {
_lastImgUrl = [self.bannerBgImgArray objectAtIndex:0];
}
else {
_lastImgUrl = [self.bannerBgImgArray objectAtIndex:currentIndex+1];
}
[self.currentImgView sd_setImageWithURL:currentImgUrl];
[self.nextImgView sd_setImageWithURL:[NSURL URLWithString:_lastImgUrl]];
self.currentImgView.alpha = 1-scrollRate;
}
}
3. 關(guān)于創(chuàng)建私有Pod庫
這里可以查看我的另外一篇文章?? 創(chuàng)建私有pod庫
4. 總結(jié)
最近在對項(xiàng)目做swift的重構(gòu)蝴猪，包括一些組件化的開發(fā)。之后我會在這個(gè)demo的基礎(chǔ)上用swift做一些嘗試膊爪。另外Flutter和一些跨平臺的開發(fā)自阱，我個(gè)人也是很感興趣。如果你覺得還不錯(cuò)的話米酬，請關(guān)注我沛豌，大家一起學(xué)習(xí)進(jìn)步。
