Group（OC和Swift两版） 1....实现类似Twitter的启动动画 3.1实现思路 1，在View上设置一个东西能够遮挡住背景图； 2，把遮罩变成五角星； 3，让遮罩慢慢变大，中间可见区域越来越大。 yes！思路就是这样的。...3.2 CALayer的遮罩属性 CALayer本身有一个属性，叫mask。...一个是给背景图片的UIImageView设置了mask，另一个是直接给Controller的View设置了mask。设置这两个有神马区别咩？ 好，下篇其实有一个重头，就是CAShapeLayer。...因为在工作中碰到的大部分动画都是通过UIView的动画block实现，其他都基本上都是需要用到CAShapeLayer。我们下次玩点好玩的吧～ 如果还有兴趣，可以看看本系列的其他文章哈。
下面逐个分析 坐标横竖虚线的动画 第一步设置一个 CAShapeLayer 并设置 .lineDashPattern 属性，使之成为虚线。...同时对横竖方向的CAShapeLayer做动画，就会出现如图所示的效果。...，但是动画结束后我们需要它显示，所以在动画的代理里 设置动画的 layer.opacity = 1.0;使其一直显示。...设置渐变图层的 mask（遮罩层）为一个CAShapeLayer maskLayer = [CAShapeLayer layer]; maskLayer.strokeColor = [...(3) 开始弹性动画，设置子视图的终点，X坐标跟曲线上点的X坐标一样，Y坐标的值跟曲线上点的Y坐标一样。 ，在 completion 中对 CADisplayLink定时器暂停。
前言 有时你会看到很多镂空的试图或者是镂空视图的动画效果，感觉很酷炫，其实只要掌握其中实现的原理，想实现怎样的效果就能实现怎样的镂空效果。 原理解析 UIView的maskView属性。...（1） 这里特别强调下，当CAShapeLayer没有设置backgroundColor时，（默认为backgroundColor = [UIColor clearColor].CGColor），CAShapeLayer...maskLayer.contents = (id)[UIImage imageNamed:@"123456"].CGImage; self.waveView.layer.mask = maskLayer; 使用了图片作为遮罩图层...，self.waveView为一个水波上涨的自定义试图，其中水波的上升效果是通过核心动画和 CAShapeLayer的path动态绘制实现的，先了解更多的可以看我的其他两篇文章： 绘图－视图遮罩MaskView...positionWave"]; [self.waveCosLayer addAnimation:animation forKey:@"positionWave"]; 使用CABasicAnimation设置动画使波浪图层上移
这里只以这个动画的实现为主线，更系统的介绍请移步上面的相关链接。 视图控制器过渡，就是指图片里那种 ViewController 的过渡效果。（好废话。。。）...有两个方法需要实现 // 这个方法负责做真正的动画，输入参数是过渡的上下文，从哪个VC过渡到哪个VC这些东西都可以从它得到。...，主要的想法是设定一个 CAShapeLayer 作为目标 VC 的遮罩。...然后给这个 ShapeLayer 的 path 属性加动画，从半径为0变化到覆盖整个目标 VC 。...，用作toView的遮罩。
1、视图变暗、变大 alpha值属性是透明度，把背景设置成淡黑色，然后调整alpha可以达到背景渐变的视图效果； UIView的transform是可以用仿射变换矩阵来控制平移、放大缩小等。...遮罩效果可以实现彩虹?...出现、烟花爆炸、画卷打开等效果，通过改变遮罩的大小，影响原始图片的展示，达到动画的效果； 先新建一个CAShapeLayer，并设置为layer的遮罩； 新建一个动画，设定初始和结束状态并赋值给CAShapeLayer...，完成一个遮罩动画。...直播APP的性能优化-礼物篇 iOS开发-视图渲染与性能优化 都有，不再赘述。
---- 在UIView中有一个maskView属性，我们可以利用这个属性很方便的做出一些有意思的效果 这个属性在iOS8之后开始使用，用来表示视图的遮罩。 ?...效果.png 这个效果的实现关键点在于 动画执行时间的延迟设置，这个时间的计算和设置，直接决定效果能否缓缓出来，因为代码的执行速度是很快的，而动画又是移步执行的，如果设置动画的执行时间为0，你会看到图片瞬间改变...可以结合CAGradientLayer用来实现颜色滚动渐变 初始化一个CAGradientLayer 设置一个CABasicAnimation 用来做CAGradientLayer 的动画 CAGradientLayer.mask...滑动.gif 此处只做思路的介绍，查看具体源码可以参看这篇文章： http://www.jianshu.com/p/f0c198e8de91 当然也可以结合CAShapeLayer用来实现自己想要的任意效果...path); [shapeLayer setPath:path]; CFRelease(path); self.layer.mask = shapeLayer;//layer的mask，顾名思义， } 视图初始化的时候调用即可
一般来说，layer可以有两种用途，二者不互相冲突：一是对view相关属性的设置，包括圆角、阴影、边框等参数；二是实现对view的动画操控。...RemovedOnCompletion 这个属性默认为 true,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。假如你想要再次用这个动画时,你需要设定这个属性为 false。...新视图把旧视图推出去 kCATransitionReveal 将旧视图移开,显示下面的新视图 2.用字符串表示 pageCurl 向上翻一页...，可选值如下： kCATransitionFromTop 从顶部开始 kCATransitionFromBottom 从底部开始 kCATransitionFromLeft...) //动画的持续时间 animation.duration = duration //设置重复次数,HUGE可看做无穷大，起到循环动画的效果 animation.repeatCount
self.showsCameraControls = NO; //预览图 [self.view addSubview:self.preView]; //遮罩区父视图...遮罩区：创建一个遮罩View - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame...*shapeLayer = [CAShapeLayer layer]; shapeLayer.path = bpath.CGPath; //添加图层蒙板 self.mView.layer.mask...[picker hiddenBtn];//拍照按钮隐藏 必须是拍照后隐藏，如果在拍照的同时隐藏那么会出现隐藏动画影响picker绘制问题，图片成像可能是黑色的。 我们回到界面的绘制上来。...在自定义相机页View中的drawRect方法中使用贝赛尔曲线绘制页面线条，例如四个角框： UIColor *color = kLineColor; [color set]; //设置线条颜色
所以想支持到iOS8.0，支持自定义，支持等宽排列，支持从左向右排列。 类似美团的下拉菜单 - 类似美团的下拉菜单，源码推荐说明。...JMRoundedCorner - UIView设置不触发离屏渲染的圆角！ JMRoundedCornerSwift - swift版本：UIView设置不触发离屏渲染的圆角！...中快速设置动画效果。...JGTransitionCollectionView - swift，基于集合视图扩展实现完成自动布局及单元项Flip式动画效果（效果很赞）。...组件使用方便，自然（只需设置集合视图数据源的标准方式即可）。 KYShareMenu - 带弹性动画的分享菜单。
CADisplayLink可以确保系统渲染每一帧的时候我们的方法都被调用，从而保证了动画的流畅性....CADisplayLink 默认每秒运行60次，将它的frameInterval属性设置为2，意味CADisplayLink每隔一帧运行一次，变为每秒运行30次, 使用场合相对专一，适合做UI的不停重绘...，比如自定义动画引擎或者视频播放的渲染。...CADisplayLink 了解更多 实现的主要过程： 使用CADisplayLink 注册定时器 创建两个图层，一个为前面的实浪图层，一个为后面的遮罩浪图层。...设置两个图层的大小相同，高度都是一个浪的高度 在定时器的绑定方法中 使用 正弦曲线函数和for 方法绘制路径 把绘制好的路径分别赋给两个图层。 设定好“船”的 y坐标。
ADo_GuideView - 转动的用户引导页(模仿网易bobo) 因为没有从app包里抓到@3x的图片,建议在iPhone5模拟器运行,保证效果~ （版本新特性、导航页、引导页）。...用 IBDesignable 让使用者可以在 Xcode 中快速设置动画效果。...JGTransitionCollectionView - swift，基于集合视图扩展实现完成自动布局及单元项 Flip式动画效果（效果很赞）。...组件使用方便、自然（只需设置集合视图数据源的标准方式即可）。 KYShareMenu - 带弹性动画的分享菜单。...消失时还带有消失效果动画。 GiftCard-iOS - 礼品卡购买的炫酷动画。 SDCycleScrollView - 无限循环自动图片轮播器(一步设置即可使用)。
) CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = totalCoverablePath.CGPath;...whiteColor].CGColor; colorLayer.mask = maskLayer; 1、 添加覆盖控件的覆盖层 2、 添加渐变色图层到挡住控件的覆盖层 3、为渐变色图层设置...也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。 它的原理是：上面一层是遮罩层，下面一层是被遮罩层。...上述代码，得出如下效果： 上述效果，其实很多app就单纯这样使用了，但是我们为了更美化，决定为其增加动态效果 3、为渐变层增加动态效果 // 动画 animate CABasicAnimation...= 0.7; animation.repeatCount = HUGE; [animation setRemovedOnCompletion:NO]; // 为渐变层增加添加动画
]; ...根据tPoint设置右下视图 frame......判断是否执行动画 若 return nil 则执行原始 push/pop 动画......transitionContext containerView]; [contView addSubview:fromVC.view]; [contView addSubview:toVC.view]; //添加遮罩视图...(0, 0,SCREEN_WIDTH, SCREEN_HEIGHT) cornerRadius:floatBallRect.size.width/2]; //.layer.mask 是部分显示的原因 CAShapeLayer...*maskLayer = [CAShapeLayer layer]; maskLayer.path = maskFinalBP.CGPath; toVC.view.layer.mask = maskLayer
这里先创建一个路径，把圆的中心放在视图的中心，半径设为100，然后设置起始角度和结束角度，并将clockwise设为true。...这里有个问题就是开始的位置应该是圆的上方而不是右边，这里就需要去修改shapeLayer的transform,这样就会从圆的上方开始动画了。...percentageLabel为视图的子view，设置好label的frame，并将其放在视图中心。...这个就在刚才URLSession的代理方法里面设置strokeEnd的地方设置percentageLabel的text就好了。 这里注意设置text也需要在主线程里面。...let pulsatingLayer = CAShapeLayer() 在viewDidLoad中设置好属性并添加为view的layer的sublayer pulsatingLayer.path =
fillMode 是个枚举值（四种），当removedOnCompletion设置为NO之后才会起作用。可以设置layer是保持动画开始前的状态还是动画结束后的状态，或是其他的。...（包括CAAnimationGroup），需要注意的是animations里的动画设置了duration之后动画可能会有不同，一般里面不设置，在最外层设置group的duration即可。...示例代码可能与gif图不太一致，因为gif图是从其他demo中录制下来的。...有三种方式：1、直接使用UIBezierPath的方法；2、使用CoreGraphics绘制；3、利用CAShapeLayer绘制。 示例代码如下，绘制一个右侧为弧型的视图： ?...进度条.gif 上图这样的视图是用UIBezierPath用多个CAShapeLayer制作出来的，而动画效果只需要改变进度的layer的strokeEnd和修改下面代表水面进度的视图位置即可。
以下是源码解析 使用 Core Graphics 和 定时器 实现环形进度动图 圆环进度.gif 核心源码 # 使用 [self setNeedsDisplay]; 会触发drawRect 方法达到刷新视图的效果...drawRect:rect]; #获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); #设置中心点...} else { fakeProgress += 0.01;//进度越大动画时间越长。...无色 shapeLayer1.fillColor = [UIColor clearColor].CGColor; # 设计 lineWidth 为20 （深绿色区域）我们可以看到是绿色区域的中心线在贝塞尔曲线的边界上...的终点，这里设置为动画的 KEY CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
两种方式，一种是使用 n张图片去循环，这样的话对内存的开销比较大，不建议使用，第二种就是采用CALayer的相关属性 加上核心动画来实现：代码如下： //2.渐变转换为图形形成动画 CALayer...bezierPathWithArcCenter:CGPointMake(55, 55) radius:50 startAngle:0 endAngle:M_PI*2 clockwise:YES]; // // //圆环遮罩...CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.fillColor = [UIColor clearColor]...[gradientLayer setColors:[NSArray arrayWithArray:colors]]; [layer addSublayer:gradientLayer]; //设置颜色渐变...[layer setMask:shapeLayer]; //设置圆环遮罩 [self.view.layer addSublayer:layer]; // // //动画
removedOnCompletion -> 是否让图层保持显示动画执行后的状态，默认为YES，也就是动画执行完毕后从涂层上移除，恢复到执行前的状态，如果设置为NO，并且设置fillMode为kCAFillModeForwards...,那么动画就会从fromValue过渡到fromValue + byValue; 如果同时设置了byValue 和toValue,那么动画就会从toValue - byValue过渡到toValue...; 如果只设置了fromValue,那么动画就会从fromValue过渡到当前的value; 如果只设置了toValue ,那么动画就会从当前的value过渡到toValue...; 如果只设置了byValue ,那么动画就会从从当前的value过渡到当前value + byValue....在这个动画里,是设置了要旋转到的弧度,根据以上规则,动画将会从它当前的弧度专旋转到我设置的弧度.
*maskLayer = [CAShapeLayer layer]; maskLayer.path = apath.CGPath; maskLayer.fillColor = [UIColor...:foregroundLayer]; } @end 我们再可以给遮罩层添加动画, 实现更加绚丽的效果 比如中间中间小圆逐渐变大 #import "ViewController.h" static...CGFloat num; @interface ViewController () @property (nonatomic, strong) CAShapeLayer *circle; @property...作为MaskLayer circle = [CAShapeLayer layer]; //设置路径 circle.path = [UIBezierPath bezierPathWithArcCenter...circle.fillColor = [UIColor greenColor].CGColor; circle.fillRule = kCAFillRuleEvenOdd; //设置
有手动设置交互效果，看起来像是动画，一般要用到插值。 至于动画框架，有 UIView 级别的，有功能强劲的 CALayer 级别的动画。...约束动画要注意的是，确保动画的起始位置准确，起始的时候，一般要调用其父视图的 layoutIfNeeded 方法，确保视图的实际位置与约束设置的一致。...这里动画效果的主要用到 strokeEnd 属性, 笔画结束 插值的时候，要注意，下一段动画的开始，正是上一段动画的结束 // 这个用来，主要的效果 let progressLayer = CAShapeLayer...return gradientLayer }() // 文字转图片，然后绘制到视图上 // 通过设置渐变图层的遮罩 `mask` , 为指定文字，来设置渐变闪烁的效果...animations = animations } return animationGroup } * * * 例子十一：动态图动画 [image] 从 gif
领取专属 10元无门槛券
手把手带您无忧上云
