IOS 之动画知识

川长思鸟来 2022-09-18 00:11 163阅读 0赞

CGAffineTransform实际上是一个矩阵, 可以利用这个结构来进行移动旋转等等一些二维动画操作

https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGAffineTransform/Reference/reference.html官方的文档

CGAffineTransform CGAffineTransformMake (
       CGFloat a,
       CGFloat b,
       CGFloat c,
       CGFloat d,
       CGFloat tx,
       CGFloat ty
    );

### Creating an Affine Transformation Matrix  构建的方法 ###

*  `CGAffineTransformMake`
 *  `CGAffineTransformMakeRotation`
 *  `CGAffineTransformMakeScale`
 *  `CGAffineTransformMakeTranslation`

### Modifying Affine Transformations  从一个已经构建好的类型来进行动画操作 ###

*  `CGAffineTransformTranslate`
 *  `CGAffineTransformScale`
 *  `CGAffineTransformRotate`
 *  `CGAffineTransformInvert`
 *  `CGAffineTransformConcat`

例如可以这样构建一个放大缩小的动画

CGAffineTransform f = CGAffineTransformMakeScale(2,2)

xx.transform = f;

CAAnimatione采用了CAMediaTiming协议,可以调整时间,包括持续时间,速度,重复次数;采用了CAAction协议,可以通过响应动作的方式来显示动画.  
  
CAAnimation的一些派生类:  
CATransition 提供渐变效果:(推拉push效果,消退fade效果,揭开reveal效果)  
CAAnimationGroup 允许多个动画同时播放  
CABasicAnimation 提供了对单一动画的实现  
CAKeyframeAnimation 关键桢动画,可以定义行动路线  
CAConstraint 约束类,在布局**管理**器类中用它来设置属性  
CAConstraintLayoutManager 约束布局管理器,是用来将多个CALayer进行布局的.各个CALayer是通过名称来区分,而布局属性是通过CAConstraint来设置的.  
CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务.

**CATransition** 类

CATransition实现了**layer**的过渡动画。也就是说是控制**layer**的过渡动画类。

我们可以通过CATransition来实现我们特定的过渡动画。也可以通过一个自定义的CIFilter实体来实现过渡动画。

**CATransition**相关属性

endProgress

@property float endProgress

定义过渡的结束点

结束点的值必须大于或者等于开始点。

默认值为1.0。

startProgress

@property float startProgress

定义过度的开始点

开始点的值必须小于或者等于结束点。

默认值为0.0。

这两个属性是float类型的。

可以控制动画进行的过程，可以让动画停留在某个动画点上，值在0.0到1.0之间。endProgress要大于等于startProgress。

比如:立方体转，可以设置endProgress= 0.5，让动画停留在整个动画的特定位置(停止在旋转一般的状态)。

filter

@property(retain) CIFilter \*filter

为动画添加一个可选的滤镜。

如果指定，那么指定的filter必须同时支持x和y，否则该filter将不起作用。

默认值为nil。

如果设置了filter，那么，为layer设置的type和subtype属性将被忽略。

该属性只在iOS 5.0以及以后版本被支持。

subtype

@property(copy) NSString \*subtype

指定预定义的过渡方向。

默认为nil。

如果指定了filter，那么该属性无效。

预定义的过渡方向为：

NSString \* const kCATransitionFromRight;

NSString \* const kCATransitionFromLeft;

NSString \* const kCATransitionFromTop;

NSString \* const kCATransitionFromBottom;

分别表示：过渡从右边、左边、顶部、底部 开始。

type

@property(copy) NSString \*type

指定预定义的过渡效果。

默认为kCATransitionFade

如果指定了filter，那么该属性无效。

预定义的过渡效果：

NSString \* const kCATransitionFade;

NSString \* const kCATransitionMoveIn;

NSString \* const kCATransitionPush;

NSString \* const kCATransitionReveal;

分别表示：淡出、覆盖原图、推出、从底部显示。

注意：

还有很多私有API效果，使用的时候要小心，可能会导致app审核不被通过（悲剧啊，为啥有却不让用啊！好东西不应该被束之高阁！）：

fade     //交叉淡化过渡(不支持过渡方向)

push     //新视图把旧视图推出去

moveIn   //新视图移到旧视图上面

reveal   //将旧视图移开,显示下面的新视图

cube     //立方体翻滚效果

oglFlip  //上下左右翻转效果

suckEffect   //收缩效果，如一块布被抽走(不支持过渡方向)

rippleEffect //滴水效果(不支持过渡方向)

pageCurl     //向上翻页效果

pageUnCurl   //向下翻页效果

cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向)

cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)

事务管理(Transactions)  
事务分两种:  
1.隐式事务(implicit transaction)  
除显式事务外,任何对于CALayer属性的修改,都是隐式事务.这样的事务会在run-loop中被提交.  
如:  
theLayer.opacity = 0.0;  
theLayer.zPosition = -200;  
theLayer.position = CGPointMake(0.0, 0.0);  
  
2.显式事务(explicit transaction)  
a. 通过明确的调用begin,commit来提交动画.优点是可以同时修改多个Layer的属性.  
如:  
\[CATransaction begin\];  
\[CATransaction setValue:(id)kCFBooleanTrue  
                               forKey:kCATransactionDisableActions\];  
\[aLayer removeFromSuperlayer\];  
\[CATransaction commit\];  
  
b.可以重置持续时间  
可以在begin,commit对中临时修改动画持续时间.  
\[CATransaction begin\]  
\[CATransaction setValue:\[NSNumber numberWithFloat:10.0f\]  
                               forKey:kCATransactionAnimationDuration\];  
theLayer.zPosition = 200.0;  
theLayer.opacity = 0.0;  
\[CATransaction commit\];  
  
c.事务可以嵌套.  
如:  
//第一层嵌套  
\[CATransaction begin\];  
\[CATransaction setValue:\[NSNumber numberWithFloat:2.0f\]  
                             forKey:kCATransactionAnimationDuration\];  
theLayer.position = CGPointMake(0.0, 0.0);  
//第二层嵌套  
\[CATransaction begin\];  
\[CATransaction setValue:\[NSNumber numberWithFloat:5.0f\]  
                               forKey:kCATransactionAnimationDuration\];  
theLayer.zPosition = 200.0;  
theLayer.opacity = 0.0;  
\[CATransaction commit\];  
\[CATransaction commit\];  
  
  
  
布局管理器示例如下:  
//创建和设置一个布局管理器  
theLayer.layoutManager = \[CAConstraintLayoutManager layoutManager\];  
  
//创建layerA  
CALayer \*layerA = \[CALayer layer\];  
layerA.name = @"layerA";  
  
//设置layerA的中点位置等于超类的中点位置  
\[layerA addConstraint:\[CAConstraint constraintWithAttribute:kCAConstraintMidY  
                                                                                       relativeTo:@"superLayer"  
                                                                                       attribute:kCAConstraintMidY\]\];  
  
\[layerA addConstraint:\[CAConstraint constraintWithAttribute:kCAConstraintMidX  
                                                                                       relativeTo:@"superLayer"  
                                                                                       attribute:kCAConstraintMidX\]\];  
\[theLayer addSublayer:layerA\];  
  
//创建layerB  
CALayer \*layerB = \[CALayer layer\];  
layerB.name = @"layerB";  
  
//设置layerB的宽度等于layerA的宽度  
\[layerA addConstraint:\[CAConstraint constraintWithAttribute:kCAConstraintWidth  
                                                                                       relativeTo:@"LayerA"  
                                                                                       attribute:kCAConstraintWidth\]\];  
  
\[layerA addConstraint:\[CAConstraint constraintWithAttribute:kCAConstraintMidX  
                                                                                       relativeTo:@"layerA"  
                                                                                       attribute:kCAConstraintMidX\]\];

\[theLayer addSublayer:layerB\];

CATransform3D 这个结构可以实现3D效果结构如下

struct CATransform3D  
\{  
CGFloat m11（x缩放）, m12（y切变）, m13（）, m14（）;  
CGFloat m21（x切变）, m22（y缩放）, m23（）, m24（）;  
CGFloat m31（）, m32（）, m33（）, m34（透视效果，要操作的这个对象要有旋转的角度，否则没有效果。当然,z方向上得有变化才会有透视效果）;  
CGFloat m41（x平移）, m42（y平移）, m43（z平移）, m44（）;  
\};