首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

视觉效果 -- iOS Core Animation 系列三

在Storyboard中放置两个白色的view,每个view分别有两个子view(一个黄色,一个青色),而且都超出了父视图的边界: ?...图层蒙版 mask 这节的原文章前有一堆铺垫的,我就不说了,想看的点击查看原文 本节主要是介绍CALayer的maskt属性,它可以实现一些比较好玩的裁剪效果。而不是常规的圆形、矩形裁剪。...mask图层的Color属性无关紧要,它真正有用的是图层的轮廓。如下图所示一样,mask属性像是一个切割机,mask图层实心的地方会被保留,其他地方被抛弃。 ?...现在Storyboard里放置两个UIButton。...这显示的效果有点怪。右边的设置了alpha为0.5。但是在UILabel的位置好像不是0.5的效果。这是因为透明度的混合叠加造成的。实际上右侧中间的透明度是0.75。

1.1K30

想要漂亮的蒙版指引吗?跟着我手把手的教你写出来

大体上目前就有这么多,恰巧新用户下载就会弹出注册通知弹出框, 新人大礼包弹出框, 新人蒙版指引弹出框。...当是看了代码写法都很正常,并且类似的写法在 新人蒙版指引的需求上就表现的很正常,为什么在 新人大礼包的需求上面就表现不正常,时而出现时而不出现的。 我感觉这个需求的类代码有毒。..., assign) CGFloat radius; 对于剪头图片的放置,我当时采取的方案是下面的。...272AF3ED-89C5-43D0-A965-290F9B2FC0F9 我们剩下的是放置提示的文本。我们发现放置文本只存在两种情况,也么在剪头图片的上方,要么在剪头图片的下方。...下面是绘制圆形的方法 ?

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS设置圆角及圆形图片

    方方正正的样式往往会显得很生硬,而圆角的样式会让人产生别样的亲切感,现在越来越多地用到圆角,诸如用户头像之类的图片也大都用圆形来显示,本文就介绍如何设置按钮、文本框的圆角以及制作圆形的图片。...先来看看效果图: 如效果图所示,我们制作了一个圆形的头像,一个完全半圆的圆角按钮,一个小圆角的按钮,以及一个带边框且边框为圆角的label。...大概思路如下: View都有一个layer的属性,我们正是通过layer的一些设置来达到圆角的目的,因此诸如UIImageView、UIButton、UILabel等view都可以设置相应的圆角。...对于圆形的头像,要制作正圆,我们需要首先设置UIImageView的高宽的一致的,然后我们设置其圆角角度为高度除以2即可,相当于90度,代码如下: // 圆形头像 UIImageView *avatarImgView...,我们同样设置角度为高度的一般,这样可以在两边形声半圆,而由于宽度与高度不同,所以不是正圆: // 完全半圆圆角的按钮 UIButton *btnOne = [[UIButton alloc] initWithFrame

    1.9K20

    《Motion Design for iOS》(三十六)

    现在让我们添加我们的行。它们也都是UIImageView,所以也只用直接在背景图片上放置就可以了。...每一行都是80px高,所以放置它们每一行的时候我都在Y坐标上加了80。我也可以使用Auto Layout来做,但对这个例子来说就有点过于复杂了。 这里是在添加动画前的样子。...但等一下,我们并不想要在第一次进入的看到这样的界面。这次练习的目的在于让每个元素都动画到它们的位置上,也就是说它们不应该立即出现在它们的最终位置。...持续时间是动画完成需要的时间,而阻尼是iOS 7在UIView动画方法中提供的一个弹簧属性,用来控制弹簧的弹力。...苹果的动画方法有一个你需要设置的持续时间,所以你在以一种并非完全遵循物理法则管理下的弹簧动作。

    52820

    面试题型—iOS离屏渲染探索

    前言 在平时的开发过程中,我们经常会听到离屏渲染这个词,在面试中也会经常被面试官问到,那么在iOS开发中到底什么是离屏渲染?离屏渲染有什么性能问题?离屏渲染是否应该完全禁止呢?...例如将这张图显示到屏幕上可以分为两步: 1、先绘制黄色背景图层,显示到屏幕上后,删除帧缓冲区中黄色图层的数据。...但是如果缓存的图像会经常被更改,则开启离屏缓存区反而会降低性能。...因此对于是否开启 shouldRasterize 有以下建议: 如果缓存的图像在之后用不到或很少用到( 100ms内用不到 ),则不需要开启shouldRasterize 如果缓存的图像会经常发生变动,...也没有效果 四、iOS设置圆角触发离屏渲染原因 我们以UIButton和 UIImageView为例: //1.按钮存在背景图片 UIButton *btn1 = [UIButton buttonWithType

    1.1K60

    基于OpenCV的特定区域提取

    解决这个问题的一种常用方法是形态转换,它涉及在图像上使用一系列的扩张和腐蚀来去除不需要的边缘和闭合间隙。...现在,我们可以使用OpenCV函数“ findContours()”提取该图像中的轮廓,并仅选择具有以下属性的轮廓: 1. 几何形状是圆形或椭圆形 2....通常情况是在一个片段上检测到多个重叠的轮廓,而我们只对一个感兴趣。 使用非极大抑制可以解决此问题,即我们查看所有重叠的轮廓,然后选择面积最大的轮廓作为最终候选轮廓。...m00”]),int(M [“ m01”] / M [“ m00”])) 将线段质心坐标与图像中心坐标进行比较,可以将四个线段分别放置在各自的位置。...在原始图像上应用此蒙版可以在我们选择的背景(例如黑色或白色)上为我们提供所需的分段。

    2.9K30

    《Motion Design for iOS》(三十二)

    默认情况下,当一个UIButton被点击时,iOS会自动暗化图片。 最后,我让按钮可被点击并且会调用我定义的一个方法。...接下来我通过设置frame将按钮放置在准确的位置。 让我们看看现在app的样子,地图的alpha值被设为了0,所以它是不可见的。...好,现在我们将动画的所有主要部件都添加到界面上了,是时候在地图图标被点击时添加一些动画了。 首先,我们需要实现按钮被点击时被调用的方法。这里是不含任何内容的方法看起来的样子。...在这个文件的顶部我添加了一个名为mapShowing的BOOL变量来管理我们是需要打开还是关闭地图视图。这个属性会放置在我们按钮方法的下面,而我们添加的其他属性是我们界面的主视图。...这实际上是两个选项通过二进制 | 操作组合在一起的:UIViewAnimationOptionCurveEaseInOut用来定义动画的淡入淡出,UIViewAnimationOptionBeginFromCurrentState

    46810

    Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

    1、CALayer 1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView 2)、UIView之所以能显示在屏幕上,完全是因为它内部的一个图层...retain) CALayer *layer; 4)、当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了...框架中的[Core Animation];   CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中;   UIColor、UIImage是定义在UIKit框架中的...;   QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在ios和Mac OSX上能使用;   但是UIKit只能在ios中使用;为了保证可移植性,QuartzCore不能使用...的子类,与CABasicAnimation的区别是:   CABasicAnimation只能从一个数值(fromValue) 变到另一个数值(toValue), 而CAKeyframeAnimation

    1.5K30

    总结 | 基于OpenCV提取特定区域方法汇总

    现在,我们可以使用OpenCV函数“ findContours()”提取该图像中的轮廓,并仅选择具有以下属性的轮廓: 1. 几何形状是圆形或椭圆形 2....通常情况是在一个片段上检测到多个重叠的轮廓,而我们只对一个感兴趣。 使用非极大抑制可以解决此问题,即我们查看所有重叠的轮廓,然后选择面积最大的轮廓作为最终候选轮廓。...m00”]),int(M [“ m01”] / M [“ m00”])) 将线段质心坐标与图像中心坐标进行比较,可以将四个线段分别放置在各自的位置。...用于提取我们的ROI的蒙版 在原始图像上应用此蒙版可以在我们选择的背景(例如黑色或白色)上为我们提供所需的分段。...在白色背景上提取的ROI 到此为止,我们总结了几种方法,可以轻松地从图像中提取感兴趣区域。 应当注意,在具有变化的复杂度的其他图像的情况下,上面使用的方法可以进行修改。

    4.2K20

    关于视图在切圆角时候的导致的性能下降的一些探讨

    iOS 中有的时候我们控件要做成圆形 或者是切成圆角,这个时候我们一般都会使用.layer.cornerRadius  ->  clipsToBounds = YES 的属性来切,这样完全能达到我们的效果...,但是如果一个界面上需要切圆角的控件很多,并且列表很长的时候,尤其是像 tableView 那样如果每一个 cell 上都有大量的控件需要切,那么就会非常卡顿,帧数严重下降 。...在 tableView 中的自定义 cell 类中我设置了阴影如图: 使用 Instruments 测试得到当前帧数在二三十左右 同时屏幕是也出现了黄色图层 所有黄色的高亮的图层都进行了离屏渲染,...这种方式 GPU 损耗最低,可以用 UIimageView 添加个点击手势当做 UIButton 使用。...目前这种方法只用在 imageView 上,其他地方呢不知道怎么用,不过这种方法会耗费大量的 CPU 资源和占用内存,本人不太建议使用。

    58450

    ·第三方网络图片处理框架:SDWebImage(官方文档翻译篇)

    为方便起见,我们为UI元素例如UIImageView,UIButton,MKAnnotationView等类添加了categories。 ? 1....特征 ---- 为UIImageView,UIButton,MKAnnotationView的Categories添加了有关网络图像和高速缓存管理的Categories 异步图像下载器 异步内存+磁盘图像缓存...注意:仍然有一个向后兼容的功能,所以如果你仍然试图用UIImageView加载一个GIF,它将只显示第一帧作为静态图像。...的依赖管理器,它可以自动化并简化在项目中使用第三方库的过程。...在需要使用库的源文件中,导入头文件: #import UIImageView+WebCache.h> 10.5 构建工程 到这里,您的workspace应该能没有错误地被构建。

    3.7K20

    【 iOS 应用开发 】 UIKit 控件 ( 代码生成控件 | UIView 属性方法 | Storyboard | Bundle | Property List | 动画 | 图片内存优化 )

    , 选择传入的参数 即可生成点击方法 ; // 上一张 图片 - (IBAction)lastImage:(UIButton *)sender { } // 下一张 图片 - (IBAction)nextImage...) UIButton 的启用 禁用 : 1.enabled 属性 ( 可视化修改 ) : 在 UIButton 的 属性查看器中 Control 模块下 , Enabled 属性用来设置 按钮是否可用...然后 再次查看 Bundle , 即可看到 在 Bundle 中 出现了一个 新文件 ; 这个 文件 是 加密的 , 无法查看 ; ---- ( 2 ) 图片放置 位置 ( ① 放在 Assets.xcassets...数组 | ② 设置动画参数 UIImage数组 时长 重复次数 | ③ 启动动画 ) UIImageView 动画 执行流程 : 1.首先判断 动画 是否在执行 : 动画执行 操作 会覆盖 上一次的...这里需要从 Bundle 中获取图片 , 因此需要将图片 放置在 Xcode 中的 Assets.xcassets 之外 ( Bundle 中无法获取其中的资源路径 ) , 拖入一个图片文件夹 , 这里要注意

    4K40

    猫学习IOS(五岁以下儿童)UI之360其他下载管理器广场UI

    来定位他的xy坐标完毕 012 在第一行:相当于i/kColCount //行 一行:012 二行:345 三行:678 int row = i/kColCount; //列 一列:036 二列:147...(图像 标题 按钮图像) //UIImageView:应用程序图片 UIImageView *icon = [[UIImageView alloc] initWithFrame...:应用程序下载按钮 UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(label.frame...思路 思路:将三个控件放到一个view中 没有通过双层for循环换行,而是通过第几个然后推断他的行和列 来定位他的xy坐标完毕 012 在第一行:相当于i/kColCount //行 一行:...ps2:昨晚用同学电脑看自己写的咋样。发现csdn居然进不去。喵了个咪的猫猫就醉了。更醉的是发现居然在别的站点有转载的,瞬间鸡冻了喵。 版权声明:本文博主原创文章,博客,未经同意不得转载。

    20740

    动画分析步骤“三步曲”

    其实产品设计师在设计动画时,如果能够将动画分解为单帧图像,或者能够较为慢速地展现动画的变化过程,那么对于算法分析师和程序员分析动画的原理,以及设计合适的展现算法起着非常重要的作用。...在Main.storyboard中为整个工程添加一个已经准备好的背景图片,背景图片依托在UIImageView上。...经过以上分析,大家应该清楚,在动画起始阶段可以将所有的初始化代码放置在viewDidLoad()方法中。具体实现代码如下所示。...),所以这部分功能只能放置在viewWillAppear方法中。...通过对frame中数据类型的追本溯源,可以得到以下结论:CGRect分别对应x坐标、y坐标、width、height四个属性。这四个属性表明当前UI在它的父控件上的位置,如self.view上。

    90510

    iOS事件响应控制 原

    以前遇到一个项目,一个UIImageView对象上面有一个UIButton对象,然而项目的需求需要在点击 button的同时,UIImageView也接收到点击事件,在不使用代理和通知方法的前提下...在处理这个问题之前,我们应该先清楚IOS的事件响应机制到底是个什么样的原理。 首先,这个事件响应的机制是分为两个部分的。 1、先在视图层级关系中找到应该响应事件的那个视图。...例如:我们建两个文件,一个继承于UIButton,一个继承于UIImageView,我们在UIImageView里的代码如下: #import "MyImageView.h" @implementation...void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{     NSLog(@"点击了Image"); } 然后将他们创建在一个View上:...可以证明,在事件视图寻找中,UIImageView我们重写hitTest:withEvent:方法后,切断了寻找链,如果我们这个做: -(UIView *)hitTest:(CGPoint)point

    55140

    实际操作-手把手探究tableViewCell上的控件点击事件进阶篇:实际项目操作

    ”方法就能实现行点击效果,经常我们做的是行点击之后页面跳转(push到另一个界面); 此时:如果我们在cell上自定义几个控件,然后点击控件,想要实现控件的点击效果,不实现cell的行点击效果: ?...测试Cell上控件的点击事件 参与测试的cell上的两个控件:一个UIButton,一个UIImageView。...---- -->探究1:点击Button的时候,因为Button在cell上,是否会同时触发Button的点击事件以及 cell的行点击事件? ?...-->错误:1.我们点击的是头像(UIImageView),触发的是头像的点按手势,并不会调用didSelectRowAtIndexPath方法;               2.异步请求,在点击的时候...,发送请求,点击整个操作结束后,异步的请求都不一定执行完,由于异步执行,数据经常是当时获取没完成就接下去执行了,导致数据为空;               3.在2的基础上,执行完didSelectRowAtIndexPath

    3.7K50
    领券