• coreAnimation 使用代码


    记录一下 看注释

    CABasicAnimation:

     self.view.backgroundColor = [UIColor whiteColor];
        /*****formValue tovalue 依照path确认内容*****/
        /*旋转。。。跳跃我闭着眼*/
        UIImageView *rotationViewX = [[UIImageView alloc] initWithFrame:CGRectMake(20, 100, 70, 70)];
        rotationViewX.image = [UIImage imageNamed:@"123.jpeg"];
        [self.view addSubview:rotationViewX];
        //transform.rotation 的 x 、 y 、z 轴旋转
        CABasicAnimation *rotationAnimX  = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        rotationAnimX.beginTime = 0.0;
        rotationAnimX.toValue = @(2*M_PI);
        rotationAnimX.duration = 5.0;
        rotationAnimX.repeatCount = CGFLOAT_MAX;
        [rotationViewX.layer addAnimation:rotationAnimX forKey:@"rotationAnimX"];
        
        /* 移动丫*/
        UIImageView *moveView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 240, 70, 70)];
        moveView.image = [UIImage imageNamed:@"123.jpeg"];
        [self.view addSubview:moveView];
        CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
        // 以中心点为准
        moveAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(35, 240)];
        moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 240)];
        moveAnimation.duration = 2.f;
        moveAnimation.repeatCount = 2;
        // 动画节奏 线性变化
        moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        
        //动画完成后是否以动画形式回到初始值
        moveAnimation.autoreverses = YES;
        
        // 以下两句 控制View动画结束后,停留在动画结束的位置
        [moveAnimation setRemovedOnCompletion:NO];
        //此属性为动画填充模式表示动画完成后的状态是怎样的
        moveAnimation.fillMode = kCAFillModeForwards;
        ///
        [moveView.layer addAnimation:moveAnimation forKey:@"moveAnimation"];
        
        /**内容变化*/
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(150, 310, 70, 70)];
        imageView.image = [UIImage imageNamed:@"123.jpeg"];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.clipsToBounds  = YES;
        [self.view addSubview:imageView];
        // contents  backgroundColor cornerRadius
        CABasicAnimation *contentAnimation = [CABasicAnimation animationWithKeyPath:@"contents"];
        contentAnimation.toValue = (__bridge id _Nullable)([UIImage imageNamed:@"321.jpg"].CGImage);
        contentAnimation.duration = 1.5;
    //    contentAnimation.autoreverses = YES;
        contentAnimation.repeatCount = 1;
        // 测试说明 setRemovedOnCompletion 设置 no kCAFillModeForwards动画后 kCAFillModeBackwards 动画前
        [contentAnimation setRemovedOnCompletion:NO];
        contentAnimation.fillMode = kCAFillModeForwards;
        //
        [imageView.layer addAnimation:contentAnimation forKey:@"contentAnimation"];
        
        /* 比例缩放动画 */
        UIImageView *scaleView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 410, 140, 140)];
        scaleView.image = [UIImage imageNamed:@"321.jpg"];
        [self.view addSubview:scaleView];
        CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
        scaleAnimation.fromValue = @(0.3);
        scaleAnimation.toValue = @(1.3);
        scaleAnimation.autoreverses = YES;
        scaleAnimation.duration = 5.f;
        scaleAnimation.repeatCount = CGFLOAT_MAX;
        [scaleView.layer addAnimation:scaleAnimation forKey:@"scaleAnimation"];
        
        /*划线动画部分*/
        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 500)];
        CAShapeLayer *shapeLayer = [[CAShapeLayer alloc]init];
        //设置描边色,默认无色。
        shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
        //是填充路径的颜色,或不需要填充。默认颜色为不透明的黑色。
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        // 线条宽度
        shapeLayer.lineWidth = 2;
        // lineCap为线端点类型,值有三个类型,分别为kCALineCapButt 、kCALineCapRound 、kCALineCapSquare,默认值为Butt;lineJoin为线连接类型,其值有三个类型,分别为kCALineJoinMiter、kCALineJoinRound、kCALineJoinBevel,默认值是Miter。
        shapeLayer.lineCap = kCALineCapRound;
        shapeLayer.lineJoin = kCALineJoinRound;
        //
        shapeLayer.path = bezierPath.CGPath;
        [self.view.layer addSublayer:shapeLayer];
        //
        CABasicAnimation *lineAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        lineAnimation.duration = 5.0;
        lineAnimation.fromValue = @(0);
        lineAnimation.toValue = @(1);
        lineAnimation.autoreverses = YES;
        lineAnimation.fillMode = kCAFillModeForwards;
        lineAnimation.repeatCount = CGFLOAT_MAX;
        lineAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [shapeLayer addAnimation:lineAnimation forKey:@"lineAnimation"];

     CAKeyframeAnimation:

     UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 500)];
        //
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 70, 80)];
        imageView.clipsToBounds = YES;
        imageView.contentMode = UIViewContentModeScaleToFill;
        imageView.image = [UIImage imageNamed:@"123.jpeg"];
    //    [self.view addSubview:imageView];
        //
        CAKeyframeAnimation *orbitAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        // 时间
        orbitAnim.duration = 5;
        // 路线
        orbitAnim.path = bezierPath.CGPath;
        // 动画的计算模式  ②中我们说要介绍此属性,此属性代表的是计算模式分别有kCAAnimationLinear(线性)kCAAnimationDiscrete(离散即不连续的)kCAAnimationPaced(节奏)kCAAnimationCubic(立方)kCAAnimationCubicPaced(立方节奏)当它被我们设置为kCAAnimationPaced(节奏)或kCAAnimationCubicPaced(节奏立方)的时候我们所设置的③ keyTimes和④ timingFunctions这两个属性会被忽略。
        
        orbitAnim.calculationMode = kCAAnimationPaced;
        //此属性为动画填充模式表示动画完成后的状态是怎样的
        orbitAnim.fillMode = kCAFillModeForwards;
        //动画沿路径旋转方式  kCAAnimationRotateAuto(自动旋转)kCAAnimationRotateAutoReverse(自动倒转)
        orbitAnim.rotationMode = kCAAnimationRotateAutoReverse;
        orbitAnim.repeatCount = CGFLOAT_MAX;
        [imageView.layer addAnimation:orbitAnim forKey:@"orbitAnim"];
        //
        CAShapeLayer *shapeLayer = [CAShapeLayer new];
        shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        shapeLayer.lineWidth = 0.5;
        shapeLayer.lineJoin = kCALineJoinRound;
        shapeLayer.lineCap = kCALineCapRound;
        shapeLayer.path = bezierPath.CGPath;
        [self.view.layer addSublayer:shapeLayer];
        
        UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 70, 80)];
        imageView2.clipsToBounds = YES;
        imageView2.contentMode = UIViewContentModeScaleToFill;
        imageView2.image = [UIImage imageNamed:@"123.jpeg"];
        [self.view addSubview:imageView2];
        
        
        ///
        CAKeyframeAnimation *keyAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
        
        //设置每个阶段的位置(第一个代表的是起始位置,最后一个代表的是结束位置)注意这CGPoint代表的是中点。
        
        keyAnimation.values=@[[NSValue valueWithCGPoint:CGPointMake(0, 200)],[NSValue valueWithCGPoint:CGPointMake(100, 200)],[NSValue valueWithCGPoint:CGPointMake(100, 300)],[NSValue valueWithCGPoint:CGPointMake(200, 300)],[NSValue valueWithCGPoint:CGPointMake(0, 100)]];
        
        keyAnimation.autoreverses= YES;
        
        keyAnimation.removedOnCompletion=NO;
        //设置动画为累加效果 累加 会有位置变化问题
    //    keyAnimation.cumulative= YES;
    //    keyAnimation.fillMode=kCAFillModeBackwards;
        
        keyAnimation.duration=4.0f;
        
        //设置其速度变化的函数
        
        keyAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        
        //设置的是每个阶段速度变化的函数
        
        keyAnimation.timingFunctions=@[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
        
        //动画重复的次数
        
        keyAnimation.repeatCount = CGFLOAT_MAX;
        
        [imageView2.layer addAnimation:keyAnimation forKey:@"asdasd"];

    CASpringAnimation:

    #import "WaterVC.h"
    
    @interface WaterVC ()
    
    @property (nonatomic, strong) CADisplayLink *waveDisplaylink;
    @property (nonatomic, strong) CAShapeLayer  *firstWaveLayer;
    @property (nonatomic, strong) CAShapeLayer  *secondWaveLayer;
    
    
    
    @end
    
    @implementation WaterVC
    {
        
        // 水纹振幅
        CGFloat _waveA;
        // 水纹周期
        CGFloat _waveW;
        // 位移
        CGFloat _offsetX;
        // 当前浪纹高度
        CGFloat _currentK;
        //水纹速度
        CGFloat _waterSpeed;
        //水纹路宽度
        CGFloat _waterWaveWidth;
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        //
        _waveA = 8;
        _waveW =  2 * M_PI/self.view.bounds.size.width;
        _offsetX = 0;
        _currentK = self.view.bounds.size.height / 2 ;
        _waterSpeed = 0.05;
        _waterWaveWidth = self.view.bounds.size.width;
        //
        self.view.backgroundColor = [UIColor whiteColor];
        //
        _firstWaveLayer = [CAShapeLayer new];
        _firstWaveLayer.fillColor = [UIColor colorWithRed:73/255.0 green:142/255.0 blue:178/255.0 alpha:0.5].CGColor;
        _firstWaveLayer.strokeStart = 0.0;
        _firstWaveLayer.strokeEnd = 0.8;
        [self.view.layer addSublayer:_firstWaveLayer];
        //
        _secondWaveLayer = [[CAShapeLayer alloc] init];
        _secondWaveLayer.fillColor = [UIColor colorWithRed:73/255.0 green:142/255.0 blue:178/255.0 alpha:0.5].CGColor;
        _secondWaveLayer.strokeStart = 0.0;
        _secondWaveLayer.strokeEnd = 0.8;
        [self.view.layer addSublayer:_secondWaveLayer];
        //
        _waveDisplaylink =  [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave)];
        [_waveDisplaylink addToRunLoop:NSRunLoop.currentRunLoop forMode:NSRunLoopCommonModes];
    }
    //正弦型函数解析式:y=Asin(ωx+φ)+b
    //各常数值对函数图像的影响:
    //φ:决定波形与X轴位置关系或横向移动距离(左加右减)
    //ω:决定周期(最小正周期T=2π/∣ω∣)
    //A:决定峰值(即纵向拉伸压缩的倍数)
    //b:表示波形在Y轴的位置关系或纵向移动距离(上加下减)
    
    - (void)getCurrentWave{
        _offsetX = _offsetX + _waterSpeed;
        CGMutablePathRef path = CGPathCreateMutable();
        CGFloat y = _currentK;
        CGPathMoveToPoint(path, NULL, 0, y);
        for (int i=0; i<(int)_waterWaveWidth+1; i++) {
            y = _waveA * sin(_waveW * i + _offsetX) + _currentK;
            CGPathAddLineToPoint(path, NULL, i, y);
        }
        CGPathAddLineToPoint(path, NULL,  _waterWaveWidth, self.view.bounds.size.height);
        CGPathAddLineToPoint(path, NULL,  0, self.view.bounds.size.height);
        CGPathCloseSubpath(path);
        _firstWaveLayer.path = path;
        //
        CGMutablePathRef path2 = CGPathCreateMutable();
        CGFloat y2 = _currentK;
        CGPathMoveToPoint(path2, NULL, 0, y);
        for (int i=0; i<(int)_waterWaveWidth+1; i++) {
            //
            y2 = _waveA * sin(_waveW * i + _offsetX - _waterWaveWidth/2 ) + _currentK;
            CGPathAddLineToPoint(path2, NULL, i, y2);
        }
        CGPathAddLineToPoint(path2, NULL,  _waterWaveWidth, self.view.bounds.size.height);
        CGPathAddLineToPoint(path2, NULL,  0, self.view.bounds.size.height);
        CGPathCloseSubpath(path2);
        _secondWaveLayer.path = path2;
    }

    水纹:

     UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 200, 50, 50)];
        imageView.image = [UIImage imageNamed:@"321.jpg"];
        [self.view addSubview:imageView];
        //
        CASpringAnimation *springAnim = [CASpringAnimation animationWithKeyPath:@"position.x"];
        //质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大
        springAnim.mass = 1;
        //阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
        springAnim.damping = 2;
        //刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
        springAnim.stiffness = 100;
        //初始速率,动画视图的初始速度大小 Defaults to zero
        //速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
        springAnim.initialVelocity = 0;
        //
        springAnim.fromValue = @(imageView.layer.position.x);
        springAnim.toValue = @(imageView.layer.position.x +100);
        springAnim.repeatCount = CGFLOAT_MAX;
        // settlingDuration 估算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算
        springAnim.duration = springAnim.settlingDuration;
        [imageView.layer addAnimation:springAnim forKey:@"springAnim"];

    CAEmitterLayer&CAEmitterLayer

    #import "FireAnimVC.h"
    
    @interface FireAnimVC ()
    
    @property (nonatomic, strong) CAEmitterLayer *fireEmitter;
    @property (nonatomic, strong) UIImage   *image;
    
    @property (nonatomic, strong) CAEmitterLayer *testEmitter;
    
    
    @end
    
    @implementation FireAnimVC
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.clipsToBounds = YES;
        //
        [self showFire];
        [self emitterTest];
    
    }
    
    - (void)emitterTest{
        _testEmitter = [CAEmitterLayer layer];
        //
        _testEmitter.borderColor    = [UIColor redColor].CGColor;
        _testEmitter.borderWidth    = 1.0f;
        
        // 喷射位置
        _testEmitter.position       = CGPointMake(self.view.frame.size.width/2.0, 0);
        
        // 发射源的尺寸
        _testEmitter.emitterSize    = CGSizeMake(self.view.frame.size.width, 1);
        
        //是粒子从什么形状发射出来,它并不是表示粒子自己的形状,
        //    NSString * const kCAEmitterLayerPoint;      ////    NSString * const kCAEmitterLayerLine;               // 直线
    //    NSString * const kCAEmitterLayerRectangle;      // 矩形
    //    NSString * const kCAEmitterLayerCircle;          // 圆形
    //    NSString * const kCAEmitterLayerCuboid;        // 3D rectangle
    //    NSString * const kCAEmitterLayerSphere;   // 3D circle
        _testEmitter.emitterShape   = kCAEmitterLayerLine;
        
        //决定了粒子的发射模式。
    //    NSString * const kCAEmitterLayerPoints;  // 顶点
    //    NSString * const kCAEmitterLayerOutline;     // 轮廓,即边上
    //    NSString * const kCAEmitterLayerSurface;   // 表面,即图形的面积内
    //    NSString * const kCAEmitterLayerVolume;    // 容积,即3D图形的体积内
        
        _testEmitter.emitterMode    = kCAEmitterLayerSurface;
    
        // 发射器的渲染 重叠效果
    //    renderMode,控制着在视觉上粒子图片是如何混合的。你可能已经注意到了示例中我们把它设置为kCAEmitterLayerAdditive,它实现了这样一个效果:合并例子重叠部分的亮度使得看上去更亮
        _testEmitter.renderMode = kCAEmitterLayerAdditive;
        
        
        //
        CAEmitterCell *particle = [CAEmitterCell emitterCell];
        //
        particle.name = @"snow";
        // 静态图片
        particle.contents = (id)_image.CGImage;
        
        //每秒产生的粒子数量
        particle.birthRate = 20.0f;
        //粒子在系统上存在的时间
        particle.lifetime = 10.f;
        
        /*********横向速度*******/
        // 运动速度
        particle.velocity = 1.f;
        //速度浮动
        particle.velocityRange = 10.f;
        
        
        
        /************  加速度  *************/
        particle.yAcceleration = 15.f;
    //    particle.xAcceleration = 15.f;
    //    particle.zAcceleration = 15.f;
        
        
        /*******  粒子发射夹角    *****/
        //emissionLongtitude决定了粒子飞行方向跟水平坐标轴(x轴)之间的夹角,默认是0
        particle.emissionLongitude = M_PI/2.0;
        //emissionRange则决定了粒子的发散范围,同样是一个弧度值(radians),表示粒子在沿着emissionLongtitude方向所形成的顶角为2倍emissionRange的圆锥范围内发散
    //    particle.emissionRange = M_PI_4;
        
        
        /****    粒子自转角度     ****/
        //弧度速度
    //    particle.spin =
        //范围
    //    particle.spinRange =
        
        /********    等比缩放   ******/
        particle.scale = 0.5;
        particle.scaleRange = 0.1;
        particle.scaleSpeed = 0.02;
        
        /********       设置颜色        *******/
        //结合contents内容的颜色来改变我们的CAEmitterCell
        particle.color = [UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:1.0].CGColor;
        
    //    是粒子对应颜色的component的初始取值范围
    //    particle.redRange = 1.f;
    //    particle.greenRange = 1.f;
    //    particle.blueRange = 1.f;
    
    //    表示对应的颜色的变化速度
    //    particle.redSpeed  = .1f;
    //    particle.greenSpeed = .1f;
    //    particle.blueSpeed  = .1f;
        
        //透明色
        particle.alphaRange = .8f;
        particle.alphaSpeed = -.1f;
        
        //
        _testEmitter.emitterCells = @[particle];
        [self.view.layer addSublayer:_testEmitter];
    }
    
    - (void)showFire{
        //
        _image = [UIImage imageNamed:@"Fire.png"];
        //
        self.view.backgroundColor = [UIColor blackColor];
        //
        _fireEmitter = [CAEmitterLayer layer];
        //    _fireEmitter.emitterSize = CGSizeMake(32, 32);
        //    _fireEmitter.emitterMode = kCAEmitterLayerOutline;
        // 发射位置
        _fireEmitter.emitterPosition = self.view.center;
        // 辐射器的形状
        _fireEmitter.emitterShape= kCAEmitterLayerCircle;
        // 发射器的渲染
        _fireEmitter.renderMode = kCAEmitterLayerAdditive;
        
        //
        CAEmitterCell *fire = [CAEmitterCell emitterCell];
        // 粒子的创建速率,默认为1/s
        fire.birthRate = 200;
        // 粒子存活时间
        fire.lifetime = 0.2;
        // 粒子的生存时间容差
        fire.lifetimeRange = 0.5;
        // 粒子的颜色
        fire.color = [UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1].CGColor;
        //
        fire.contents = (id)[_image CGImage];
        //
        fire.name = @"fire";
        // 粒子的速度
        fire.velocity = 35;
        // 粒子动画的速度容差
        fire.velocityRange = 10;
        // 粒子在xy平面的发射角度
        fire.emissionLongitude = M_PI +M_PI_2;
        // 粒子发射角度的容差
        fire.emissionRange = M_PI_2;
        // 缩放速度
        fire.scaleSpeed = 0.3;
        //
        
        _fireEmitter.emitterCells = @[fire];
        [self.view.layer addSublayer:_fireEmitter];
    }

    好好看 这前面是张照片

  • 相关阅读:
    移动端支付6位密码框
    移动端canvas刮刮乐
    原生ajax请求json数据
    canvas绘制video
    移动端阻止默认长按选中文本和弹出菜单、点击阴影
    前端移动端相关的代码(pc端与移动端自动切换)
    统一管理网站中的某些需要定期更新的时间届数 倒计时 ( 换届 之类的网站)( 兼容ie )
    Hbuilder 常用快捷键汇总
    文件找不到,路径错误问题
    图片清晰度问题
  • 原文地址:https://www.cnblogs.com/chaochaobuhuifei55/p/9019224.html
Copyright © 2020-2023  润新知