Objective-c 动画

想提高下以后做的应用给客户带去的体验,所以看了几天OC的CAAnimation动画类,也做了几个小案例,下面讲个别案例来做为本文的主要内容。

一:继承结构截图

上面截图中用得最多的类大概就是,CABaseAnimation和 CAKeyframeAnimation,这两个类的最大区别就是对动画的控制,CABaseAnimation 不能在类中增加和控制帧,CAKeyframeAnimation这个类可以在代码中增加和控制帧动画和每帧运行的时间, CAAnimation是所有类的基类,所以它能实现所有类能实现的功能,我做的案例中也用到了这个类, CAAnimationGroup是组动画,可以将其他5动画类的动画,放入它的属性数组,然后增加到动画目标视图的Layer中去,同时实现多个动画效果。

二:案例 

   我这里一共贴两个动画的案例,第一个是CAAniamtion的,第二个是CAAnimationGroup组动画,它里面就包含了

CABaseAnimation和CAKeyframeAnimation

CAAniamtion动画是为抽奖转盘写的,中奖后从底部弹出提示中奖动画视图, 最后一帧动画主要实现对弹出视图的隐藏,X坐标=设备宽度 Y坐标=0

1:封装动画方法

- (CAAnimation*)Animation:(CGFloat)axisX jumpValue:(CGFloat)value  thisType:(int)type {
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path,NULL,axisX,DEVICE_Height);

    if (type==0) {

        CGPathAddLineToPoint(path, NULL, axisX, 283);

    }
    else if(type==1)
    {

        CGPathAddLineToPoint(path, NULL, axisX, 170);

    }
    else if(type==2)
    {

        CGPathAddLineToPoint(path, NULL, axisX, 200);

    }
    else
    {

        CGPathAddLineToPoint(path, NULL, axisX, 283);
    }
  CGPathAddLineToPoint(path, NULL, axisX, 179);
    CGPathAddLineToPoint(path, NULL, axisX, 207);
    CGPathAddLineToPoint(path, NULL, axisX, 187);
    CGPathAddLineToPoint(path, NULL, axisX, 199);
    CGPathAddLineToPoint(path, NULL, axisX, 193);
    CGPathAddLineToPoint(path, NULL, axisX, 195);
    CGPathAddLineToPoint(path, NULL, DEVICE_Width, 0);
     CAKeyframeAnimation *
    animation = [CAKeyframeAnimation
                 animationWithKeyPath:@"position"];
    [animation setPath:path];
    [animation setDuration:1.5];
    [animation setCalculationMode:kCAAnimationLinear];
    NSArray *  arr= [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
                     [NSNumber numberWithFloat:0.12],
                     [NSNumber numberWithFloat:0.24],
                     [NSNumber numberWithFloat:0.36],
                     [NSNumber numberWithFloat:0.48],
                     [NSNumber numberWithFloat:0.60],
                     [NSNumber numberWithFloat:0.72],
                     [NSNumber numberWithFloat:0.5],
                     [NSNumber numberWithFloat:value ],nil];

      [animation setKeyTimes:arr];
    [animation setTimingFunctions:[NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                                   [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], nil]];     animation.delegate=self;
    animation.duration=1.5;
    CFRelease(path);
    return animation;
}

2:调用

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:YES];

     coinViewArray=[[NSMutableArray alloc]init];//这个数组是一个字段,用来保存底部弹出的视图,等动画结束需要将他们移除的
     CGFloat width=DEVICE_Width-60;
    CGFloat everyWidht=(width-60)/4;
     CGFloat theAxisX=30;
    for (int i=0; i<4; i++) {
        UIImageView *scView=[[UIImageView alloc]initWithFrame:CGRectMake(theAxisX+i*20+i*everyWidht, DEVICE_Height, everyWidht, everyWidht)];
        scView.image=[UIImage imageNamed:@"Coin.jpg"];
        scView.layer.cornerRadius=everyWidht/2;
        scView.backgroundColor=[UIColor redColor];
        [coinViewArray addObject:scView];
        CGFloat jumpValue;
        if (i==0) {

            jumpValue=1.2;
        }
        else if(i==1)
        {
             jumpValue=1.1;
              scView.backgroundColor=[UIColor yellowColor];
        }
        else if(i==2)
        {  scView.backgroundColor=[UIColor blueColor];
            jumpValue=1;
        }
        else
        {
             scView.backgroundColor=[UIColor greenColor];
             jumpValue=0.9;

        }

        [scView.layer addAnimation:[self Animation:scView.layer.position.x jumpValue:jumpValue thisType:i]
                            forKey:@"position"];
         [scView.layer setPosition:CGPointMake(scView.frame.origin.x,scView.frame.origin.y)];

        [self addSubview:scView];
    }

    UIImageView     *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LuckyCenterButton"]];
    imgView.backgroundColor=[UIColor redColor];
        imgView.frame = CGRectMake(100, 100, 50, 50);
        [self addSubview:imgView];
}

3:代理(动画结束移除执行动画之后保存在数组里面的视图)

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    for (int i=0; i<coinViewArray.count; i++) {
        UIImageView *imageView=[coinViewArray objectAtIndex:i];

        [imageView removeFromSuperview];
    }
}

CAAnimationGroup主动画,贝塞尔设置关键帧动画的路径,中间实现缩放,透明.....

1:代码

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:YES];

    UIImageView     *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"LuckyCenterButton"]];
    imgView.backgroundColor=[UIColor redColor];
        imgView.frame = CGRectMake(100, 100, 50, 50);
        [self addSubview:imgView];

         //贝塞尔曲线路径
         UIBezierPath *movePath = [UIBezierPath bezierPath];
    // 设置动画的起点坐标
         [movePath moveToPoint:CGPointMake(DEVICE_Width/2-25, DEVICE_Height/2-25)];
//    、CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

    /*  [_pushCoverMudimViewController.view.superview addSubview:_customActionSheet];
     CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
     popAnimation.duration = 0.4;
     popAnimation.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01f, 0.01f, 1.0f)],
     [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.0f)],
     [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9f, 0.9f, 1.0f)],
     [NSValue valueWithCATransform3D:CATransform3DIdentity]];
     popAnimation.keyTimes = @[@0.2f, @0.5f, @0.75f, @1.0f];
     popAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
     [_customActionSheet.layer addAnimation:popAnimation forKey:nil];
     */

         [movePath addQuadCurveToPoint:CGPointMake(DEVICE_Width,0) controlPoint:self.view.center];

       //以下必须导入QuartzCore包
      // 关键帧动画(位置)
         CAKeyframeAnimation * posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
          posAnim.path = movePath.CGPath;
         posAnim.removedOnCompletion = YES;

         //缩放动画
         CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
         scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

                                                                        //动画时的放大缩小倍数
         scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.3, 0.3, 1)];
          scaleAnim.removedOnCompletion = YES;

         //透明动画
         CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
         opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
          opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
         opacityAnim.removedOnCompletion = YES;

         //动画组
         CAAnimationGroup *animGroup = [CAAnimationGroup animation];

        animGroup.animations = [NSArray arrayWithObjects:posAnim, scaleAnim, opacityAnim, nil];
        animGroup.duration = 10;
  //  这里需要对动画的两个属性进行设置,让图层在完成动画后停留在动画后的状态。a
    animGroup.fillMode = kCAFillModeForwards;
    animGroup.removedOnCompletion = NO;
        [imgView.layer addAnimation:animGroup forKey:nil];

}

时间: 2024-10-19 01:26:40

Objective-c 动画的相关文章

使用CAShapeLayer来实现圆形图片加载动画(objective c)实现

使用CAShapeLayer来实现圆形图片加载动画(objective c)实现 by 伍雪颖 效果图 博客地址: 英文链接 中文链接 代码实现: swift实现中文链接有 objective c实现(github)

objective-C 中两种实现动画的方法

第一种方法: [UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:1.25];//动画持续时间 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画速度 [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp//类型 forView:sel

iOS知识树,知识目录(包括对象、Block、消息转发、GCD、运行时、runloop、动画、Push、KVO、tableview,UIViewController、提交AppStore)

本文旨在总结iOS知识网络,该知识网络罗列出常见UIKit,Foundation的对象特点和一些使用经验:文本编辑采用树的形式,对知识点进行罗列,并标注一些使用经验(★)希望对初学者有用或给一些解决疑难杂症者提供思路:某些知识点会深入探讨:通过总结希望站在一个较高平台的角度全观Objective-C.知识树中有些是原创文章,有些则是转载网络上iOS大神的文章.笔者会尽量详细的介绍各个知识点.当然一个人的知识面是相当有限的,在给各位读者提供知识参考的同时,欢迎大家对本文提意见. /->UIView

核心动画笔记

核心动画(Core Animation) 一.Core animation简单介绍 1.Core Animation,中文翻译为核心动画,是一套包含图形绘制,投影,动画的Objective–C类集合.它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能.Core Animation自身并不是一个绘图系统.它只是一个负责在硬件上合成和操纵应用内容的基础构件 2.Core Animation是跨平台的,可以用在Mac

学习动画——变换CGAffineTransform和CATransform3D

CGAffineTransform 仿射变形 cg:Core Graphics核心图形 Affine:仿射的:Transform:改变,使-变形:转换. ----这些东西你注意过么----- NS:next step.一般是指数据,如NSObject.NSString. CG:一般用于渲染,画图等.如CGAffine. UI:一般用于普通的视图和控制器, 在objective-c中,CF.CA.CG.UI各指的是core foundation(核心基础) , core animation(核心动

Objective-C

1.Objective-C语言特性 2.static __block const 3.Object-C的内存管理 4.RunLoop 5.iOS消息传递机制 6.iOS程序生命周期 7.MVC设计模式MVVM 8.UIView CALayer Frame 与bounds 9.根类 NSObject 10.多线程简介 11.数据持久化 12.JSON和XML HTML 自定义报文 13.网络编程 HTTP TCP/IP Socket  ASI AFNetwork 14.AppStore上传 及远程

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最

android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

Android精选源码 轻量级底部导航栏 android手机卫士源码 android实现高仿今日头条源码 一个用Kotlin写的简单漫画App源码 android吐槽项目完整源码 实现可以滑动文字逐渐变色的TabLayout android实现将app隐藏加密功能的源码 android实现横向滚动的卡片堆叠布局 android仿支付宝的咻咻动画源码 android状态栏和沉浸式导航栏管理源码 Android优质博客 从BaseActivity与BaseFragment的封装谈起 这篇博客主要是从

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演