iOS – 图片完毕多层折叠功能葡京网上娱乐场


在网上能找到挺多图片折叠功能的教程,但半数以上是一层折叠,在他们的学科的根基上,我试着完毕了须臾间多层折叠的法力。操作如下~

看病难,看大家更难,看京城专家难上加难。2月26日,网医联盟PC端上线试运营开启了纯线上诊断情势,有望让这场景成为历史。

效果


foldImage.gif

网医联盟,是一家可以看病的网站。网站与Hong Kong医生协会深度开展合营,将新加坡各大医院的学者和名医请上互联网,实名入驻,并经新加坡医生协会证实,成为网医联盟的网医(互联网医务人员),他们使用碎片化的日子,给全国各地的疑难杂症病者就医。同时,网站以云HIS为技术襄助,将价值观医师工作站变成了医师移动工作站,医务人员透过网络随时四处都足以为患儿提供医疗服务。伤者在线注册、缴费,通过互联网视频系统与先生面对面看病,医师在线开具电子处方,病人在线付款、取药,高效便民。伤者借使有手机,只要能上网,无论身在何处,都足以经过网络看京城名医,再也不用舟车费力。

Demo


Demo地址:https://github.com/Resory/RYMutipleFoldImageView
万一官人爱不释手的话不妨给个少于吧。

网医联盟首期开放五大事情模块

逻辑


  • 在做图片折叠作用的时候,咱们得以领会为把图片分成几有的,然后分别对各部分做动效来落到实处折叠作用。

  • 基于动态图,可以看到那是一张大图”分成”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方法的变换得到实在地三维空间移动的离开。

——网上门诊(e挂号)。网医24钟头排班,挂牌出诊。伤者根据就医要求自主接纳医务人员,网上支付挂号费。伤者候诊期间周密健康档案,将检查、检验、病历、病情自述等上传到网站,网医可以提前预诊,升高就诊功能。候诊期间有短信提示。网医按时出诊,病人按时就诊。针对复诊的情景或必要伤者补充检查的,网医可视景况予以伤者免费挂号权或先行挂号权。患者诊后可对网医评价,医师得以过来。

实现


  • ##### 初始化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

——医务卫生人员团队。分为手术团队和门诊团队。那一个模块最大的特色是为索要手术的患儿服务。每个医务人员团队均详细介绍了主刀(领衔专家)、麻醉师等成员的拿手领域、技术途径等,由主刀或领衔专家出诊。即使患儿要求请先生团队进行手术或看病,则医务助理扶助办理线下入院及手术相关事务。

——网上药房。网医开具的电子处方可无缝推送给药店,患者线上开发药费,药品就近自取或配送到家。伤者购买药品可线上比价、自主选购。电子处方上都有医务卫生人员的电子签名,还有二维码,可随时随进通过扫一扫作用验证处方真伪,确保处方流转进程中不被曲解。主题药库满意患儿格外药物必要。

——药师咨询。那是与巴黎药师协会联手主办的国内率先家药师专业咨询平台。药师24钟头排班,自主定价,实名出诊;患者提前注册,按时就诊。药师咨询过后向患儿出具提出书,并书写药历。特别值得一提的是,网医联盟引入MTM药师,即药物临床管理药师,为服用数十种药物的慢病病人及多疾病伤者提供客观、安全、经济的药物临床优化方案,并跟踪随访。医患直接互换,辅助在线评价,塑造药师品牌。

网医联盟专注于确诊,并从事于发掘在线诊疗全程,将陆续开发检查、检验、手术等功用,为广大e患者就诊提供更为完善的劳务。