有些朋友给我发邮件让我写个demo,这给我继续写博客很大的动力。非常感谢。
这次采用不同的实现方案,但在原理上都是一样的,可以查看上一篇文章。
1. ScrollView嵌套滚动
用scrollView作为主框架视图,并使用了第三方框架TYPagerController实现左右滚动视图节省开发时间。具体实现可以参考源码。在此基础上,加了一个轮播图背景图片渐变的效果,这次主要来说说,渐变效果的实现。
2. 轮播图背景渐变
原理: 背景利用两个imageView,分别是currentImgView和nextImgView,同一个位置重叠。根据banner滚动的rate来动态的调整currentImgView的alpha,从而实现两张图片交替显示的效果。
self.currentImgView.alpha = 1-scrollRate;
2.1 计算banner滚动的rate
这里在SDCycleScrollView的基础上做了一个私有库,有需要的话可以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 显示图片原理
这个方法是在轮播图didScroll方法中的回调
- (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. 关于创建私有Pod库
这里可以查看我的另外一篇文章👉 创建私有pod库
4. 总结
最近在对项目做swift的重构,包括一些组件化的开发。之后我会在这个demo的基础上用swift做一些尝试。另外Flutter和一些跨平台的开发,我个人也是很感兴趣。如果你觉得还不错的话,请关注我,大家一起学习进步。
网友评论