iOS动画和特效(一)UIView动画和CoreAnimation

来源:互联网 发布:武汉有哪些出版社知乎 编辑:程序博客网 时间:2024/04/30 03:22

UIView的方法中有几个易用的静态方法可以做出动画效果,分别是UIView.beginAnimations() -> UIView.commitAnimations() 和UIView.animateWithDuration()方法 我们以一个UIView,每点击一次向右移动100,变色,加速运动这个简单的动效作为例子。 

使用UIView.beginAnimations() -> UIView.commitAnimations()实现

        //开始动画配置        UIView.beginAnimations("view1Animation", context: nil)        //运动时间        UIView.setAnimationDuration(0.2)        //设置运动开始和结束的委托 animationDidStart and animationDidStop        UIView.setAnimationDelegate(self)        /*            缓动方式            EaseInOut // slow at beginning and end            EaseIn // slow at beginning            EaseOut // slow at end            Linear        */        UIView.setAnimationCurve(.EaseIn)        //位置运动        theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)        //颜色渐变        theView.backgroundColor = UIColor.greenColor()        //透明度渐变        theView.alpha = 0.5        //动画开始        UIView.commitAnimations()

使用更简单的和UIView.animateWithDuration()实现
UIView.animateWithDuration(0.2, delay: 0.5, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in                //位置运动                theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)                //颜色渐变                theView.backgroundColor = UIColor.greenColor()                //透明度渐变                theView.alpha = 0.5            }) { (isCompletion) -> Void in                NSLog("completion")        }

animateWithDuration的方法有4个从载方法,参数不同,根据需要调用。其中最后一个代理一个阻尼系数和回弹系数,使用他可以做出更加逼真的运动效果
 //usingSpringWithDamping 阻尼,范围0-1,阻尼越接近于0,弹性效果越明显     UIView.animateWithDuration(0.2, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 1, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in         theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)        }, completion: nil)

本节介绍的几个方法,已经可以做出许多的简单动画效果了,这说明apple对高级别对象的动画api封装做的很不错。代码见QuickExampleViewController.swift

Core Animation的类图

基本动画 CABasicAnimation


还记得上一节简单的动画吗,一个uiview向左平移100,这节我们使用CABasicAnimation实现相同的效果


CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。

CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。

CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。

CATransition:转场动画,主要通过滤镜进行动画效果设置。

CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。

CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。

基本动画 CABasicAnimation

CABasicAnimation实现一个UIView向左平移100

    UIView *animView =[UIView new];    animView.backgroundColor = [UIColor redColor];    animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);    [self.view addSubview:animView];        CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];    [anim setFromValue:[NSValue valueWithCGPoint:CGPointMake(100, 0)]];    [anim setDuration:0.2];    anim.repeatCount = 1;        //这两个属性若不设置,动画执行后回复位    anim.removedOnCompletion = false;    anim.fillMode = kCAFillModeForwards;        [animView.layer addAnimation:anim forKey:nil];

其他注意几个地方

1:keyPath用于区分BasicAnimation动画类型

 /*        可选的KeyPath        transform.scale = 比例轉換        transform.scale.x        transform.scale.y        transform.rotation = 旋轉        transform.rotation.x        transform.rotation.y        transform.rotation.z        transform.translation        transform.translation.x        transform.translation.y        transform.translation.z        opacity = 透明度        margin        zPosition        backgroundColor 背景颜色        cornerRadius 圆角        borderWidth        bounds        contents        contentsRect        cornerRadius        frame        hidden        mask        masksToBounds        opacity        position        shadowColor        shadowOffset        shadowOpacity        shadowRadius    */

2:动画执行后不恢复原位

//这两个属性若不设置,动画执行后回复位baseAnimation.removedOnCompletion = falsebaseAnimation.fillMode = kCAFillModeForwards

CABasicAnimation 组合动画

组合动画就是把一组CABasicAnimation组合使用,我们以组合移动、旋转、缩放特效为例


    UIView *animView =[UIView new];    animView.backgroundColor = [UIColor redColor];    animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);    [self.view addSubview:animView];        CABasicAnimation *leftAnim = [CABasicAnimation animationWithKeyPath:@"position"];    [leftAnim setToValue:[NSValue valueWithCGPoint:CGPointMake(animView.layer.position.x+100, animView.layer.position.y)]];    //x轴旋转动画    CABasicAnimation *xAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];    [xAnim setByValue:[NSNumber numberWithDouble:M_PI*500]];    xAnim.duration = 1.5;        //y轴旋转动画    CABasicAnimation *yAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];    [yAnim setByValue:[NSNumber numberWithDouble:M_PI*200]];        //缩放动画    CABasicAnimation *sAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];    // 动画选项设定    sAnim.autoreverses = YES; //动画结束时执行逆动画    sAnim.fromValue = [NSNumber numberWithDouble:0.1];//开始的倍率    sAnim.toValue = [NSNumber numberWithDouble:1.5];//结束的倍率        CAAnimationGroup *animGroup = [CAAnimationGroup animation];        animGroup.duration = 3.0;    animGroup.repeatCount = 1;    animGroup.animations = @[xAnim,yAnim,sAnim,leftAnim];     //这两个属性若不设置,动画执行后回复位    animGroup.removedOnCompletion = false;    animGroup.fillMode = kCAFillModeForwards;    animGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//加速运动    animGroup.delegate = self;    [animView.layer addAnimation:animGroup forKey:nil];

关键帧动画 CAKeyframeAnimation

关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各个状态间动画如何进行则由系统自动运算补充(每两个关键帧之间系统形成的动画称为“补间动画”),这种动画的好处就是开发者不用逐个控制每个动画帧,而只要关心几个关键帧的状态即可。

关键帧动画和基本动画也很相似,通过keyPath设置动画类型,才对齐进行一组关键值的设定。数据变化也有2种形式,一种是关键点,一种是路径,比如实例中的按一个贝塞尔弧移动view。

  UIView *animView =[UIView new];    animView.backgroundColor = [UIColor redColor];    animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);    [self.view addSubview:animView];        UIPanGestureRecognizer *tap = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(anim:)];        [animView addGestureRecognizer:tap];

- (void)anim:(UIPanGestureRecognizer *)tap{    CAKeyframeAnimation *keyframeAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];        //线段的位置移动    //  keyframeAnim.values = @[[NSValue valueWithCGPoint:CGPointMake(10, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 100)],[NSValue valueWithCGPoint:CGPointMake(106, 210)],[NSValue valueWithCGPoint:CGPointMake(106, 410)],[NSValue valueWithCGPoint:CGPointMake(300, 310)]];        //弧线位置移动    CGMutablePathRef mutablePath = CGPathCreateMutable();    CGPathMoveToPoint(mutablePath, nil, 50, 50);    CGPathAddCurveToPoint(mutablePath, nil, 50, 50, 700, 300, 30, 500);    keyframeAnim.path = mutablePath;        keyframeAnim.duration = 0.3;        [tap.view.layer addAnimation:keyframeAnim forKey:nil];}

关键帧动画其他可以设置的参数

//keyTimes:各个关键帧的时间控制//caculationMode:动画计算模式。kCAAnimationLinear: 线性模式,默认值kCAAnimationDiscrete: 离散模式kCAAnimationPaced:均匀处理,会忽略keyTimeskCAAnimationCubic:平滑执行,对于位置变动关键帧动画运行轨迹更平滑kCAAnimationCubicPaced:平滑均匀执行

转场效果

转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤:

  • 创建转场动画
  • 设置转场类型、子类型(可选)及其他属性
  • 设置转场后的新视图并添加动画到图层

场的效果transfer.type有很多选项,主要选项有

kCATransitionFade:淡入淡出,默认效果kCATransitionMoveIn:新视图移动到就是图上方kCATransitionPush:新视图推开旧视图kCATransitionReveal:移走旧视图然后显示新视图//苹果未公开的私有转场效果cube:立方体suckEffect:吸走的效果oglFlip:前后翻转效果rippleEffect:波纹效果pageCurl:翻页起来pageUnCurl:翻页下来cameraIrisHollowOpen:镜头开cameraIrisHollowClose:镜头关

除了淡入淡出以外,其余三个效果都存在方向性,所以还有个.subType可以设置方向类型
kCATransitionFromRight:kCATransitionFromLeft:kCATransitionFromTop:kCATransitionFromBottom:




0 0