3d折叠 ios_ios 折叠注释 - CSDN
  • 在Github看到一个老外写的一个3D折叠效果的侧滑菜单demo,效果很不错,想收藏起来为以后项目开发所用。老外的demo是Swift版的,趁最近比较有时间安静下来学习,于是,我决定把它封装成OC版的。 先看看效果 ...

    在Github看到一个老外写的一个3D折叠效果的侧滑菜单demo,效果很不错,想收藏起来为以后项目开发所用。老外的demo是Swift版的,趁最近比较有时间安静下来学习,于是,我决定把它封装成OC版的。


    先看看效果


    LeftMenuGif.gif

    原理

    1、使用storyboard来创建整个UI框架,能比较直观地看到这个结构其实很简单


    UI框架.png

    2、主要由左侧列表控制器MenuViewController 和右边的内容控制器DetailViewController构成,这两个控制器分别接上一个导航控制器后分别连到ContainerviewController上。

    • 下面是ContainerviewController视图布局,通过scrollView作为容器来操作左右滑动

      主视图.png
    • scrollView记得打开PagingEnabled

    PagingEnabled
    • 其中右边的Container宽度为屏幕的宽度,这样就能通过左右滑动改变scrollViewcontentOffset值来显示或者隐藏左边的菜单

    ContainerviewController.png

    代码(部分关键代码)

    1、ContainerViewController.m

    在storyboard里面拖出scrollview和左边的menuContainerView这个两个属性,在viewDidLayoutSubviews里面设置menuContainerViewanchorPoint

    -(void)viewDidLayoutSubviews
    {
        [super viewDidLayoutSubviews];
    
        self.menuContainView.layer.anchorPoint = CGPointMake(1.0, 0.5);
    
        [self hideOrShowMenu:NO animated:NO]; //初始化为隐藏菜单
    
    }

    控制menuContainerView展开或者隐藏,并且在上面的viewDidLayoutSubviews方法里面初始化为隐藏状态

    - (void)hideOrShowMenu:(BOOL)isShow animated:(BOOL)isAnimated
    {
        CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds);
    
        CGPoint contentOffset = isShow?CGPointZero:CGPointMake(xOffset, 0);
    
        //通过设置contentOffset来隐藏或者显示菜单
        [self.scorllView setContentOffset:contentOffset animated:isAnimated];
    
        _isShow = isShow;
    
    }

    在scrollView的scrollViewDidScroll代理方法里面设置左右滑动的判断以及3D效果

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
    
        CGFloat multiplier = 1.0 / CGRectGetWidth(self.menuContainView.bounds);
    
        CGFloat offset = scrollView.contentOffset.x * multiplier;
    
        CGFloat fraction = 1.0 - offset;
    
        self.menuContainView.layer.transform = [self transformForFraction:fraction];
    
        self.menuContainView.alpha = fraction;
    
    
        HamburgerView *rotatingView = (HamburgerView *)_detailVC.hamburger;
    
        [rotatingView rotateWithFraction:fraction];
    
        scrollView.pagingEnabled = scrollView.contentOffset.x < (scrollView.contentSize.width - CGRectGetWidth(scrollView.frame));
    
        CGFloat menuOffset = CGRectGetWidth(self.menuContainView.bounds);
    
        _isShow = !CGPointEqualToPoint(CGPointMake(menuOffset, 0), scrollView.contentOffset);
    
    }
    - (CATransform3D)transformForFraction:(CGFloat)fraction
    {
    
        CATransform3D identity = CATransform3DIdentity;
    
        identity.m34 = -1.0 / 1000.0;
    
        double angle = (1.0 - fraction) * -M_PI_2;
    
        CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds) * 0.5;
    
        CATransform3D rotateTransform = CATransform3DRotate(identity, angle, 0.0, 1.0, 0.0);
    
        CATransform3D translateTransform = CATransform3DMakeTranslation(xOffset, 0.0, 0.0);
    
        return CATransform3DConcat(rotateTransform, translateTransform);
    
    }
    2、MenuViewController.m

    这是菜单tableview控制器,主要控制菜单每一项的背景图片和颜色以及点击事件

    ///加载plist文件中的数据资源
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        NSString *path = [[NSBundle mainBundle]pathForResource:@"MenuItems" ofType:@"plist"];
    
        _dataArray = [NSArray arrayWithContentsOfFile:path];
    
    }
    ///tableViewCell点击响应,这里用通知的方法来通知detailView控制器
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
        NSDictionary *dict = _dataArray[indexPath.row];
    
        [[NSNotificationCenter defaultCenter]postNotificationName:@"KCallToShowInDetailViewNotification" object:dict];
    }
    3、HamburgerView.m

    展开菜单的点击按钮,这里叫‘汉堡包’,哈。这个view里面需要创建一个imageView视图,还需要一个控制imageView旋转的方法,如下, (这个方法在scrollViewDidScroll中会调用到)

    - (void)rotateWithFraction:(CGFloat)fraction
    {
        CGFloat angle = fraction * M_PI_2;
        _imageView.transform = CGAffineTransformMakeRotation(angle);
    }

    小结

    小结一下:这个侧滑菜单的demo,个人感觉效果还可以,灵活运用scrollview的特性,实现起来也不复杂,以后的项目中可以参照这种UI框架来实现该功能。
    附上项目代码:
    老外的demo:https://github.com/chris-pilcher/3D-Sidebar-Animation
    我的demo:https://github.com/RanYeee/RNLeftSildeMenu

    *请各位大神多多指导!



    文/Rany_IOS(简书作者)
    原文链接:http://www.jianshu.com/p/188b8b40aa15
    著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
    展开全文
  • iOS-图片折叠效果

    2018-03-05 17:40:02
    一.storyboard里面如下图,并且添加了拖动手势二.控制器.m代码如下:// ViewController.m #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *...

    一.storyboard里面如下图,并且添加了拖动手势


    二.控制器.m代码如下:

    //  ViewController.m
    
    #import "ViewController.h"
    
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIImageView *topImageV;
    @property (weak, nonatomic) IBOutlet UIImageView *bottomImageV;
    
    /** <#注释#> */
    @property (nonatomic, weak) CAGradientLayer *gradientL;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        //1.让上部图片只显示上半部分
        self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
        //2.让下部图片只显示下半部分
        self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
        
        self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
        
        self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
        
        //渐变层
        CAGradientLayer *gradientL = [CAGradientLayer layer];
        gradientL.frame = self.bottomImageV.bounds;
        //设置渐变的颜色
        gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
        
        //设置渐变透明
        gradientL.opacity = 0;
    
        self.gradientL = gradientL;
        
        [self.bottomImageV.layer addSublayer:gradientL];
           
    }
    
    //渐变层
    - (void)gradientLayer {
        
        CAGradientLayer *gradientL = [CAGradientLayer layer];
        gradientL.frame = self.bottomImageV.bounds;
        //设置渐变的颜色
        gradientL.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor];
        //设置渐变的方向
        gradientL.startPoint = CGPointMake(0, 0);
        gradientL.endPoint = CGPointMake(1, 0);
        
        //设置一个渐变到另一个渐变的起始位置
        gradientL.locations = @[@0.2,@0.6];
    }
    
    - (IBAction)pan:(UIPanGestureRecognizer *)pan {
        
        
        //获取移动的偏移量
        CGPoint transP = [pan translationInView:pan.view];
        //让上部图片开始旋转
        CGFloat angle = transP.y * M_PI / 200;
        
        //近大远小
        CATransform3D transform = CATransform3DIdentity;
        //眼睛离屏幕的距离
        transform.m34 = -1 / 300.0;
        
        self.gradientL.opacity = transP.y * 1 / 200.0;
        
        
        //self.topImageV.layer.transform  = CATransform3DMakeRotation(-angle, 1, 0, 0);
        self.topImageV.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0 );
        
        
        if (pan.state == UIGestureRecognizerStateEnded) {
            
            self.gradientL.opacity = NO;
            //上部的图片复位
            //usingSpringWithDamping:弹性系数.越小弹性越大
            [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options: UIViewAnimationOptionCurveLinear  animations:^{
                
                self.topImageV.layer.transform = CATransform3DIdentity;
                
            } completion:nil];
        }
        
        
        
    }
    
    @end
    

    效果图如下:滑动鼠标的时候,图片有折叠效果



    笔记:

    1.分析界 效果
    当 标在图 上拖动的时候,图 有 个折叠的效果.这种折叠效果其实就是图 的上半部分绕着X轴做 个旋转的操作.我们图 的旋转都是绕着锚点进 旋转的.所以如果是 张图 的,办不到只上图 的上半部分进 个旋转.
    其实是两张图,把两张图 合成 张图 的 法,实现 案.弄上下两张图,上上部图 只显 上半部分,下部图 只显 下半部分.

    2.如果让 张图 只显 上半部分或者下半部分?CALayer的 个属性contentsRect = CGRectMake(0, 0, 1, 0.5);contentsRect就是要显 的范围.它是取值范围是(0~1);想让上部图 只显 上半部分contentsRect设置CGRectMake(0, 0, 1, 0.5);让下部图 只显 下半部分contentsRect设置为CGRectMake(0, 0.5, 1, 0.5)

    3.让上部图 绕着锚点进 旋转,但是图 的默认锚点在中 ,所以要把上部图 的锚点设在最底部.
    修改上部分的锚点为anchorPoint = CGPointMake(0.5, 1)
    但是修过锚点之后,会出现 个问题,就是上部分的图,会往上.导致两个图 中间有 个空隙.解决办法为.把两张图 放到 起.设置上部分图 的锚点后.上部分图 会上 半的距离.然后再设置下部图 的锚点.设置上图 的最上 设置下部图 锚点值为anchorPoint =CGPointMake(0.5, 0);

    这样就能够办到两张图 合成 张的效果.

    4.给上部图 添加 势.根据 指向下拖动的距离.来计算旋转的 度.拖动的时候,发现它的拖动范围为整个图.所以添加 势的时候,不能只添加上部分或着下部分.
    可以弄 个跟View相同 的的View,把 势添加给这个UIView.
    添加完 势时,在 势 法当中去旋转上部分图.要來计算旋转的 度,上半部分旋转的 度是根据 指向上拖动的Y值来决定.当 指到最下部时正好旋转180.
    假设 指移动到最下部为200.那旋转 度应该为 angel = transP.Y * M_PI / 200.0;

    5.拖动的时候让它有 个 体产效果 体的效果就是有 种近 远 的感觉.想要设置 体效果.要修改它的TransForm当中的 个M34,设置 式为弄 个空的TransFrom3D

    CATransform3D transform = CATransform3DIdentity;200.0可以理解为, 的眼睛离 机屏幕的垂直距离,近 远 效果越明显transform.m34 = - 1 / 200.0;
    transform = CATransform3DRotate(transform, angle, 1, 0, 0);
    相对上 次改了m34的形变,再去旋转

    6.给下部分图 添加阴影的效果.阴影是有渐变的效果.是从透明到 的 个渐变.我们可以通过CAGradientLayer这个层来创建渐变.这个层我们就称它是 个渐变层.

    渐变层也是需要添加到 个层上 才能够显.

    渐变层 有 个colors属性.这个属性就是设置要渐变的颜.它是 个数组.数组当中要求我们传 都是CGColorRef类型,所以我们要把颜 转成CGColor.但是转成CGColor,数组就认识它是 个对象了,就要通过在前 加上 个(id)来告诉编译器是 个对象.

    可以设置渐变的 向:通过startPointendPoint这两个属性来设置渐变的 向.它的取值范围也是(0~1)

    默认 向为上下渐变为:gradientL.startPoint = CGPointMake(0, 0);gradientL.endPoint = CGPointMake(0, 1);设置左右渐变
    gradientL.startPoint = CGPointMake(0, 0);gradientL.endPoint = CGPointMake(1, 0);

    可以设置渐变从 个颜 到下 个颜 的位置设置属性为locations = @[@0.3,@0.7]

    渐变层同时还有 个opacity属性.这个属性是调协渐变层的不透明度.它的取值范围同样也是0-1,
    当为0时代表透明,当为1,代码不透明.

    所以我们可以给下部分图 添加 个渐变层,渐变层的颜 为从透明到 .gradientL.colors =
    @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

    开始时没有渐变,所以可以把渐变层设为透明状态.之后随着 指向下拖动的时,渐变层的透明度跟着改变.

    当 指拖到最下 的时候,渐变层的透明度正好为1.所以要中间可以有 个 例.CGFloat opacity = 1 * transP.y / 200.0;
    在 指拖动的时候,设置它的不透度

    7.在 指拖动过程当中,松开 指时,有 个动画返弹回去的效果.所以我们要坚听 指的状态.当 势状态为结束时把渐变层的透明度设为透明把上部图 的旋转设为0,也就是清空之前的形变.

    同时加上 个返弹动画的效果.返弹动画添加 法为

    Duration:动画的执 时
    delay:动画延时时.Damping:动画的弹性系数,,弹簧效果越明显initialSpringVelocity:弹簧初始化速度

    [UIView animateWithDuration:0.8 delay:0 usingSpringWithDamping:0.1initialSpringVelocity:0

    options:UIViewAnimationOptionCurveLinearanimations:^{

    动画执 代码

    } completion:^(BOOL finished) {动画完成时调.
    }]; 




    展开全文
  • iOS 3D卡片式轮播

    2018-07-24 14:37:26
    效果: 参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现;支持五险轮播,可以加载本地图片,也可以加载网络图片,可以根据自己的需求自定义 UITableViewDelegate ...

    效果:
    这里写图片描述

    参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现;支持五险轮播,可以加载本地图片,也可以加载网络图片,可以根据自己的需求自定义
    Demo地址

    UITableViewDelegate

    /**
     *  当前显示cell的Size(中间页显示大小)
     *
     *  @param flowView <#flowView description#>
     *
     *  @return <#return value description#>
     */
    - (CGSize)sizeForPageInFlowView:(HQFlowView *)flowView;
    
    /**
     *  滚动到了某一列
     *
     *  @param pageNumber <#pageNumber description#>
     *  @param flowView   <#flowView description#>
     */
    - (void)didScrollToPage:(NSInteger)pageNumber inFlowView:(HQFlowView *)flowView;
    
    /**
     *  点击了第几个cell
     *
     *  @param subView 点击的控件
     *  @param subIndex    点击控件的index
     *
     *  @return <#return value description#>
     */
    - (void)didSelectCell:(HQIndexBannerSubview *)subView withSubViewIndex:(NSInteger)subIndex;

    UITableViewDataSource

    /**
     *  返回显示View的个数
     *
     *  @param flowView <#flowView description#>
     *
     *  @return <#return value description#>
     */
    - (NSInteger)numberOfPagesInFlowView:(HQFlowView *)flowView;
    
    /**
     *  给某一列设置属性
     *
     *  @param flowView <#flowView description#>
     *  @param index    <#index description#>
     *
     *  @return <#return value description#>
     */
    - (HQIndexBannerSubview *)flowView:(HQFlowView *)flowView cellForPageAtIndex:(NSInteger)index;
    展开全文
  • iOS - 图片实现多层折叠效果 2016-01-04 10:27 编辑: suiling 分类:iOS开发 来源:Resory 投稿 6 5963 图片多层折叠折叠效果 招聘信息: 手机视频剪辑字幕配音工具iOS类app点读笔...

    iOS - 图片实现多层折叠效果

    2016-01-04 10:27 编辑: suiling 分类:iOS开发 来源:Resory 投稿
    6 5963

    本文是投稿文章,作者:Resory



    在网上能找到挺多图片折叠效果的教程,但大多数是一层折叠,在他们的教程的基础上,我试着实现了一下多层折叠的效果。操作如下~

    效果

    010.gif

    Demo

    Demo地址:https://github.com/Resory/RYMutipleFoldImageView

    如果官人喜欢的话不妨给个星星吧。

    逻辑

    • 在做图片折叠效果的时候,我们可以理解为把图片分成几部分,然后分别对各部分做动效来实现折叠效果。

    • 根据动态图,可以看到这是一张大图"分成"4个小imageView。从上至下,我们分别命名为one,two,three,four

    • 对one,two,three,four这四个小imageView进行旋转+移动。旋转的时候,关键是看各个imageView的anchorPoint是多少.而我们这里,可看p1图中的红点。

       1.a1代表one的anchorPoint为(0.5,0.0)

       2.a2代表two的anchorPoint为(0.5,1.0)

       3.a3代表three的anchorPoint为(0.5,0.0)

       4.a4代表four的anchorPoint为(0.5,1.0)

    002.jpg

    • 旋转:我们这里的imageView都是旋转45°或者是-45°,这个用CATransform3DRotate即可完成。

    • 移动(关键):

       1.旋转后,各个imageView都会变形并且都一样大小,只有位置不一样,我们要根据这个旋转后的imageView高度来进行移动。

       2.比如two要和one对接。根据动态图,one只有旋转,没有移动。而two则旋转和移动了。那么移动了多少呢。在没有折叠前,所有的imageView高度都是50px。也就是one和two总共加起来是100px。而折叠后。one和two都变小了。就是因为他们两个都变小了。所以中间就出现了缝隙,这个缝隙就是我们要移动的距离。而我们知道在二维空间中,总长度是100px,one,two的高度在旋转后是可以算出来的,也就是说缝隙的二维空间距离是:100-2*(one.frame.size.height)。,然后再经过CATransform3DMakeAffineTransform方法的转换得到真实地三维空间移动的距离。

    实现

    • 初始化4个小imageView(contentsRect的运用)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    - (void)configFourFoldImage
    {
        UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 300, IMAGE_PER_HEIGIT*4)];
        [self.view addSubview:bgView];
         
        // 把kiluya这张图,分成平均分成4个部分的imageview
        _one = [[UIImageView alloc] init];
        _one.image = [UIImage imageNamed:@"Kiluya.jpg"];
        _one.layer.contentsRect = CGRectMake(0, 0, 1, 0.25);
        _one.layer.anchorPoint = CGPointMake(0.5, 0.0);
        _one.frame = CGRectMake(0, 0, 300, IMAGE_PER_HEIGIT);
         
        _two = [[UIImageView alloc] init];
        _two.image = [UIImage imageNamed:@"Kiluya.jpg"];
        _two.layer.contentsRect = CGRectMake(0, 0.25, 1, 0.25);
        _two.layer.anchorPoint = CGPointMake(0.5, 1.0);
        _two.frame = CGRectMake(0, IMAGE_PER_HEIGIT, 300, IMAGE_PER_HEIGIT);
         
        _three = [[UIImageView alloc] init];
        _three.image = [UIImage imageNamed:@"Kiluya.jpg"];
        _three.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.25);
        _three.layer.anchorPoint = CGPointMake(0.5, 0.0);
        _three.frame = CGRectMake(0, IMAGE_PER_HEIGIT*2, 300, IMAGE_PER_HEIGIT);
         
        _four = [[UIImageView alloc] init];
        _four.image = [UIImage imageNamed:@"Kiluya.jpg"];
        _four.layer.contentsRect = CGRectMake(0, 0.75, 1, 0.25);
        _four.layer.anchorPoint = CGPointMake(0.5, 1.0);
        _four.frame = CGRectMake(0, IMAGE_PER_HEIGIT*3, 300, IMAGE_PER_HEIGIT);
         
        [bgView addSubview:_one];
        [bgView addSubview:_two];
        [bgView addSubview:_three];
        [bgView addSubview:_four];
         
        // 给第一张和第三张添加阴影
        _oneShadowView = [[UIView alloc] initWithFrame:_one.bounds];
        _oneShadowView.backgroundColor = [UIColor blackColor];
        _oneShadowView.alpha = 0.0;
         
        _threeShadowView = [[UIView alloc] initWithFrame:_three.bounds];
        _threeShadowView.backgroundColor = [UIColor blackColor];
         
        _threeShadowView.alpha = 0.0;
        [_one addSubview:_oneShadowView];
        [_three addSubview:_threeShadowView];
    }

    生成折叠动效需要的CATransform3D

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    - (CATransform3D)config3DTransformWithRotateAngle:(double)angle andPositionY:(double)y
    {
        CATransform3D transform = CATransform3DIdentity;
        // 立体
        transform.m34 = -1/1000.0;
        // 旋转
        CATransform3D rotateTransform = CATransform3DRotate(transform, M_PI*angle/180, 1, 0, 0);
        // 移动(这里的y坐标是平面移动的的距离,我们要把他转换成3D移动的距离.这是关键,没有它,图片就没办法很好地对接。)
        CATransform3D moveTransform = CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(0, y));
        // 合并
        CATransform3D concatTransform = CATransform3DConcat(rotateTransform, moveTransform);
        return concatTransform;
    }
    • 折叠

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    // 动效是否执行中
    static bool isFolding = NO;
     
    - (IBAction)fold:(id)sender
    {
        if(!isFolding)
        {
            isFolding = YES;
             
            [UIView animateWithDuration:1.0
                                  delay:0
                 usingSpringWithDamping:1.0
                  initialSpringVelocity:0
                                options:UIViewAnimationOptionCurveLinear
                             animations:^{
                              
                // 阴影显示
                _oneShadowView.alpha = 0.2;
                _threeShadowView.alpha = 0.2;
                 
                // 折叠
                _one.layer.transform = [self config3DTransformWithRotateAngle:-45.0
                                                                 andPositionY:0];
                _two.layer.transform = [self config3DTransformWithRotateAngle:45.0
                                                                 andPositionY:-100+2*_one.frame.size.height];
                _three.layer.transform = [self config3DTransformWithRotateAngle:-45.0
                                                                   andPositionY:-100+2*_one.frame.size.height];
                _four.layer.transform = [self config3DTransformWithRotateAngle:45.0
                                                                  andPositionY:-200+4*_one.frame.size.height];
            } completion:^(BOOL finished) {
                if(finished)
                {
                    isFolding = NO;
                }
            }];
        }
    }
    • 恢复

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    - (IBAction)reset:(id)sender
    {
        isFolding = NO;
        [UIView animateWithDuration:1.0
                              delay:0
             usingSpringWithDamping:1.0
              initialSpringVelocity:0
                            options:UIViewAnimationOptionCurveLinear
                         animations:^{
                          
            // 阴影隐藏
            _oneShadowView.alpha = 0.0;
            _threeShadowView.alpha = 0.0;
             
            // 图片恢复原样
            _one.layer.transform = CATransform3DIdentity;
            _two.layer.transform = CATransform3DIdentity;
            _three.layer.transform = CATransform3DIdentity;
            _four.layer.transform = CATransform3DIdentity;
             
        } completion:^(BOOL finished) {
         
        }];
    }

    这里关键是缝隙的计算,这个想明白了。其他就没什么了。

    展开全文
  • ios pop 折叠动画

    2015-06-03 09:18:18
    今天写了个挺有意思得动画,大家可以去githoub上下载。这个动画效果也是一位前辈写的,我参考了它,并有注释,希望大家都能看的懂。各种动画,的确是有些难懂刚开始,我也才刚摸索中。希望能够多多交流。...

    今天写了个挺有意思得动画,大家可以去githoub上下载。这个动画效果也是一位前辈写的,我参考了它,并有注释,希望大家都能看的懂。各种动画,的确是有些难懂刚开始,我也才刚摸索中。希望能够多多交流。[   githoub链接 https://github.com/wang820203420/poptop]已经更新,非常抱歉昨天上传失误,现在已经好了。对了运行起来点击里面红色btn就能到乔布斯页面。谢谢大家。



    展开全文
  • 记录真实世界对象的空间特征,然后使用结果在用户环境中查找这些对象并触发AR内容。...在iOS 12中,您可以通过在ARKit中启用对象检测来创建此类AR体验:您的应用程序提供参考对象,它可以对已知真实世界...
  • iOS 图片折叠效果

    2017-08-31 17:12:51
    效果图: 结构布局:拖两个UIImageView到控制器,设置相同的frame和图片,再拖一个大的UIImageView盖在上面,注意把大的imageView.userInteractionEnabled = YES;...// 图片折叠 // // Created by llkj on 2017/8/31
  • 十二 iOS折叠图片

    2017-11-10 18:01:50
    这次开始,做一些好玩的效果看一下折叠图片的效果 制作思路1.如何制作图片折叠效果?把上面的狗子图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。2.如何把一张图片分成两部分显示。 搞两个控件...
  • 首先需要准备素材,一张图片,如下: 然后就是打开xcode创建项目,连线: ...// 图片折叠 // // Created by apple on 16/7/28. // Copyright © 2016年 XinHuoYuan. All rights reserved. //#import "ViewController.
  • iOS学习笔记-082图片折叠 图片折叠 一分析与说明 1 分析界 效果 2 如果让 张图 只显 上半部分或者下半部分 3 让上部图 绕着锚点进 旋转但是图 的默认锚点在中 所以要把上部图 的锚点设在 最底部 4 添加一个添加手势...
  • IOS 图片折叠效果实现

    2015-07-23 18:05:45
    当手指在图片中上下滑动的时候,图片的上半部分会有折叠效果。类似地可以扩展到其他需要折叠的场景中。 layer.contentsRect 用来截取layer的部分内容重新在frame中渲染。 代码及关键注释如下: ...
  • OurChoice这款应用带给了大家革命性的交互体验,app store地址:https://itunes.apple.com/cn/app/al-gore-our-choice-plan-to/id432753658?mt=8 本文将对OurChoice中的折叠特效实现进行说明。
  • UrhoSharp将3D引入各种平台,并使用其自己的二进制mdl格式的模型文件。 3D模型有很多来源,包括cgtrader和TurboSquid,以及FBX,OBJ,DAE和BLEND等格式。 Urho3D提供了AssetImporter和Urho3D Blender加载项等工具,...
  • 作为全球知名VR全景相机品牌,Insta360宣布推出折叠式全景裸眼3D相机EVO。该产品采用前沿折叠式机身设计,兼具3D与360°全景两种拍摄模式,支持5.7K@30 ...
  • 点击上方“iOS开发”,选择“置顶公众号”关键时刻,第一时间送达!写在开头首先,膜拜一下这位大神,Ramotion(https://github.com/Ramotion...
  • iOS翻页动画设计

    2017-03-10 22:55:01
    最近在研究VCTransitionsLibrary,这是一个非常优秀的viewController切换库,使用它可以将传统UInavigationController仅有的pop、push切换动画扩展到翻页、折叠、旋转等等效果。可以直接拿来使用在项目中实现想要的...
  • 1. 实现效果: 项目中需要添加一个效果,弹出弹框时,底部控制器向内凹陷,类似淘宝加入购物车动画效果,如下图: ...这里有2种实现方法,一种是通过自己代码,另一种通过第三方框架 ...2.1.1 此处只写明关键步骤的...
  • DOM元素纸张折叠特效。oriDomi能够将HTML DOM元素转换为纸张状态,你可以用鼠标来任意折叠它们。oriDomi可以折叠的不仅是静态图片,也可以是动态图片、div和h1等元素。 oriDomi的特点有: oriDomi没有任何外部...
  • 最近有一个需求要高仿IOS上的一个列表效果,比如当前有一个分组列表,当用户向上滚动,需要Group title保持在页面上方,粘贴住,不消失,当下一组滚动上来时,上一个title滚动到上方,下一个title粘贴在这个位置。...
1 2 3 4 5 ... 20
收藏数 2,229
精华内容 891
关键字:

3d折叠 ios