一种滚动比较柔和的banner

2017-08-15 11_16_24.gif

在开发时遇到一种效果比一般普通banner滚动起来要柔和的效果,在参考了
YouXianMing的Animations后,发现他的demo里有一个很好的效果,然后把这个效果搬到使用最多的banner控件
SDCycleScrollView里,我的demodevliuhuan/SDCycleScrollView


我提到的2个第三方库或demo使用都是UICollectionView来实现的,要实现这个比较柔和的滚动包含2个要点

  1. 让可见的Cell根据UICollectionView的contentOffset进行变化
    1.1 让collectionView的contentOffset变化通知Cell
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (!self.imagePathsGroup.count) return; // 解决清除timer时偶尔会出现的问题
    if (self.scrollAnimationStyle == SDCycleScrollAnimationStyleLight) {
        __weak typeof(self) weakSelf = self;
        [self.mainView.visibleCells enumerateObjectsUsingBlock:^(__kindof SDCollectionViewCell *obj, NSUInteger idx, BOOL * _Nonnull stop) {
            
            // 用于竖向
            CGPoint point = [obj convertPoint:obj.bounds.origin fromView:weakSelf];
            if ([obj respondsToSelector:@selector(contentOffset:)]) {
                [obj contentOffset:point];
            }
        }];

    }
   
}

1.2 Cell在接受到contentOffset的变化后根据是横向还是竖向滚动进行Cell的操作

- (void)contentOffset:(CGPoint)offset {
    
    if (self.scrollDirection == UICollectionViewScrollDirectionVertical) {
        self.imageView.frame = CGRectMake(self.imageView.frame.origin.x, offset.y * 0.85f, self.imageView.frame.size.width, self.imageView.frame.size.height);
    }else{
        [self resetImageViewCenterPoint];
    }
    
}

- (void)resetImageViewCenterPoint {
    
    
    CGPoint point = [self convertPoint:CGPointZero toView:self.window];
    CGPoint newCenter = self.center;
    newCenter.x       = -0.9 * point.x + 187.5; // ?
    self.imageView.center       = newCenter;
}

2、 在开启自动滚动时,SDCycleScrollViev是用UICollectionView的自带的滚动方法实现的,这个动画比较短,显得也不那么柔和,我此处使用POP的自定义动画,将滚动的过程来自定义滚动

        __weak typeof(self) weakSelf = self;
        POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) {
            // read value
            prop.readBlock = ^(id obj, CGFloat values[]) {
            };
            // write value
            
            prop.writeBlock = ^(id obj, const CGFloat values[]) {
                //NSLog(@"old:%f current:%f,to:%f",offsetX,values[0],offsetX);
                
                weakSelf.mainView.contentOffset = self.flowLayout.scrollDirection == UICollectionViewScrollDirectionHorizontal ? CGPointMake(values[0], 0) : CGPointMake(0,values[0]);
            };
            // dynamics threshold
            prop.threshold = 0.01;
        }];
        
        CGFloat oldOffsetValue = self.flowLayout.scrollDirection == UICollectionViewScrollDirectionHorizontal ? self.mainView.contentOffset.x : self.mainView.contentOffset.y;
        CGFloat newOffsetValue = self.flowLayout.scrollDirection == UICollectionViewScrollDirectionHorizontal ? self.flowLayout.itemSize.width*targetIndex : self.flowLayout.itemSize.height*targetIndex;
        
        POPBasicAnimation *anBasic = [POPBasicAnimation easeInEaseOutAnimation];   //秒表当然必须是线性的时间函数
        anBasic.property = prop;    //自定义属性
        anBasic.fromValue = @(oldOffsetValue);   //从0开始
        anBasic.toValue = @(newOffsetValue);
        anBasic.duration = 1.5;   //持续1.5秒
        anBasic.beginTime = CACurrentMediaTime() + 0.0f;    //延迟1秒开始
        [self.mainView pop_addAnimation:anBasic forKey:@"autoScroll"];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容