UIView 基础动画

2017-04-05  本文已影响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: { 
                // 修改属性值
            })

 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
            // 执行动画
        }
上一篇下一篇

猜你喜欢

热点阅读