首页
学习
活动
专区
圈层
工具
发布

老司机带你走进Core Animation 之图层的透视、渐变及复制

我给自己挖的坑 所以呢,在今天的博客里你将会看到以下截个内容 CATransform3D CATransformLayer CAGradientLayer CAReplicatorLayer DWMirrorView...虽然老司机从小到大都是数学课代表,不过我要很郑重的告诉你,数学是一门靠悟性的学问,不是我讲给你听,你就能消化的,所以关于矩阵计算什么的,请各位同学自己消化理解(咳咳,我会告诉你我高数、线代、概率没有一科过...我想你一定猜到了,就是对给定的矩阵在其现有基础上进行指定的变换。 值得注意的是,以上两个旋转api中x/y/z三个参数均为指定旋转轴,可选值0和1,0代表此轴不做旋转,1代表作旋转。...这个距离至一般掌握至500~1000这个范围会取得不错的效果。 这里需要注意的是M34的赋值一定要写在矩阵变换前面,具体为什么说实话老司机也不知道。...---- type 过渡模式,当前苹果给我们暴露的只有一种模式,kCAGradientLayerAxial。 需要说明的是,CAGradientLayer只能做矩形的渐变图层。 你要怎么做?

81640

绘图-视图遮罩MaskView的使用

就是不起作用,请设置一下 maskView的背景颜色。...我gitHub上上传的dome效果图如下,做一下思路说明,供有需要的兄弟参考一下: ?...效果1.png 途中圆圈羽化的边缘是用的图片填充,对CALayer内容的图片填充才有的羽化边缘的形状,才出的这样的效果,这其实是 maskLayer的使用了,具体可以参考我的代码查看。...可以结合CAGradientLayer用来实现颜色滚动渐变 初始化一个CAGradientLayer 设置一个CABasicAnimation 用来做CAGradientLayer 的动画 CAGradientLayer.mask...滑动.gif 此处只做思路的介绍,查看具体源码可以参看这篇文章: http://www.jianshu.com/p/f0c198e8de91 当然也可以结合CAShapeLayer用来实现自己想要的任意效果

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

    学会不一样的Loading图

    (也就是控件最外边的那些线),原本的控件遮罩只是矩形,为了美观,我建议每个控件path添加圆角 2、添加覆盖层,仅显示控件path的渐变色图层 // 添加挡住所有控件的覆盖层(挡住整superview...“被遮罩层”;这两个图层中只有相重叠的地方才会被显示。...也就是说在遮罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。 它的原理是:上面一层是遮罩层,下面一层是被遮罩层。...如果遮罩层上什么都没有,那么光线就无法透到下面来,那么下面的被遮罩层什么也显示不出来。...[self.viewCover removeFromSuperview]; 就这样,完成了一个主流APP的Loding图,我针对此代码还进行了特殊封装,代码已经放在github demo图

    97440

    带动画渐进效果与颜色渐变的圆弧进度控件设计 原

    带动画渐进效果与颜色渐变的圆弧进度控件设计      今天帮朋友写了一个小巧的圆弧进度控件,控件十分简单,主要设计思路采用CAShapeLayer来创建控件圆弧形状,使用CAGradientLayer...控件进行了简洁的封装,提供了面向使用的接口,需要的朋友可以自取,Demo地址如下: http://pan.baidu.com/s/1gfqDbtp。       ...控件中主要提供了,改变进度条渐变颜色,圆弧进度条宽度,带动画效果的改变进度,改变进度百分比字体颜色等方法。效果是例如如下: ? 改变字体颜色 ? 改变进度 ? 改变进度条颜色 ?... * ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];     ani.toValue = progress>1?...4)];     _tipLabel.attributedText = attri;     [self addSubview:_tipLabel]; } @end 专注技术,热爱生活,交流技术,也做朋友

    1.3K20

    iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

    CAReplicatorLayer CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。什么意思?...看到例子中间的那么多条条在上下起伏了嘛?其实我并没有写那么多条条,只写了一个。把这一个写好的加入到了CAReplicatorLayer复制层中,然后就根据设置的参数自动的生成了剩下的条状物。...来,我们一起对照看看两个复制层上面有什么区别。...用的时候查一下就可以了。 3. CAGradientLayer CAGradientLayer是用来生成两种或更多颜色平滑渐变的。...用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的,但是CAGradientLayer的真正好处在于绘制使用了硬件加速。

    1.6K20

    iOS Core Animation:Advanced Techniques

    在这一章中,我们将要研究一下显式动画,它能够对一些属性做指定的自定义动画,或者创建非线性动画,比如沿着任意一条曲线移动。...虚拟属性 之前提到过属性动画实际上是针对于关键路径而不是一个键,这就意味着可以对子属性甚至是虚拟属性做动画。但是虚拟属性到底是什么呢?...第3篇:过渡 属性动画只对图层的可动画属性起作用,所以如果要改变一个不能动画的属性(比如图片),或者从层级关系中添加或者移除图层,属性动画将不起作用。 于是就有了过渡的概念。...对图层树的动画 CATransition并不作用于指定的图层属性,这就是说你可以在即使不能准确得知改变了什么的情况下对图层做动画,例如,在不知道UITableView哪一行被添加或者删除的情况下,直接就可以平滑地刷新它...,但是不能对子图层正确地处理变换效果,而且对视频和OpenGL内容也不起作用。

    2K30

    这篇神奇的文章里小鼠既当实验组又当对照组!小鼠:我做错了什么?

    这是一篇做LncRNA的文章,题目是“STAT5A induced LINC01198 promotes proliferation of glioma cells through stabilizing...这篇文章的大意是: 研究人员发现,有研究表明,LINC01198能够预测胶质瘤的总体预后,然而在胶质瘤中却鲜有报道。所以进行了相关研究。...研究人员的实验结果表明,与正常对照组相比,LINC01198在肿瘤组织中明显富集,LINC01198的升高与不良的总体预后显著相关。此外,激活转录因子STAT5A,可以诱导LINC01198的表达。...所以作者认为STAT5诱导的LINC01198通过稳定DGCR8在胶质瘤细胞中促进胶质瘤细胞的增殖和迁移。 貌似是一篇比较中规中矩的LincRNA研究套路文章。...但是,当我们看本文Fig部分时发现了很多有意思的图片,第一个发现的是这个小鼠肿瘤的图片,找找看,这些图片有哪些问题 ? ? 有没有什么发现?

    60520

    iOS - QuartzCore

    QuartzCore这个框架也许在一些同行的印象中以为就是 Layer + Path 也就是用来 “画画”的,其实这个框架里面的东西当仔细研究的时候还是很庞大的,就像我们以前有说过的 AVFoundation...一样的,这篇文章的主要目就是下面这一段内容,简单的介绍一下QuartzCore里面的东西,然后你知道它里面的东西都是用来干什么的,当你要具体的了解里面的东西的时候你需要看什么文章。...,然后在下面着了一个我不怎么熟悉的CAEmitterLayer来写一个简单的粒子动画吧。...CAEmitterLayer 粒子动画 ---- 拿其中的这个我们写一个简单的粒子动画,在QuartzCore里面别的Layer应该是使用的比较多的,比如像 CAGradientLayer、...CAReplicatorLayer、CAShapeLayer这几个我们平常还是在使用的,但这个CAEmitterLayer我还真的见得比较少,然后就看了一下它的一些具体的使用,总结写了一个动画,动画的效果如下图所示

    92210

    从案例出发,由浅到深了解 iOS 动画

    ,然后对四个控件,做移位操作 用简单的关键帧动画,处理要优雅一点 * * * 例子三:地图定位波动 [strip] 看上去有些眼花的动画,可以分解为三个动画 [image] 一波未平,一波又起,做一个动画效果的叠加...,看起来不错,就是做了一个简单的缩放,通过 transform 属性做仿射变换 func startAnimation() { dotOne.transform = CGAffineTransform...() // 这个用来,附加的颜色 let gradientLayer = CAGradientLayer() // 给个默认值,外部设置 var range: CGFloat...LoadingLabel: UIView { let gradientLayer: CAGradientLayer = { let gradientLayer = CAGradientLayer...scrollView.contentInset.top), 0.0)) self.progress = min(max(offsetY / frame.size.height, 0.0), 1.0) // 做互斥的状态管理

    85930

    iOS动画-CAAnimation使用详解

    :被设置动画的属性应该是什么值?...做更新属性的显式动画,我们需要设置一个事务来禁用图层行为,否则动画会发生两次,一次是因为显式的CABasicAnimation,另一次是因为隐式动画,从而导致我们看到的动画异常。...,然后在回调用比较,但实际上并不起作用,因为委托传入的动画参数是原始值的一个深拷贝,从而不是同一个值。...CABasicAnimation_VirtualProperty.gif 总结transform.rotation相比transfrom做动画的好处如下: 可以不通过关键帧,只一个步骤就实现旋转多于180...十一、在动画过程中取消动画 在使用动画的过程中,我们可能需要适时的移除不要的动画,否则就可能造成内存的泄漏问题;从图层中取消动画的方法有以下两种方式: //方法1:取消指定动画 /* Remove any

    2.6K10

    绘图-几个较复杂统计图案例的实现分析

    前言 此本中收录一些较复杂统计图案例的实现分析,希望能给需要的朋友带来灵感。...同时对横竖方向的CAShapeLayer做动画,就会出现如图所示的效果。...首先我们设置一个渐变图层 CAGradientLayer,下面是CAGradientLayer基本介绍 CAGradientLayer可以方便的处理颜色渐变,它有以下几个主要的属性: @property...遮罩层同时做CABasicAnimation动画,渐变图层渐渐显现,渐变图层的遮罩图层由 低路径过渡到高路径,就有了上图中渐变图层渐渐显现并逐渐身高的效果。...,还有一个十字线,这个只要会画线段就会画十字线,这个也不多说了; 这些掌握了之后就可以绘制专属自己的K线图了,其他的都是一些细节小问题,CGContextRef还有很多用法,有兴趣的自己可以找度娘,接下来附上我的最终的绘制结果

    1.6K20

    随机播放歌曲的算法,原来是这么做的,我一直都搞错了

    本篇文章,我将以数组为基础,探索“在线洗牌”的原理。同时,我会以多种方式编写这个原理的代码。...还等什么,继续往下看~ 方法一:Fisher-Yates 算法 Fisher-Yates 算法的基本前提是遍历条目,将数组中的每个元素与从数组中剩余的未洗牌部分随机选择的元素进行交换。...在这个循环中,我们将遍历数组中的每个元素,将其位置与数组中的另一个元素交换。 接着,创建一个 i 变量,将 array.lenght-1 值赋给它。...sort() 方法在内部比较数组中的元素对,并根据比较函数的返回值确定它们的相对顺序,返回值有三种结果: 如果返回一个负值,则认为第一个元素较小,应该放在排序数组中第二个元素之前。...浮点数是可以是正的或负的,并且可以有小数部分的数字,例如 3.14、-0.5、1.0、2.71828 等等。 为什么要从 Math.random() 的结果中减去 0.5 ?

    32720

    为什么我的样式不起作用?

    Contents 1 关于 2 问题复现 3 究其原因 4 浏览器渲染 5 css的浏览器解析原则 6 如何变成正确的颜色 7 最后 关于 今天被人问了一个关于react中的样式问题,一瞬间脑袋没反应上来好像还回答错了...还有一个Child的子组件,红底黑字。 那么实际渲染出的样式是什么样子的呢。如下图: ? 实际看到的效果确实蓝底白字与红底白字,为什么与写的代码有出入呢。...究其原因 为什么子组件的字体颜色不是黑色确是白色? ?...如果在向下匹配的过程中,没有匹配上的则回溯到上一级继续匹配其他子叶结点。...最后 文章首发于:为什么我的样式不起作用? 参考:浏览器渲染原理与过程 参考:CSS选择器从右向左的匹配规则 DEMO地址

    5.2K20

    为什么我做的网页总是卡?前端性能优化规则要点

    一说到页面的性能优化,大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。...网络平均338kb/s(2.71mb/s),首屏资源不应超过1014kb M端因配置原因,除加载外渲染速度也是优化重点 基于第五点,要合理处理代码减少渲染损耗 基于第二点和第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置...「首屏加载」:首屏快速显示可大大提升用户对页面速度的感知,应尽量针对首屏的快速显示做优化 「按需加载」:将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载,可大大提升显示速度和降低总体流量(「...CSS属性:opacity、transform、transition ❝「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」:CSS表达式的执行需跳出CSS树的渲染 「移除CSS...图像 「Optimize Images」:优化图片 「Optimize CSS Sprites」:优化CSS精灵图 「Don't Scale Images In HTML」:不在HTML中缩放图片

    2K20

    为什么我做分享的时候会感觉大脑空白

    这也是我最近遇到的问题,这两个月做了两次技术分享,第一次就遇到上面的情况,有的点因为紧张怎么都想不起来,只能尴尬的说,我回头再重新捋一下发给大家。 为了避免每次遇到这种问题,我得想办法解决。...再从大脑结构来说,你可以理解它们分布在这个位置: 从距离上说,本能脑和情绪脑距离心脏更近,一旦出现紧急情况,它们就会优先得到供血,这就是为什么我紧张的时候会感觉大脑空白,因为最上方的理智脑供血不足了。...而且因为它年龄小,在遇到危险的时候,本身也竞争不过其他两重脑,所以就能解释,为什么人在遇到危险的时候都靠本能反应而不是靠理智。 02 那怎么解决这个问题呢? 其实很简单,就是打稿子,然后自己多练。...我虽然没有连麦经验,但是我感觉分享形式都是相通的,所以我建议她先把要分享的内容打稿,并熟读几遍,这样就算连麦紧张,还有稿子可以提醒,阿常的执行力真的太强了,当天晚上稿子就出来了。...昨天我看了阿常和小林的连麦,非常稳,这也是我要继续学习的方向。 好了今天的分享就到这里。 今日鸡汤: 自信人生二百年,会当击水三千里。

    69740
    领券