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

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 = false
baseAnimation.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:均匀处理,会忽略keyTimes
kCAAnimationCubic:平滑执行,对于位置变动关键帧动画运行轨迹更平滑
kCAAnimationCubicPaced:平滑均匀执行

转场效果

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

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

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

kCATransitionFade:淡入淡出,默认效果
kCATransitionMoveIn:新视图移动到就是图上方
kCATransitionPush:新视图推开旧视图
kCATransitionReveal:移走旧视图然后显示新视图

//苹果未公开的私有转场效果
cube:立方体
suckEffect:吸走的效果
oglFlip:前后翻转效果
rippleEffect:波纹效果
pageCurl:翻页起来
pageUnCurl:翻页下来
cameraIrisHollowOpen:镜头开
cameraIrisHollowClose:镜头关

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




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值