20几乎春究竟感觉很模糊?那是为您莫找到好之天生!

打发表了《按照自己之意思过一生》这首文章后,就生出读者以后台留言给自家说:


每当网上能找到非常多图折叠功能的学科,但大多数是一致叠折叠,在她们之科目的基础及,我试着实现了一下几近交汇折叠的成效。操作如下~

1、20几乎年份,出来社会行事几乎年了,也未晓得好真爱护做啊工作,想要跳槽转行也无清楚好想使啊工作,怎么消除?

2、失恋了一段时间,每天发虚度光阴,想振作起来做一番事业,不知情打乌下手?

3、马上要毕业了,室友说如错过考研,我以想以及它共温习考研,但自我而想快点接触社会,有接触迷茫!

效果


foldImage.gif

历次看到这种题材,我哪怕回忆我今年5月份率先软加入打卡群的时节,群主审核面试问我一个题目:至今为止,哪本书对君影响最为酷?原因是什么?

Demo


Demo地址:https://github.com/Resory/RYMutipleFoldImageView
如若公共人爱的语句不妨让个少于吧。

本身心里自发生答案。2014年自己先是涂鸦见到李欣频先生的《十四堂人生创意课》,就便于上了有文采的来聪明的欣频老师。这本书都让我再三看了很多差。但自我每一样次打开阅读都产生新的灵感和得到。李欣频先生教的不但是广告创意的学问,她叫的是如何被天赋,自我挽救、自我启发、自我成长、最后做到自己人生之知。

逻辑


  • 当做图片折叠功能的下,我们可解也将图纸分成几片段,然后分别指向各组成部分做动效来兑现折功能。

  • 据悉动态图,可以见到就是平等摆放大图”分成”4个小imageView。从达到到下,我们分别命名吧one,two,three,four

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

    • a1代表one的anchorPoint为(0.5,0.0)
    • a2代表two的anchorPoint为(0.5,1.0)
    • a3代表three的anchorPoint为(0.5,0.0)
    • a4代表four的anchorPoint为(0.5,1.0)

p1.png

  • 旋转:
    • 咱俩这里的imageView都是转45°或者是-45°,这个用CATransform3DRotate即可形成。
  • 移动(关键):
  • 盘后,各个imageView都见面变形而还同一大小,只有职不一致,我们只要根据这个旋转后的imageView高度来展开运动。
  • 比如two要和one联网。根据动态图,one单独发生旋转,没有挪动。而two尽管如此旋转和移动了。那么移动了有点呢。在并未折叠前,所有的imageView高度都是50px。也就算是onetwo总计加起来是100px。而折叠后。onetwo还转移多少了。就是因她们少只还换多少了。所以中间就应运而生了缝隙,这个缝隙即使是咱们只要倒的偏离。而我们了解在二维空间受到,总长度是100px,one,two的惊人在转悠后是好算出来的,也就是说缝隙的亚维空间距离是:100-2*(one.frame.size.height)。,然后再通过CATransform3DMakeAffineTransform方法的转换得到真正地三维空间移动的离。

为此,每当有对象说“迷茫”的时刻,我还坚决地推荐他们去念李欣频的《十四堂人生创意课》,绝对不见面磨。

实现


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

- (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

- (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;
}
  • ##### 折叠

// 动效是否执行中
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;
            }
        }];
    }
}
  • ##### 恢复

- (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) {

    }];
}

黄圈圈推荐阅读书目


  • 这里主要是缝隙的盘算,这个想掌握了。其他就是无什么了。

  • 若是你发出问题或发现错误请留言给本人,喜欢就接触单赞吧!3Q

1、什么是原?

暂且给一个死粗糙的概念吧,就是天赏给你的、天然之虽于人家而到家一点点的地方。

生头生特别醒目,一眼就可以看到。比如标致。一个总人口长得好看不尴尬,基本上生下来的良瞬间答案就充分肯定了。但大多数底生都是发生一定之隐藏性的,别人不知情,就连友好呢不一定知道,需要我们后天失去发现掏才知晓之。

虽然多数原生态都藏起来了,但要么生分差的打桩和判断成本的。比如说体育运动方面,我们学一直还起体育课吧,校运会上每一样不行跑步比赛还能够以第一名的,算在马上上面产生天了,这即特别爱看下的。又如,上课做功课对你吧特别不方便,一直达课我虽无自觉的从瞌睡,一打开作业本就未思量在了,这种人就是毫无勉强他的功课。早早寻找到属他的原始,条条大道通罗马啊!

2、找到天到底是同种植怎样的发也?

假使你开那起事,你晤面遗忘时间,你会忘记饥饿,忘记烦恼,你见面投入,你晤面痛快,那尔就是失开!如果您倍感不做那么件工作你见面百爪挠心,会辗转反侧,会老,那您便失去做!

盖那是您的生命能量在报告你,我思念只要自老点爆发,请为自己突发出。你而召开的,就是顺其自然,让你的身能量就那么喜悦地喷发出来就是可以了。那喷发出的灼热岩浆之上,赫赫地刻画在三三两两独字:天赋。

3、如何迅速找到好的先天?

就自己也为此过大小圆圈的法也大家提供一个摸索自己原的计及路。对于未知底自己生是呀、或者想打更多天的对象,完全好对照大小圆圈的情,大概十来分钟便可以试试着找到好的自然。

大圆圈里描写上你主专长(特别厉害的特长),每个微完美里描写上你的契合专长(略懂的世界还是用来怀念做的小圈子)。

比如,我之主专长是描写东西、文字,其他的略周我写及遨游、演讲、主播、跑步……然后我更将“主专长+副专长”组合。

从而大小圆圈画有人生蓝图

不过,大部分口尚无努力到拼天赋的当儿!
不少人口叫苦不迭自己生过得无比平庸,甚至恨父母没有送自己去达到特长班,殊不知被网上的等同句子鸡汤文啪啪打脸了,这句话原话是如此的:“大多数人口尽力的品位还从还不曾到要是拼天赋的时光。”

用,最后要回归至现实生活中来,生难得,但努力要休克少!革命尚未成功,骚年随欲努力啊!

继续加油吧

END


本人是黄圈圈
假若你喜欢自己之稿子,欢迎点赞、转发、打赏!
转载请私信我授权,谢谢!