iOS - 图片实现多层折叠效果
来源:互联网 发布:文怡 淘宝 编辑:程序博客网 时间:2024/04/29 21:28
iOS - 图片实现多层折叠效果
本文是投稿文章,作者:Resory
序
在网上能找到挺多图片折叠效果的教程,但大多数是一层折叠,在他们的教程的基础上,我试着实现了一下多层折叠的效果。操作如下~
效果
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)
旋转:我们这里的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的运用)
- (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) {
}];
}
末
这里关键是缝隙的计算,这个想明白了。其他就没什么了。
- iOS - 图片实现多层折叠效果
- iOS - 图片实现多层折叠效果
- IOS 图片折叠效果实现
- iOS 图片折叠效果
- 图片折叠效果CSS实现
- Android学习 图片折叠效果的实现
- iOS如何实现表格的折叠效果?
- iOS如何实现表格的折叠效果?
- iOS 列表折叠效果
- jQuery实现图片3D折叠,翻页,翻书效果
- 【POP动画引擎教程 01】实现图片折叠效果
- jQuery实现折叠效果
- 折叠效果实现
- IOS实现图片倒影效果
- ios实现图片动画效果
- IOS实现图片倒影效果
- 实现折叠的uitableviewcell效果
- jQuery 实现折叠面板效果
- Java时间工具类
- 空间域图像几种基本变化
- eclipse 出现Error:could not create the java machine.Error: A fatal exception has occurred. program will exit.解决方案
- Matcher中appendReplacement()方法与replaceAll()方法的联系
- JavaWeb入门(一) 基础篇
- iOS - 图片实现多层折叠效果
- 卷积的理解
- CUDA atomic原子操作
- 操作系统面试知识点总结
- html相关的扩展阅读--持续更新中。。。
- android:windowSoftInputMode
- Android触摸事件的分发(传递)机制(图文)
- [POJ2891] Strange Way to Express Integers
- org/i0itec/zkclient/exception/zknonodeexception zookeeper dubbo