动画

作者: 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"];

相关文章

  • Android回顾--(十六) 动画简析

    动画: 补间动画(Tween动画) 帧动画(Frame动画) 属性动画(Property动画) 补间动画 特点: ...

  • 在山西太原,做个二维动画需要哪些制作流程?

    二维动画有哪些类型? flash动画,课件动画,mg动画,ae动画,GIF动画,手绘动画,网页动画,企业动画,宣传...

  • Android 动画

    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...

  • 动画学习

    动画 分为 组动画,属性动画,渐变动画,其中属性动画包括 普通动画和关键帧动画,其他动弹动画,动画层分为 pres...

  • Android动画

    Android动画分类: 视图动画:补间动画、逐帧动画 属性动画 视图动画 补间动画 可以在xml中定义动画,然后...

  • iOS动画

    iOS动画-从UIView动画说起iOS动画-Transform和KeyFrame动画iOS动画-layout动画...

  • Android动画之视图动画

    分类 Android动画主要包括视图动画和属性动画。视图动画包括Tween动画和Frame动画。Tween动画又包...

  • Android 动画

    android动画分为三种 帧动画,视图动画(补间动画),属性动画逐帧动画 视图动画 属性动画 Window和A...

  • android动画

    动画: 分类:分为视图动画和属性动画,其中视图动画又分为补间动画和逐帧动画。补间动画又分为平移动画、缩放动画、旋转...

  • Android中的动画概述

    动画可以分为三类:View动画,帧动画,属性动画。 一、View动画 1.View动画包括四种:平移动画,缩放动画...

网友评论

      本文标题:动画

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