美文网首页
UIView 基础动画

UIView 基础动画

作者: 彡廿 | 来源:发表于2017-04-05 15:04 被阅读26次

    前面已经写过一篇了,关于UIView的动画,写此篇的目的是总结一下开发中常用的动画API,同时会写一系列iOS 开发中的动画
    大概目录

    1. UIView 基础动画
    2. autolayout动画
    3. layer 动画
    4. 3D 动画
    5. 控制器转场动画
    6. 第三方动画库的使用

    UIView 的动画API都是基于高级API封装的,对UIView属性进行修改而产生的动画效果

    常常用户修改产生动画的属性 bounds size frame transform alpha backgroundColor

    基本的动画
    UIView.animate(withDuration: TimeInterval) { 
        // 修改控件的属性
        }
    

    TimeInterval 是动画执行的时间

    UIView.animate(withDuration: TimeInterval, animations: { 
                // 修改属性,执行动画
            }) { (finish) in
                // 动画执行完毕后的作的处理
            }
    
    UIView.animate(withDuration: TimeInterval, delay: TimeInterval, options: [], animations: { 
                // 修改属性,执行动画
            }) { (finish) in
                // 动画执行完毕,做相关处理
            }
    
    

    delay 是动画多久之后开始执行
    options 动画执行的效果,是个数组,可以将枚举值添加到数组中,产生对应的效果

    • 动画效果相关
    UIViewAnimationOptionLayoutSubviews            //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
    
    UIViewAnimationOptionAllowUserInteraction      //动画时允许用户交流,比如触摸
    
    UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
    
    UIViewAnimationOptionRepeat                    //动画无限重复
    
    UIViewAnimationOptionAutoreverse               //执行动画回路,前提是设置动画无限重复
    
    UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
    
    UIViewAnimationOptionOverrideInheritedCurve    //忽略外层动画嵌套的时间变化曲线
    
    UIViewAnimationOptionAllowAnimatedContent      //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照
    
    UIViewAnimationOptionShowHideTransitionViews   //用显隐的方式替代添加移除图层的动画效果
    
    UIViewAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项
    
    • 时间函数曲线相关
    UIViewAnimationOptionCurveEaseInOut            //时间曲线函数,由慢到快
    
    UIViewAnimationOptionCurveEaseIn               //时间曲线函数,由慢到特别快
    
    UIViewAnimationOptionCurveEaseOut              //时间曲线函数,由快到慢
    
    UIViewAnimationOptionCurveLinear               //时间曲线函数,匀速
    
    
    • 转场动画相关
    UIViewAnimationOptionTransitionNone            //无转场动画
    
    UIViewAnimationOptionTransitionFlipFromLeft    //转场从左翻转
    
    UIViewAnimationOptionTransitionFlipFromRight   //转场从右翻转
    
    UIViewAnimationOptionTransitionCurlUp          //上卷转场
    
    UIViewAnimationOptionTransitionCurlDown        //下卷转场
    
    UIViewAnimationOptionTransitionCrossDissolve   //转场交叉消失
    
    UIViewAnimationOptionTransitionFlipFromTop     //转场从上翻转
    
    UIViewAnimationOptionTransitionFlipFromBottom  //转场从下翻转
    
    弹簧动画
    UIView.animate(withDuration: TimeInterval, delay: TimeInterval, usingSpringWithDamping: CGFloat, initialSpringVelocity: CGFloat, options: UIViewAnimationOptions, animations: {
                // 执行动画
            }) { (finish) in
                // 动画完成后的操作
            }
    

    usingSpringWithDamping 动画执行的阻尼值 (0-1)

    initialSpringVelocity 动画执行的初始速度

    options 动画执行的效果

    关键帧动画
    UIView.animateKeyframes(withDuration: TimeInterval, delay: TimeInterval, options: UIViewKeyframeAnimationOptions, animations: { 
                UIView.addKeyframe(withRelativeStartTime: Double, relativeDuration: Double, animations: { 
                    // 修改属性值
                })
            }) { (finish) in
                // 动画完成之后的处理
            }
            
            
    UIView.addKeyframe(withRelativeStartTime: Double, relativeDuration: Double, animations: { 
                    // 修改属性值
                })
    
    
    • UIViewKeyframeAnimationOptions
     UIViewKeyframeAnimationOptionLayoutSubviews        //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
        UIViewKeyframeAnimationOptionAllowUserInteraction  //动画时允许用户交流,比如触摸    UIViewKeyframeAnimationOptionBeginFromCurrentState     //从当前状态开始动画
        UIViewKeyframeAnimationOptionRepeat                //动画无限重复
        UIViewKeyframeAnimationOptionAutoreverse           //执行动画回路,前提是设置动画无限重复
        UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
        UIViewKeyframeAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项
    
    

    关键帧独有的

        UIViewKeyframeAnimationOptionCalculationModeLinear     //选择使用一个简单的线性插值计算的时候关键帧之间的值。
        UIViewKeyframeAnimationOptionCalculationModeDiscrete   //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。
        UIViewKeyframeAnimationOptionCalculationModePaced      //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。
        UIViewKeyframeAnimationOptionCalculationModeCubic      //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些..
        UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
    
    过渡动画
    UIView.transition(with: view, duration: 2.0, options: [], animations: {
                // 修改属性
            }) { (finish) in
                // 动画完毕后的操作
            }
    

    with 要执行的动画的视图

    UIView.transition(from: view1, to: view2, duration: duration, options: []) { (finish) in
                // 执行动画
            }
    

    相关文章

      网友评论

          本文标题:UIView 基础动画

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