核心动画

Posted 2020-08-01

                利用周末时间，边学边写。

一：核心动画

•     1.锚点作用：决定了控件旋转的点（旋转中）以自身左上角的（0，0）
•       2.position:  position坐标和锚点坐标重合  以父控件的左上角为（0,0）
•     3.关于图片的裁剪

    //获取当前的像素和点的比例

    CGFloat scale = [UIScreen mainScreen].scale;

    //获取裁剪范围

    CGFloat W = self.view.bounds.size.width * scale;

    CGFloat H = self.view.bounds.size.height * scale;

    CGRect rect = CGRectMake(0, 0, W, H);

    UIImage *image = [UIImage imageNamed:@"1"];

   //裁剪图片

    CGImageRef imagCG = CGImageCreateWithImageInRect(image.CGImage, rect);

    //新的裁剪图片

    UIImage *imag = [UIImage imageWithCGImage:imagCG];

•   4.核心帧动画 定时器（CADisplayLink）

       /**

     *  @param id 调用方法目标

     *  @param 调用的方法

     */

    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(changeRoate)];

    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

• 通过transform获取角度

      调用方法获取旋转的角度

      CGFloat angle = atan2(_selBtn.transform.b, _selBtn.transform.a);

    将试图旋转最初的位置

    _centerView.transform = CGAffineTransformMakeRotation(-angle);

• 设置控件响应的范围

   

/**

*  寻找合适的View

*/

-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{

 

    CGFloat  viewW =self.bounds.size.width;

    CGFloat  viewH = self.bounds.size.height;

    CGRect rect = CGRectMake(0, viewH/2, viewW, viewH/2);

    //判断触摸点是否在指定的范围内

    if (CGRectContainsPoint(rect, point)) {

        return nil;

    }else{

    

        return [super hitTest:point withEvent:event];

    }

}

 

• 让图片控件显示图片的部分信息

 //contentRect 取值范围0 -1.0 显示图片的范围

    imageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);

    imageV.layer.anchorPoint = CGPointMake(0.5, 1);

    

    UIImageView *imageV1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];

    //contentRect 取值范围0 -1.0 显示图片的范围

    imageV1.layer.anchorPoint = CGPointMake(0.5, 0);

    imageV1.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);

 

•   动画效果

    /**

     *  UIView 封装的弹簧效果方法

     *

     *  @param

     *  @param animateWith Duration  动画持续时间

     *  @param animateWith delay      延迟调用的时间

     *  @param animateWith Damping     动画弹性系数

     *  @param animateWith Velocity    动画开始速度

     *  @param animateWith options     动画风格（渐入，匀速）

     */

   

    [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{

        

    } completion:^(BOOL finished) {

        

    }]

   transform.

 

• 图层的渐变

//图层的颜色渐变

    CAGradientLayer *gradientL = [CAGradientLayer layer];

    //图层的颜色

    gradientL.colors = @[(id)[UIColor clearColor],(id)[UIColor blueColor]];

    //图层的透明度

    gradientL.opacity = 1.0;

 

•   3D动画  CATransform3D

 动画之前显示3D效果，

    CATransform3D transfrom = CATransform3DIdentity;

设置3D效果

    transfrom.m34 = -1 /500.0;

   3D效果的旋转

    transfrom = CATransform3DRotate(<#CATransform3D t#>, <#CGFloat angle#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat z#>)

 

• 复制层 

 ?  复制的子层，先添加动画在复制

  一个帧动画只能对应一个路径，可以改变起点来创建不同的路径。 利用懒加载的方式创建路径就可以解决这类问题

   //复制图层

    CAReplicatorLayer *repL = [CAReplicatorLayer layer];

    //CAReplicatorLayer

    repL.frame = self.bounds;

    [self.layer addSublayer:repL];

    

    CALayer *layer = [CALayer layer];

    //设置动画的反转 （动画执行过程，可以反向重复再次执行）

    layer.autoreverses = YES;

    //复制子图层的个数

    repL.instanceCount = 2;

    //设置复制子图层的偏移量，不包括原始图层，相对于原始图层的偏移量

    repL.instanceTransform =CATransform3DMakeTranslation(<#CGFloat tx#>, <#CGFloat ty#>, <#CGFloat tz#>)

    

    //设置复制图层动画延迟时间

    repL.instanceDelay = 0.1;

    [repL addSublayer:layer];