一个简单的视觉差效果
2015-12-14 12:34
260 查看
一个简单的视觉差效果
这两天看到一篇写的很不错的文章视错觉的概述,他讲述了如何用一个简单的视觉差来做出一个看似酷炫的效果。对思维的启发还是很大的。我也模仿着做了一遍。如果有不足的地方,请大家指出一下~下载地址:git
效果图:(感觉有点像mm豆。。。)
这个效果是由多层view组合而成的,分解下来层次关系如下图:
在视错觉的概述这篇文章中,其实是要多一层的,即把第二层第三层按顺序
addSubView到同一个view上。因为他有一个抖动的效果,如果不需要抖动的效果,我觉得可以简化掉一层view。
最下面一层,是几个圆形依次添加到
self.view上
第二层view要与最下面一层的某一个圆形保持大小和位置的一致性,然后将它也添加到
self.view上。并且将自身的
clipsToBounds设置为YES,他的意思是如果它的
subView超过它的大小的部分不允许显示。这也是关键的地方–只显示第二层这个圆形的frame部分的subView。
第三层上添加与最下面一层大小和位置相同的几个圆形,我在每个圆形上加上一个
label来显示文字,然后将它添加到第二层上面,作为第二层的
subView,它只会显示与二层重叠的地方。
通过动态的改变第三层与第二层的相对位置就能实现这个效果啦~
ps:最后有一层button我并没有在图中画出来,无非就是点击按钮来改变二、三层的相对位置。
关于相对位置
在一开始,相对位置是这样的。第三层的frame是(0, 0, self.frame.size.width, self.frame.size.height)];
点击第二个按钮后,我们要改变两者的位置关系如下,第三层这时的frame就是
(- self.viewWidth, 0, self.viewHeight, self.viewHeight);,可见
orgin.x改变了,是一个负值,通过这种改变,可以造成一种第二层view在第三层保持不动的情况下左右移动的错觉。
//第二层 第三层 - (void)hierarchyView { CGRect firstFrame = [self createCircleFrame:0]; self.secondView = [[UIView alloc] initWithFrame:firstFrame]; self.secondView.layer.cornerRadius = self.viewHeight / 2; self.secondView.backgroundColor = [UIColor lightGrayColor]; self.secondView.clipsToBounds = YES; //subView超过它的范围的部分不显示 [self addSubview:self.secondView]; //这是初始化后,二、三层的相对位置,后面要进行改变 self.thirdView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; for (int i= 0; i < count; i ++) { CGRect frame = CGRectMake(i * self.viewHeight + i * (self.viewWidth - self.viewHeight), 0, self.viewHeight, self.viewHeight); UIColor *color = self.colorArray[i]; UIView *view = [[UIView alloc] initWithFrame:frame]; view.layer.cornerRadius = self.viewHeight / 2; view.layer.backgroundColor = color.CGColor; UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.viewHeight, self.viewHeight)]; textLabel.backgroundColor = [UIColor clearColor]; textLabel.text = @"mm"; textLabel.textAlignment = NSTextAlignmentCenter; textLabel.textColor = [UIColor whiteColor]; [view addSubview:textLabel]; [self.thirdView addSubview:view]; } [self.secondView addSubview:self.thirdView]; } - (void)tapButton:(UIButton *) sender { CGRect frame = [self createCircleFrame:sender.tag]; CGRect changeFrame = CGRectMake(-sender.tag * self.viewHeight + -sender.tag * (self.viewWidth - self.viewHeight), 0, self.viewHeight, self.viewHeight); [UIView animateWithDuration:2 animations:^{ //改变二、三层的相对位置 self.secondView.frame = frame; self.thirdView.frame = changeFrame; } completion:^(BOOL finished) { }]; }
相关文章推荐
- 关于 Details On launch and content download, your app stores 15.83MB on the user's iCloud被拒问题
- 【LEETCODE】225-Implement Stack using Queues
- stm32F103VB使用uGfx驱动sh1106
- Linux 内核是如何构建的
- Single NumberⅡ
- oracle导出Clob字段的方法
- 上拉刷新 下拉加载更多-PullToRefreshListView的简介
- 解决uc数据互通问题
- npm & nodeJS
- linux下安装运行负载 LoadrGenerator(详细步骤,完美安装)
- 詹和队列--排队买吃的
- 广告公司的套路:“资源整合+主题营销”
- tomcat启动时间修改
- 你可能不知道的,定义,声明,初始化
- transition的唧唧歪歪
- UIAlertViewController+TextField 输入框
- 上delloc 无呼叫 故障排除 笔记
- DEDECMS文章系统另类内链方法
- 让我们来谈谈分工
- 仿QQ界面的切换