返回 登录
0

用Swift编写iOS应用中的交互手势动画

原文: Interactive gesture-driven animations in your iOS app (in Swift)
作者: Roy Marmelstein
译者: 孙薇
审校: 唐小引(@唐门教主),欢迎技术投稿、约稿,给文章纠错,请发送邮件tangxy@csdn.net

摘要:本文是对插值的简单介绍

最近有一个非常棒的演讲“Swift值得一试!”,在其中Adam Bell提出:在全世界抛弃了拟真设计(skeumorphism)的时候,我们应当拾回iOS应用所丢失的魔力,而我完全同意他的观点。

iOS的魔力通常体现为交互式的手势动画——每当目睹屏幕上的操作完美回应你的触控时,这种感觉非常奇妙。还记得第一次见到惯性滚动(inertial scrolling)效果、旧版Twitter iPad版、以及53公司的Paper软件时我们的反应么?

图片描述

交互手势动画在使用时还是很费劲的,通常包括很多不同的插值类型,在本文中我打算将其做以简化。

插值初接触

插值(Interpolate)是用于创建交互式手势动画的全新Swift插值框架,下面有一个使用样例:

图片描述

而关键在于:所有动画归根结底都是插值。移动就是从一个CGPoint到另一个的插值,而色彩变化则是两个UIColor之间的插值,依此类推。

目前插值能够加入的类型极其丰富(并且还有计划要加入更多类型)。在使用时,只要创建插值对象,赋予其起始值与结束值,并将其应用在闭包内的目标视图上即可。之后只需从手势识别器上获取相应的值,再将其提供给插值对象就可以了。

代码如下:

// Create interpolation object
let colorChange = Interpolate(from: UIColor.whiteColor(), to: UIColor.redColor(), apply: { [weak self] (color) in
      self?.view.backgroundColor = color
})

// For a gesture recognizer or delegate that reports every step of its progress (e.g. UIPanGestureRecognizer or a ScrollViewDidScroll) you can just apply the percentage directly to the Interpolate object
@IBAction func handlePan(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(self.view)
    let translatedCenterY = view.center.y + translation.y
    let progress = translatedCenterY / self.view.bounds.size.height
    colorChange.progress = progress
}

// For other types of gesture recognizers that only report a beginning and an end (e.g. a UILongPressGestureRecognizer), you can animate directly to a target progress value with a given duration.
@IBAction func handleLongPress(recognizer: UILongPressGestureRecognizer) {
    switch recognizer.state {
        case .Began:
            colorChange.animate(1.0, duration: 0.3)
        case .Cancelled, .Ended, .Failed:
            colorChange.animate(0.0, duration: 0.3)
        default: break
    }
}

// To remove
colorChange.invalidate()

插值不仅可以应用在简单的线性插入上,还能让动画过渡更平滑、效果更丰富。插值支持下列这些函数:EaseIn、EaseOut、EaseInOut以及Spring,甚至支持自定义插值函数(通过协议),让我们来尝试更多神奇的应用吧!

第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。

图片描述

由CSDN重磅打造的2016中国云计算技术大会(CCTC 2016)将于5月13日-15日在北京举办,大会特设“中国Spark技术峰会”、“Container技术峰会”、“OpenStack技术峰会”、“大数据核心技术与应用实战峰会”等四大技术主题峰会,以及“云计算核心技术架构”、“云计算平台构建与实践”等专场技术论坛。80+位一线互联网公司的技术专家将到场分享他们在云计算、大数据领域的技术实践,目前大会剩票不多,欲购从速。详情请点击CCTC 2016大会官网

评论