zoukankan      html  css  js  c++  java
  • CALayer小结-基本使用00-UI进阶

      1 1> CALayer简介
      2 *  PPT简介
      3 
      4 2>  属性和新建图层
      5     01-CALayer01-基本使用
      6     掌握
      7     怎么设置阴影:shadowOpacity,shadowRadius + 解释圆角半径 + 边框 达到效果:太阳发光
      8     比较特殊的View:UIImgeView + UIImageView圆角半径 + 主层和contents + 裁剪 + 阴影无效,达到效果,圆形头像
      9     可以改变图层的形变属性:touchBegin
     10     怎么旋转图层:给三维坐标系的点,与原点形成向量,绕着向量旋转,加动画演示旋转效果
     11     怎么利用KVC改变形变
     12         KVC注意点:
     13          1> 给对象的哪个属性赋值,就写到keyPath里面。
     14          2> value的值一定是属性的类型才行
     15     如何快速二维旋转:ketPath为transform.rotation
     16     缩放注意:z轴不需要缩放,为1就好。
     17     KVC的好处:利用KVC可以快速的进行二维旋转和,宽,高同时缩放.
     18     *讲解顺序 阴影 -> 圆角半径 -> 边框 -> -> UIImageView圆角半径 ->transform -> KVC
     19 
     20     02-CALayer02-新建图层
     21     掌握
     22     怎么显示自己的图层,直接加到控制器view的图层,还得设置位置和尺寸,背景。
     23     怎么给layer设置图片,设置contents:看头文件,contents必须是CGImageRef,UIImage先转CGImageRef在转id。
     24     为什么图层要的图片和颜色使用CoreGraphics框架,不直接用UIKit框架。PPT解释CALayer的疑惑
     25     图层也可以显示,为什么还要UIView,PPT解释CALayer的选择
     26 
     27     *讲解顺序 创建图层 -> 位置 -> 背景 -> 内容 -> CALayer疑惑 -> CALayer的选择
     28 
     29 3> 讲解两个非常重要的属性position和anchorPoint锚点
     30 掌握
     31 什么是position
     32 什么是anchorPoint,他的取值范围,他在图层的哪个位置,
     33 *讲解顺序 PPT解释 -> 注意点:0~1,1表示一个单位。 -> position设置图层的位置 -> 一个图层中很多点,哪个点移动到position.
     34 
     35 4> 隐式动画
     36 03-CALayer03-隐式动画
     37 掌握:
     38 只有非rootCalyer才有隐式动画。
     39 如何学习哪些属性有隐式动画,跳进CALayer头文件,找animatable。
     40 怎么演示隐式动画,点击屏幕就改变属性。
     41 怎么取消隐式动画,每执行一个动画,开启一个事物CATransaction,只要setDisableActions等于YES就好
     42 
     43 *讲解顺序 PPT解释 -> 监听控制器的点击,点一下改变下属性 -> 背景颜色,位置,边框,圆角半径
     44 
     45 5> 时钟-自定义图层
     46 程序思路:
     47 * 了解时钟由什么组成的,使用哪些控件。(UIImgeView,CALayer)
     48 * 为什么不使用UIView,而使用CALayer,需要监听事件吗?
     49 * 现实生活中秒针是怎么旋转的,绕着时钟的中点转,PPT演示,拖一根秒针线条
     50 * 在ios中默认是绕着中心点旋转的,因为锚点默认在图层的中点,要想绕着下边中心点转,需要改变图层锚点的位置。
     51 * 根据锚点,设置position坐标,为时钟的中点。
     52 * 思考秒针旋转的角度,怎么知道当前秒针旋转到哪,当前秒针角度应该由系统时间决定。
     53 * 当前秒针旋转的角度 = 当前秒数 * 每秒转多少°。
     54 1> 计算一秒转多少° 360 * 60 = 6
     55 2> 获取当前秒数,通过日历对象,获取日期组成成分 NSCalendar -> NSDateComponents -> 获取当前秒数
     56 * 每隔一秒,获取最新秒数,更新时钟。
     57 * 分钟一样的做法
     58 * 时钟也一样
     59     1.每一分钟,时钟也需要旋转,60分钟 -> 1小时 - > 30°  ==》 每分钟 30 / 60.0  一分钟时针转0.5°
     60 * 把时针和秒针头尾变尖,设置圆角半径
     61 
     62 6> 核心动画01-CABasicAnimation
     63 *    PPT简介
     64     * ,Core Animation是直接作用在CALayer上的,并非UIView。
     65     *   Core Animation结构
     66     *   Core Animation 使用步骤
     67 *   代码演示
     68     * 创建CALayer
     69     * touchBegin,点击屏幕,做动画
     70     * 创建动画,添加动画到CALayer
     71     * 怎样执行动画?执行动画的本质是改变图层的属性。
     72     * 告诉动画执行怎样的动画?设置动画属性(position)
     73     * 告诉动画属性怎么改变?设置动画属性值改变 toValue fromValue
     74     * duration:动画时长
     75     * 动画有反弹?取消反弹
     76         1> 执行动画完毕不要移除
     77         2> 设置动画填充模式,保持最新的位置。
     78     * rotation:
     79     三维旋转:transform
     80     二维旋转:transform.rotation
     81     * scale
     82     * 设置图层内容(心)
     83     * tovalue:@0.5
     84     * 总结CABasicAnimation只能在两个值之间做动画,怎么多个值做动画,用CAKeyframeAnimation
     85 
     86 7> CAKeyframeAnimation
     87    * 面向view开发,拖一个view
     88    * values:能多个值之间做动画,按照顺序做。
     89    * path
     90    * 动画节奏(timingFunction)
     91    * 代理
     92 
     93    * 图标抖动
     94    * PPT分析,左边旋转右边旋转 -> keyPath(transform.rotation) -> values -> 有点瘸 -> PPT分析 -> values添加一个值
     95 
     96    * CATransition
     97     过度动画又叫转场动画 -> type(转场类型) -> subtype(方向) -> 动画进度
     98     注意:转场动画必须和过度代码放在一块,否则没有效果
     99 
    100    * CAAnimationGroup
    101       同时进行多种动画 -> 平移,旋转,缩放 -> 取消反弹
    102 
    103    * UIView封装的动画
    104     * 什么时候用核心动画,什么时候用UIView动画
    105     * 核心动画的缺点:都是假象,不能真正改变图层属性的值
    106     * 展示和真实的位置不同
    107     * 如果改变位置就用UIView的动画
    108     * 转场动画就用核心动画
    109     * 为什么转场用核心动画?因为UIView的转场动画太少。
    110     * 演示UIView的转场动画
    111     * touchBegin,切换图片
    112 
    113    11-转盘
    114     * 看素材分析控件(2个UIImgeView,1个按钮)
    115     * 自定义HMWheelView(处理转盘功能,以后其他项目直接拷贝就好了)
    116     * xib描述(界面固定,按钮有两种状态的图片)
    117     * 添加按钮,父控件是中间的那个UIImgeView,只有他需要旋转。
    118     * 在awakeFormNib添加,initWithCoder还没连线。
    119     * 按钮的位置:PPT分析,所有按钮的frame都一样,但是根据不同的角标,旋转不同的角度,相对上一个都旋转30°。
    120         1> 设置锚点:旋转是绕着锚点旋转的
    121         2> 设置position
    122         3> 设置尺寸
    123         4> 形变,旋转按钮
    124     * 按钮选中的背景
    125     * 监听按钮点击,允许父控件交互。
    126     * 裁剪大图片
    127     * CGImageCreateWithImageInRect(CGImageRef image, CGRect rect)
    128     * image:裁剪的图片 rect:裁剪的尺寸
    129     * CGImageRef 是 像素,而我们传的是点坐标,转换坐标系
    130     * 旋转转盘:不能用核心动画
    131     * 搞个定时器,每隔一段时间旋转一点角度,一秒旋转45°,每次旋转45/60,因为一秒调用60次,那个方法
    132     * 给外界提供开始旋转和停止旋转两个方法
    133     * 监听开始旋转按钮
    134         1> 不需要和用户交互,用核心动画
    135         2> 快速旋转的时候,暂停定时器,不需要同时旋转,会有问题
    136     * 旋转完之后,需要处理的业务逻辑
    137         1> 允许用户交互
    138         2> 选中按钮回到最上面中间位置,只要旋转按钮才知道自己旋转了多少,反向旋转这么多角度就好了,用make,把之前的旋转全部清空。
    139         3> 2秒后自动旋转
    时光见证了成长,还很无知,我想一点点幼稚转为有知!
  • 相关阅读:
    js代码中引入其他js文件
    SQL Server 创建跨库查詢、修改、增加、删除
    将SQL Server查询导出本地excel(mail发送)
    SQL Server2008 xp_cmdshell啟用
    SQL Server存储过程邮件发送以表格方式发送
    SQL Server2008进程堵塞处理方法
    sql 上舍下舍運用
    怎樣添加設置GridView,CheckBox全選功能
    点击 Button触发事件将GridView1 CheckBox勾选的行添加到GridView2中
    ES6-Proxy,代理
  • 原文地址:https://www.cnblogs.com/foreveriOS/p/5410471.html
Copyright © 2011-2022 走看看