动画

作者: Dove_Q | 来源:发表于2016-10-21 17:30 被阅读13次

    隐式动画

            //开始动画事务
            [CATransaction begin];
            //动画执行时间
            [CATransaction setAnimationDuration:5];
            //设置动画代码块
            layer.backgroundColor = [UIColor greenColor].CGColor;
            //动画完成时机
            [CATransaction setCompletionBlock:^{
                NSLog(@"动画完成");
            }];
            //提交动画事务,begin和commit之间改变的CALayer属性,如果为Animatable,就会执行动画
            [CATransaction commit];
    

    CABaseAnimation

            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
            //动画执行时间
            animation.duration = 1;
            //执行时间
            animation.fromValue = @0;
            //目标值
            animation.toValue = @1;
            //动画时间的消耗曲线
            //1.慢-快-慢
            animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
            //2.默认为匀速
            animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
            //贝兹曲线
            animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:.25 :.1 :.25 :.1];
            [shaperLayer addAnimation:animation forKey:@"animation"];
    

    坐标绘制

    绘制工具: Paint Code

        CAShapeLayer *shaperLayer = [CAShapeLayer layer];
        shaperLayer.strokeColor = [UIColor redColor].CGColor;
        shaperLayer.frame = self.view.frame;
        shaperLayer.fillColor = [UIColor clearColor].CGColor;
        shaperLayer.lineWidth = 10;
        [self.view.layer addSublayer:shaperLayer];
        
        //// Star Drawing
        UIBezierPath* starPath = UIBezierPath.bezierPath;
        [starPath moveToPoint: CGPointMake(203, 122)];
        [starPath addLineToPoint: CGPointMake(234.74, 173.72)];
        [starPath addLineToPoint: CGPointMake(288.6, 191.44)];
        [starPath addLineToPoint: CGPointMake(254.36, 241.13)];
        [starPath addLineToPoint: CGPointMake(255.9, 303.81)];
        [starPath addLineToPoint: CGPointMake(203, 282.8)];
        [starPath addLineToPoint: CGPointMake(150.1, 303.81)];
        [starPath addLineToPoint: CGPointMake(151.64, 241.13)];
        [starPath addLineToPoint: CGPointMake(117.4, 191.44)];
        [starPath addLineToPoint: CGPointMake(171.26, 173.72)];
        [starPath closePath];
        
        shaperLayer.path = starPath.CGPath;
    

    CAKeyFrameAnimation

        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
        //动画执行时间
        animation.duration = 5;
        id color1 = (__bridge id)[UIColor redColor].CGColor;
        id color2 = (__bridge id)[UIColor greenColor].CGColor;
        id color3 = (__bridge id)[UIColor blueColor].CGColor;
        //关键帧的值
        animation.values = @[color1,color2,color3];
        //关键帧出现的时刻
        animation.keyTimes = @[@0.2,@0.6,@0.8];
        [layer addAnimation:animation forKey:@""];
    
        CALayer *demoLayer = [CALayer layer];
        demoLayer.backgroundColor = [UIColor redColor].CGColor;
        demoLayer.frame = CGRectMake(100, 100, 30, 30);
        [self.view.layer addSublayer:demoLayer];
    
        
        CAShapeLayer *shaperLayer = [CAShapeLayer layer];
        shaperLayer.strokeColor = [UIColor greenColor].CGColor;
        shaperLayer.frame = self.view.frame;
        shaperLayer.fillColor = [UIColor clearColor].CGColor;
        shaperLayer.lineWidth = 4;
        [self.view.layer addSublayer:shaperLayer];
        
        CAKeyframeAnimation *aniamtion = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        aniamtion.duration = 5;
        
        //// Bezier Drawing
        UIBezierPath* bezierPath = UIBezierPath.bezierPath;
        [bezierPath moveToPoint: CGPointMake(59.5, 82.5)];
        [bezierPath addCurveToPoint: CGPointMake(320.5, 119.5) controlPoint1: CGPointMake(59.5, 82.5) controlPoint2: CGPointMake(303.5, -47.5)];
        [bezierPath addCurveToPoint: CGPointMake(45.5, 675.5) controlPoint1: CGPointMake(337.5, 286.5) controlPoint2: CGPointMake(-27.5, 543.5)];
        [bezierPath addCurveToPoint: CGPointMake(267.5, 646.5) controlPoint1: CGPointMake(118.5, 807.5) controlPoint2: CGPointMake(209.5, 754.5)];
        shaperLayer.path = bezierPath.CGPath;
        
        //设置动画的路径
        aniamtion.path = bezierPath.CGPath;
        //让图像的头部随着动画变化而变化
        aniamtion.rotationMode = kCAAnimationRotateAuto;
        //设置动画自动回到回复为YES,且完成之后回到原点
        aniamtion.autoreverses = YES;
        //动画执行次数为2次
        aniamtion.repeatCount = 2;
        //表现层停留在动画完成状态
        aniamtion.fillMode = kCAFillModeForwards;
        //动画完成后不移除,一直处于最后状态
        aniamtion.removedOnCompletion = NO;
        
        [demoLayer addAnimation:aniamtion forKey:@""];
    

    CAAnimationGroup

    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[animation, animation1];
    group.duration = 10;
    [_animationLayer addAnimation:group forKey:@"group"];
    

    切换动画CATransition(酷炫效果,网上搜索)

    CATransition *transition = [CATransition animation];
    //动画类型
     transition.type = kCATransitionReveal;
    // 子类型
    transition.subtype = kCATransitionFromBottom;
    transition.duration = 10;
    [_animationLayer addAnimation:transition forKey:@"xx"];
    

    相关文章

      网友评论

          本文标题:动画

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