在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor、shadowOpacity、shadowOffset和shadowRadius这几个属性可以很方便的为 UIView 添加阴影效果。但是如果单用这几个属性会导致离屏渲染(Offscreen Rendering),而且CoreAnimation在每一帧绘制阴影的时候都需要递归遍历所有sublayer的alpha通道从而精确的计算出阴影的轮廓,这是非常消耗性能的,从而导致了动画的卡顿。

为了尽可能地减小离屏渲染带来的性能影响,我们可以利用CALayer的另外一个属性shadowPath,这个属性的官方文档是这么描述的:

If you specify a value for this property, the layer creates its shadow using the specified path instead of the layer’s composited alpha channel. The path you provide defines the outline of the shadow. It is filled using the non-zero winding rule and the current shadow color, opacity, and blur radius.

可以看到设置了这个属性以后CALayer在创建其shadow的时候不在遍历sublayer的alpha通道,而是直接用这个属性所指定的路径作为阴影的轮廓,这样就减少了非常多的计算量。

然而这里会有一个问题,shadowPath并不会跟随CALayer的bounds属性进行变化,所以在layer的bounds产生变化以后需要手动更新shadowPath才能让其适配新的bounds。

为了解决这个问题,在使用AutoLayout以前,因为bounds都是手动计算出来的,我们可以很容易的直接设定新的shadowPath,而使用了AutoLayout以后,我们则只能在UIView的layoutSubivews方法中才能获得更新后的bounds。

而且文档中还做了如下描述:

Unlike most animatable properties, this property (as with all CGPathRef animatable properties) does not support implicit animation.

这说明该变量是不支持隐式动画的,也就是说当我们直接设置CALayer的shadowPath属性后,系统并不会自动的提交隐式的CATransaction动画。

为了解决了这个问题,我们需要通过CABasicAnimation显示地指定shadowPath的动画效果,同时为了和bounds的动画效果保持一致,我们需要获取bounds的动画属性。

考虑了以上两点问题以后,我们就可以用如下方法实现让CALayer的shadowPath跟随bounds一起做动画改变。

要特别注意一点的是,在iOS8以后bounds的隐式动画默认是开启additive模式的,而CALayer的shadowPath属性并不支持additive模式,所以如果在前一个shadowPath动画执行完毕前如果提交了新的动画,使用本方法将会看到shadowPath和bounds的动画不一致的现象。在Demo中可快速点击改变Bounds的按钮来复现该现象。

实现方法

为实现本文的思路,我们需要创建一个一个UIView的子类并且重写其layoutSubivew方法。

// Subclass of UIView
- (void)layoutSubviews {    
   [super layoutSubviews];    
   if (self.shouldAnimateShadowPath) {        
       CAAnimation *animation = [self.layer animationForKey:@"bounds.size"];        
       if (animation) {            
           // 通过CABasicAnimation类来为shadowPath添加动画            
           CABasicAnimation *shadowPathAnimation = [CABasicAnimation animationWithKeyPath:@"shadowPath"];            
           // 根据bounds的动画属性设置shadowPath的动画属性            
           shadowPathAnimation.timingFunction = animation.timingFunction;            
           shadowPathAnimation.duration = animation.duration;            
           // iOS8 bounds的隐式动画默认开启了additive属性,当前一次bounds change的动画还在进行中时,            
           // 新的bounds change动画将会被叠加在之前的上,从而让动画更加顺滑            
           // 然而shadowPath并不支持additive animation,所以当多个动画叠加,将会看到shadowPath和bounds动画不一致的现象            
           // shadowPathAnimation.additive = YES;              
           // 设置shadowAnimation的新值,未设置from,则from属性将默认为当前shadowPath的状态            
           shadowPathAnimation.toValue = [UIBezierPath bezierPathWithRect:self.layer.bounds];            // 将动画添加至layer的渲染树            
           [self.layer addAnimation:shadowPathAnimation forKey:@"shadowPath"];        
       }        
       // 根据苹果文档指出的,显式动画只会影响动画效果,而不会影响属性的的值,所以这两为了持久化shadowPath的改变需要进行属性跟新        
       // 同时也处理了bounds非动画改变的情况        
       self.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.layer.bounds].CGPath;    
   }
}

Demo

本文Demo地址为ShadowPathAnimationDemo:https://github.com/wty21cn/ShadowPathAnimationDemo

disableShadowPathAnimation.gif

可以看到当关闭shadowPath动画,也就是不执行上述代码的时候,当view的bounds改变以后shadowPath还为原来的值,并未跟随bounds进行改变。

enableShadowPathAnimation.gif

可以看到当打开shadowPath动画,也就是要执行了上述代码时,当view的bounds改变以后shadowPath能够跟随一起改变,而且动画效果相同。


本文个人博客地址: http://wty.im/2016/09/26/let-shadow-path-animate-with-layer-bounds/
Github: https://github.com/wty21cn/

感谢分享,现在都搞github啦,我就懒得弄。好多网友建议我也发git,嫌只发文章 看不过瘾,那么等到我不忙了也发发git demo

让CALayer的shadowPath跟随bounds一起做动画改变-b的更多相关文章

  1. iOS边练边学--CALayer,非根层隐式动画,钟表练习

    一.CALayer UIView之所以能显示在屏幕上,完全是因为他内部的一个图层 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性 ...

  2. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  3. Android使用XML做动画UI

    在Android应用程序,使用动画效果,能带给用户更好的感觉.做动画可以通过XML或Android代码.本教程中,介绍使用XML来做动画.在这里,介绍基本的动画,如淡入,淡出,旋转等. 效果: htt ...

  4. [UWP]用Shape做动画

    相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...

  5. [UWP]用Shape做动画(2):使用与扩展PointAnimation

    上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation. 1. 使用PointAnimation 使用PointAnimation可以让Shape变形,但实际上没看 ...

  6. transition和animation做动画(css动画二)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...

  7. WPF中如何调整TabControl的大小,使其跟随Window的大小而改变?

    多年不写技术博客,手生的很,也不知道大家都关注什么,最近在研究Wpf及3d模型的展示,碰到很多问题,这个是最后一个问题,写出来小结一下...... WPF中如何调整TabControl的大小,使其跟随 ...

  8. 沿着path路径做动画

    沿着path路径做动画 路径 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 16/1/26 ...

  9. 变换CALayer锚点实现模拟时钟的动画

    变换CALayer锚点实现模拟时钟的动画 变换锚点得需要一点理论知识,看下图就能明白:). https://developer.apple.com/library/ios/documentation/ ...

随机推荐

  1. java操作xml的一个小例子

    最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...

  2. Part 14 ng hide and ng show in AngularJS

    ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...

  3. mysql中权限参数说明

    1 授权表范围列的大小写敏感性+--------------+-----+-----+---------+----+-----------+------------+| 列           |Ho ...

  4. 20150225--ASP.NET基础(2)

    一.引用外部样式表或JS,在<head>-</head>标签之间添加: <link href="yangshi.css" type="tex ...

  5. UI2_视图切换ViewController

    // // SubViewController.h // UI2_视图切换 // // Created by zhangxueming on 15/7/3. // Copyright (c) 2015 ...

  6. 【ASP.NET】DataContract序列化,反序列化对象中包含用接口声明的属性时的处理方法

    为此对象添加KnownType属性(Attribute).类型为用接口声明的属性(Property)的所有可能类型.  示例如下: public interface IKey { [DataMembe ...

  7. (转).NET Memory Profiler 使用简介

    1         简介 .Net Memory Profiler(以下简称Profiler):专门针对于.NET程序,功能最全的内存分析工具,最大的特点是具有内存动态分析(Automatic Mem ...

  8. CSS制作彩虹效果

    今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子. 自己之前还没怎么遇到过这个问题,正好来研究一下. <div class="box1"></d ...

  9. JavaScript 弹窗

    JavaScript 弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行 ...

  10. mstsc命令详解

    1: 在xp sp2中用mstsc /console命令可以登录到远程桌面的控制台(和在电脑前以同一用户登录),xp升级到sp3后,不能这样用了.sp3中命令应该换成mstsc /admin. 2: ...