动画浅析

作者: letaibai | 来源:发表于2016-05-04 09:34 被阅读17次

动画是iOS开发中非常常用的功能,我们可以通过动画做出非常炫目的效果,有趣的界面.下面简单介绍下动画的创建.

layer

每个view都有一个layer层,用来显示图形.layer也可以做动画.

  • 创建layer
    //创建layer
    CALayer *layer = [[CALayer alloc] init];
    //设置layer的阴影颜色
    layer.shadowColor = [UIColor redColor].CGColor;
    //设置layer的阴影偏移量
    layer.shadowOffset = CGSizeMake(10, 10);
    //设置layer的背景色
    layer.backgroundColor = [UIColor redColor].CGColor;
    //设置layer的frame
    layer.frame = CGRectMake(0, 0, 100, 100);
    //设置layer的锚点
    layer.anchorPoint = CGPointZero;
    //设置layer的position
    layer.position = CGPointZero;
    //将layer添加至父控件的layer上
    [_orangeView.layer addSublayer:layer];
注意:在创建layer时,必须设置frame与背景色,否则将无法显示出来.
  • 关于锚点(anchorPoint)与position

    position是决定了layer显示在父控件的哪个位置,默认position是该layer的中心点.

    anchorPoint决定了layer自身显示在position的哪个位置.

不设置position与anchorPoint

设置position为(0,0)

设置锚点为(0,0)

设置锚点和position同时为(0,0)

从上述设置可以看出:
1. position与锚点的默认点为中心点
2. position总是与锚点显示在同一位置
3. layer是否发生偏移有锚点决定

layer的动画设置

  • 我们可以通过设置layer的平移,缩放,旋转等属性来让layer做出动画效果.
    //设置偏移(相对于上一次)
   _layer.transform = CATransform3DTranslate(<#CATransform3D t#>, <#CGFloat tx#>, <#CGFloat ty#>, <#CGFloat tz#>)
    //设置旋转(相对于上一次)
   _layer.transform = CATransform3DRotate(<#CATransform3D t#>, <#CGFloat angle#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat z#>);
    //设置缩放(相对于上一次)
   _layer.transform = CATransform3DScale(<#CATransform3D t#>, <#CGFloat sx#>, <#CGFloat sy#>, <#CGFloat sz#>)
    //设置旋转(相对于原始位置)
   _layer.transform = CATransform3DMakeRotation(<#CGFloat angle#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat z#>)
    //设置缩放(相对于原始位置)
   _layer.transform = CATransform3DMakeScale(<#CGFloat sx#>, <#CGFloat sy#>, <#CGFloat sz#>)
    //设置偏移(相对于原始位置)
   _layer.transform = CATransform3DMakeTranslation(<#CGFloat tx#>, <#CGFloat ty#>, <#CGFloat tz#>)

相关文章

  • 动画浅析

    在谈css3动画加速之前,先考虑几个问题: 1.我们为什么要做动画? 2.为什么推荐css3动画? 带着这两个...

  • 动画浅析

    动画是iOS开发中非常常用的功能,我们可以通过动画做出非常炫目的效果,有趣的界面.下面简单介绍下动画的创建. la...

  • css3动画加速

    前情回顾: 上回我们说到我们推荐了css3动画(动画浅析)。那我们这次来看一下css3的动画原理,以及如何开启硬件...

  • Android动画浅析

    动态的东西往往比静态的更能抓人眼球,随着android5.0的发布,Material Design中对动画的使用越...

  • 浅析Android动画(三)——布局动画

    布局动画用来给ViewGroup添加动画 使用LayoutAnimationController 例如给ListV...

  • 给平淡生活一剂调料

    给平淡生活一剂调料 ——浅析微动画《头朝下的生活》 《头朝下的生活》是一个微定格动画,讲述了一对夫妇生活在重力完全...

  • 浅析UIView动画初步

    效果图片:

  • css过渡动画浅析

    CSS过渡transition transition-property: 过渡属性(默认值为all) transi...

  • RecyclerView动画源码浅析

    本文是RecyclerView源码分析系列第四篇文章,内容主要是基于前三篇文章来叙述的,因此在阅读之前推荐看一下前...

  • Android动画-属性动画底层原理浅析

    之前发表了三篇文章分别描述了三种动画的使用方式,今天我们来了解一下属性动画的底层原理。之前的三篇文章链接:Andr...

网友评论

    本文标题:动画浅析

    本文链接:https://www.haomeiwen.com/subject/vggkrttx.html