美文网首页
iOS图片浏览器

iOS图片浏览器

作者: 今晚月色 | 来源:发表于2019-04-19 11:41 被阅读0次
    镇楼专用

    一直想写一个自己的图片浏览器,但是自己能力又不是很够,所以一直拖这,最近趁自己时间充裕,自己研究了一下这方面的知识。感觉有以下几个难点:

    1. 显示和消失的转场动画
    2. 手势拖拽
    3. 图片加载

    加载方式和转场动画

    • 通过Controller加载:需要使用ViewController实现UIViewControllerAnimatedTransitioning实现转场效果
    • 通过View加载:使用UIView动画试下转场效果

    转场动画必要元素

    1. 显示时需要fromViewframe
    2. 消失时需要toViewframe

    显示

    通过修改当前需要显示图片的CollectionViewCellImageViewframe,同时修改当期View的背景颜色透明度

    WDImageCollectionViewCell *cell = (WDImageCollectionViewCell *)[self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForRow:self.tappedIndex inSection:0]];
    CGRect fromFrame                = [self.originView convertRect:self.originView.bounds toView:cell.contentView];
    cell.imageView.frame            = fromFrame;
    [UIView animateWithDuration:0.5 animations:^{
        self.backgroundColor = [[UIColor alloc] initWithWhite:0 alpha:1];
        cell.imageView.frame = cell.contentView.bounds;
    }];
    

    消失

    原理与显示相同

    CGRect toRect = [self.originView convertRect:self.originView.bounds toView:self.window];
    [UIView animateWithDuration:0.5 animations:^{
        cell.imageView.clipsToBounds = YES;
        cell.imageView.frame         = toRect;
        self.backgroundColor         = [[UIColor alloc] initWithWhite:0 alpha:0];
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
    

    拖拽的手势

    将手势添加在CollectionViewCellScrollView上,并遵循UIGestureRecognizerDelegate协议,不然会CollectionView无法进行滚动操作。

    1. 声明一个全局属性
    CGPoint firstTouchPoint;
    
    1. 实现代理
    #pragma mark - UIGestureRecognizer Delegate Method
    - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
        firstTouchPoint = [touch locationInView:self.window];
        return YES;
    }
    
    - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
        CGPoint touchPoint = [gestureRecognizer locationInView:self.window];
        CGFloat dirTop = firstTouchPoint.y - touchPoint.y;
        if (dirTop > -10 && dirTop < 10) {
            return NO;
        }
        CGFloat dirLift = firstTouchPoint.x - touchPoint.x;
        if (dirLift > -10 && dirLift < 10 && self.scrollView.frame.size.height > [[UIScreen mainScreen] bounds].size.height) {
            return NO;
        }
        return YES;
    }
    
    1. 拖动手势操作,同意代理传给View
    • 协议方法
    @class WDImageCollectionViewCell;
    @protocol WDImageCollectionViewCellDelegate <NSObject>
    - (void)collectionViewCell:(WDImageCollectionViewCell *)cell singleTapActionWithImageUrl:(NSString *)imageUrl;
    - (void)collectionViewCell:(WDImageCollectionViewCell *)cell panActionWithPercent:(CGFloat)percent;
    - (void)collectionViewCell:(WDImageCollectionViewCell *)cell dimssViewWithImageUrl:(NSString *)imageUrl;
    @end
    
    • 拖动手势方法
    #pragma mark - UIGestureRecognizer Target Event
    /** 滑动手势 */
    - (void)didRecognizedPanGuesture:(UIPanGestureRecognizer *)pan {
        CGPoint point = [pan translationInView:self.window];
        CGFloat scale = 1.0 - ABS(point.y) / [[UIScreen mainScreen] bounds].size.height;
        switch (pan.state) {
            case UIGestureRecognizerStateBegan: {}
                break;
            case UIGestureRecognizerStateChanged:
            {
                scale = MAX(scale, 0);
                CGFloat s = MAX(scale, 0.5);
                CGAffineTransform translation = CGAffineTransformMakeTranslation(point.x / s, point.y / s);
                CGAffineTransform translationScale = CGAffineTransformMakeScale(s, s);
                self.imageView.transform = CGAffineTransformConcat(translation, translationScale);
                // 传出translationScale,修改背景颜色透明度
                if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewCell:panActionWithPercent:)]) {
                    [self.delegate collectionViewCell:self panActionWithPercent:scale];
                }
            }
                break;
            case  UIGestureRecognizerStateCancelled | UIGestureRecognizerStateFailed:
            {
                self.imageView.transform = CGAffineTransformIdentity;
                // 回复初始样式,传出translationScale,修改背景颜色透明度
                if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewCell:panActionWithPercent:)]) {
                    [self.delegate collectionViewCell:self panActionWithPercent:1];
                }
            }
                break;
            case UIGestureRecognizerStateEnded:
            {
                [UIView animateWithDuration:0.5 animations:^{
                    CGAffineTransform transform1 = CGAffineTransformMakeTranslation(0,0);
                    self.imageView.transform = CGAffineTransformScale(transform1, 1, 1);
                }];
                
                // 回复初始样式,传出translationScale,修改背景颜色透明度
                if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewCell:panActionWithPercent:)]) {
                    [self.delegate collectionViewCell:self panActionWithPercent:scale];
                }
                if (scale < 0.7) {
                    // 拖动结束,让页面消失
                    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewCell:dimssViewWithImageUrl:)]) {
                        [self.delegate collectionViewCell:self dimssViewWithImageUrl:self.imageUrl];
                    }
                } else {
                    // 回复初始样式,传出translationScale,修改背景颜色透明度
                    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewCell:panActionWithPercent:)]) {
                        [self.delegate collectionViewCell:self panActionWithPercent:1];
                    }
                }
            }
                break;
            default:
                break;
        }
    }
    

    图片加载

    使用SDWebImage获取图片,通过FLAnimatedImageView加载gif

    Github地址

    项目地址

    效果图

    相关文章

      网友评论

          本文标题:iOS图片浏览器

          本文链接:https://www.haomeiwen.com/subject/npwfgqtx.html