• 热门专题

(译)快速指南:用UIViewPropertyAnimator做动画

作者:  发布日期:2016-12-05 20:46:53
Tag标签:指南  动画  
  • 翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR
    译者:Haley_Wong

    iOS 10 带来了一大票有意思的新特性,像 UIViewPropertyAnimator,它是一个改善动画处理的全新的类。
    这个视图属性动画完全颠覆了我们已经习惯的流程,能够为动画逻辑添加更精细的控制。

    一个简单的动画

    让我们来看看如何通过一个简单的动画改变视图的中心点属性。

    let animator = UIViewPropertyAnimator(duration: 1.0, curve: .easeOut){
        AView.center = finalPoint
    }
    animator.startAnimation()

    至少有3点需要注意:
    1) 这个动画是通过闭包来定义的,与UIView 的动画类很相似“UIView.animation(duration:…)”。
    2) 返回一个对象,即动画创建者。
    3)这个动画不是立刻开始的,而是通过 startAnimation()方法触发的。

    动画状态

    我们对一个元素执行动画操作方式的主要变化与以下事实有关:一个属性动画器包含一整套状态机逻辑。通过UIViewAnimating协议实现的功能以一种简单明了的方式管理动画的状态,而这些状态又是通过startAnimation, pauseAnimation 和 stopAnimation函数来实现的。调用这些方法我们可以更新状态的值,使之能在active,inactive和stopped之间转换。

    当动画开始或者暂停时,动画的状态就是活跃状态;当动画已被初始化但是还未开始或者动画已完成,它就是非活跃状态。需要注意的是 在活跃状态和停止态之间有一点点不同。当动画因停止命令而完成或者它真的已经完成后,状态会变成停止态,动画器内部会调用方法finishAnimation(at:) 来标记动画 已完成,将状态设置为非活跃状态,并最终调用完成的代码块。

    动画的可选项

    可能你已经在前面的例子里注意到,挨着动画的 block,我们定义了两个参数:动画的时长 和动画的曲线,一个UIViewAnimationCurve实例,代表着最常见的曲线(easeIn,easeOut,linear或easeInOut)。

    如果你需要对动画取消有更多的控制,你可以用由两个控制点定义的贝塞尔曲线。

    let animator = UIViewPropertyAnimator(
                   duration: 1.0, 
                   point1: CGPoint(0.1,0.5), 
                   point2: CGPoint(0.5, 0.2){
    
            AView.alpha = 0.0
    }

    (如果一条贝塞尔曲线依然不够,那么你甚至可以利用UITimigCurveProvider来指定一条完全自定义的曲线)

    另一个可以传给构造器的有意思的参数是 阻尼系数值。用法与UIView 的动画方法类似,你可以定义出弹簧效果,阻尼系数的取值范围是0到1.

    let animator = UIViewPropertyAnimator(
                   duration: 1.0,
                   dampingRatio:0.4){
    
            AView.center = CGPoint(x:0, y:0)
    }

    延迟动画的执行也非常的简单,只需要调用 带有afterDelay参数的startAnimation方法即可。

    animator.startAnimation(afterDelay:2.5)

    动画的block

    UIViewPropertyAnimator 采用的是能够为动画器提供很多有趣能力的UIViewImplicitlyAnimating协议。例如,除了在初始化的时候指定的block外,你还可以指定多个动画block。

    // Initialization
    let animator = UIViewPropertyAnimator(duration: 2.0, curve: .easeOut){
        AView.alpha = 0.0
    }
    // Another animation block
    animator.addAnimation{ 
        Aview.center = aNewPosition
    }
    animator.startAnimation()

    你还可以向已在运行的动画添加动画块,该动画块将立即使用剩余时间作为新动画的持续时间来执行。

    与动画流交互

    正如我们已提过的那样,我们可以通过调用startAnimation, pauseAnimation 和 stopAnimation轻松地与动画流交互。动画的默认流(从起始点到结束点),能通过fractionComplete属性更改。这个值表示动画完成的百分比,取值范围是0 到 1。你能够修改这个值来像你期望的那样驱动流(例如:用户可能会用滑块或滑动手势实时地修改fraction)。

    animator.fractionComplete = slider.value

    某些情形下,你可能希望在动画运行完毕时执行一些操作。 addCompletion 方法能让你添加一个(当动画完成时会被触发的)代码块。

    animator.addCompletion { (position) in
        print('Animation completed')
    }

    position参数是一个 UIViewAnimatingPosition类型的值,它有三个枚举值,分别代表动画是在开始停止,结束后停止,还是当前位置停止。 通常你都会收到结束的枚举值。
    (译者注:UIViewAnimatingPosition的三个枚举值分别是end,start,current)

    这就是这份快速指南的全部内容啦。
    我已经迫不及待地想要用这个新的动画系统来实现一些很酷的UI 效果了。我会在我的Twitter 上分享我的经验!

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规