UIScrollView视觉差动画

前言:看到凤凰新闻 头条栏目的编辑推荐新闻是这个效果,觉得不错,就想着实现一下,以下就是我的实现过程,示例代码请看这儿→UIScrollView视觉差动画

总效果

一、首先实现一个基本的图集浏览功能,如下图

该功能太基础,直接先贴一个UIScrollView,然后几个UIImageView啪啪啪往UIScrollView上面一扔.......Over,不在此啰嗦咯。

普通的浏览效果.gif

二、分析动画效果,提出解决方案

注意:这里的left和right是区分拖动中可见的两个视图。

  • 1 . 分析效果

由总效果图和第一步的普通的浏览效果图对比可以看出,在拖拽过程中,第一步中的普通效果图是图片之间首尾相连,当前(left)的图片尾部连接下一个(right)的图片首部;而目标总效果图中的是图片之间首首相连,尾尾相连,且滑动过程中,当前可见的图片有渐进的裁剪效果;前者就像是平铺在一起的一行书,一块儿左右平移,而后者就像是翻书时看到的效果,当前页left内容由边到内逐渐消失,而下一页right内容由边缘到里逐渐显示。

  • 2 . 解决思路

通过效果分析对比可知,我们需要在第一步的基础上把每一个图片视图ImageView包装在WSLAnimationView里,让WSLAnimationView去处理ImageView的动画效果,那问题来了,我们怎么处理呢?

我们可以在拖拽过程中相对应的改变right/left图片在父视图WSLAnimationView上的X坐标,把right图片的坐标位置放到相对left图片的正下/偏右方位置,然后随着拖拽滑动逐渐改变right以及left图片的相对位置X坐标,直至复位,回到它们在WSLAnimationView上的初始位置X=0,超出父视图的部分裁剪掉,也是设置WSLAnimationView对象的clipsToBounds = YES。

思路示意图.png

三、代码实现

  • 1 . 首先创建一个承载UIImageView的容器WSLAnimationView,用于渐进动画裁剪效果。
@interface WSLAnimationView ()
@property (nonatomic, strong) UIImageView * imageView;
/**
 imageView的横坐标 用于拖拽过程中的动画
 */
@property (nonatomic, assign) CGFloat contentX;
@end

@implementation WSLAnimationView

- (instancetype)initWithFrame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]) {
        self.clipsToBounds = YES;
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        [self addSubview:_imageView];
    }
    return self;
}
- (void)setContentX:(CGFloat)contentX{
    _contentX = contentX;
    _imageView.frame = CGRectMake(contentX, 0, self.frame.size.width, self.frame.size.height); 
}
  • 2 . 在拖拽滑动过程中进行动画处理
#define SCREEN\_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN\_HEIGHT ([UIScreen mainScreen].bounds.size.height)
#define SCROLLVIEW\_WIDTH SCREEN\_WIDTH
#define BaseTag 10
/\*\*
 动画偏移量 是指rightView相对于leftView的偏移量
 \*/
#define AnimationOffset 100
- (void)scrollViewDidScroll:(UIScrollView \*)scrollView{
    
   CGFloat x = scrollView.contentOffset.x;
   NSInteger leftIndex = x/SCROLLVIEW\_WIDTH;

   //这里的left和right是区分拖动中可见的两个视图
    WSLAnimationView \* leftView = [scrollView viewWithTag:(leftIndex + BaseTag)];
    WSLAnimationView \* rightView = [scrollView viewWithTag:(leftIndex + 1 + BaseTag)];

    leftView.contentX = ((SCROLLVIEW\_WIDTH - AnimationOffset) + (x - ((leftIndex + 1) \* SCROLLVIEW\_WIDTH))/SCROLLVIEW\_WIDTH \* (SCROLLVIEW\_WIDTH - AnimationOffset));
    rightView.contentX = -(SCROLLVIEW\_WIDTH - AnimationOffset) + (x - (leftIndex \* SCROLLVIEW\_WIDTH))/SCROLLVIEW\_WIDTH \* (SCROLLVIEW\_WIDTH - AnimationOffset);
}
  • 3 . 代码处理逻辑说明动画偏移量AnimationOffset = 0 时 即right图片的坐标位置放到相对left图片的正下方位置,此时的效果如下图所示;当AnimationOffset > 0 时就会出现目标总效果图了。
AnimationOffset = 0时的效果图

刚向左拖拽时的leftView和rightView视图结构示意图如下所示,

那么拖拽中,逐渐移动复位rightView上的RightImage的X坐标:rightView.contentX = 需要移动距离长度 - 移动百分比 * 需要移动距离长度 ; leftView.contentX 和这个类似,交由小伙伴们去思考。

需要移动距离长度 =  SCROLLVIEW_WIDTH - AnimationOffset;
移动百分比 = 拖拽距离 /  一页宽度即屏幕宽度
拖拽距离 =   (偏移量X - leftView横坐标);
偏移量X = scrollView.contentOffset.x;
leftIndex = 偏移量X/SCROLLVIEW_WIDTH;
leftView横坐标 = leftIndex * SCROLLVIEW_WIDTH;
刚向左拖拽时的结构示意图

以上就是我实现这个效果的过程,示例代码请看这儿UIScrollView视觉差动画;如果小伙伴们有其他的实现方法,欢迎再此留言交流😊😊😀😀🤗🤗

赞个.gif

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 BOM(四)client系列

这时候,如果鼠标不动,只滚动滑轮的话,会发现图片会距离鼠标原点越来越远。为什么呢?

1042
来自专栏何俊林

通过GPUImage实现40+种滤镜与实时美颜功能

推荐一个滤镜和美颜功能实现项目,包含40+种滤镜与实时美颜与后处理美颜功能,非常强大。 相机预览模式 示例见:com.seu.magiccamera.activ...

4808
来自专栏Python疯子

Python 简单实现标签词云

基于Python的词云生成类库,很好用,而且功能强大.博主个人比较推荐 github:https://github.com/amueller/word_clo...

5381
来自专栏程序员宝库

如何用 vue 制作一个探探滑动组件

前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组...

80113
来自专栏电光石火

HTML条件注释判断浏览器及检验

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> ...

4219
来自专栏非著名程序员

基础篇章:关于 React Native 之 Slider 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 来,讲这个组件之前,我们先学习一下英文单词,...

3038
来自专栏macOS 开发学习

cocos2d-objc 3.0+ 游戏开发学习手册(二): CCNode 了解

在cocos2d中,CCNode是最基本的显示对象. 在3.0后的新版本中CCNode继承自CCResponder类,可以响应用户的交互事件(点击,触摸等),也...

842
来自专栏DannyHoo的专栏

Masonry的使用之利用子视图撑起父视图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1732
来自专栏技术总结

类似3D效果_CGAffineTransformScale

2427
来自专栏Charlie's Road

UIKit Dynamics:抛出视图 —《Graphics & Animation系列三》

翻译自raywenderlich网站iOS教程Graphics & Animation系列

1232

扫码关注云+社区

领取腾讯云代金券