一个小清新 Swift 游戏的开发全过程（Part 2）

转自我自己的 blog

Last Circle

这是这个系列 blog 的第二篇，主要介绍 Last Circle 中出现的各种动画效果，满满的都是图文并茂的干货，还请慢慢享用。

#重复放大 & 缩小（Repeat & Scale)

游戏开始页面的 Start 按钮和游戏结束页面的 Retry 按钮都有这样的动画效果：重复的放大后缩小再放大再缩小。如图所示:

{% asset_img start.gif 开始页面 %}
{% asset_img game_over.gif 结束页面 %}

游戏开始页面
游戏结束页面

这里其实并不是按钮在进行缩放，因为如果是按钮在缩放的话，按钮上的文字也会一起缩放。所以我在按钮下面的添加了一个专门用来进行缩放动画的 scale view，初始状态下它和按钮的大小位置颜色完全一致。开始页面的动画代码是这样的：

private func startButtonAnimation() {
    UIView.animateWithDuration(1, delay: 0, options: [.CurveEaseInOut, .Repeat, .Autoreverse],
        animations: { () -> Void in
            self.scaleView.transform = CGAffineTransformMakeScale(1.5, 1.5)
        }, completion:nil)
}

这个动画的关键是 options 中的三个选项：.CurveEaseInOut 是为了缩放看起来更自然，.Repeat 是使动画一直重复，.Autoreverse 是让动画自动颠倒（也就是放大后的缩小）。缩放是通过改变 view 的 transform 这个属性来实现的。

还有一处重复缩放的动画效果，那就是点击了错误的圆后，正确的圆会有一个快速的闪动，如图:

闪动效果

这里其实也是一个 scale 动画，不过是设定了重复次数，我是用 layer 动画实现的。因为这个动画后还可能执行其他动作，还设置了一个 completion 的 block，所以又用到了 CATransaction：

func blink(completion: ()-> Void) {
    let scaleUpAnim = CABasicAnimation(keyPath: "transform.scale")
    scaleUpAnim.toValue = NSNumber(float: 1.5)
    scaleUpAnim.repeatCount = 3
    scaleUpAnim.duration = 0.2
    scaleUpAnim.autoreverses = true

    CATransaction.begin()
    CATransaction.setCompletionBlock(completion)
    self.layer.addAnimation(scaleUpAnim, forKey: nil);
    CATransaction.commit()
}

#放大 & 淡入淡出 （Scale & Fade in/out）

开始页面还有许多不断出现的半透明的圆，在放大后就消失的效果，这个就是放大+淡入淡出的动画。仔细观察的话，这些圆的出现位置和大小都是随机的，也不是同时出现的，而且每个圆的显示时长也是不一样的。具体实现的代码如下：

private func startBackgroundCircleAnimation() {
    let circle = Circle.randomCircle()
    let color = ColorUtils.randomColor()
    circle.color = color
    let cv = CircleView(circle: circle)
    cv.userInteractionEnabled = false
    self.view.insertSubview(cv, belowSubview: self.scaleView)
    circleViews.append(cv)


    let delay = Double(arc4random()) / Double(UINT32_MAX) * 1
    let duration = Double(arc4random()) / Double(UINT32_MAX) * 4 + 0.5

    cv.alpha = 0
    cv.transform = CGAffineTransformMakeScale(0.5, 0.5)

    weak var weakSelf = self
    UIView.animateWithDuration(duration,
        delay: delay,
        options : [.CurveLinear],
        animations: { () -> Void in
            cv.alpha = 0.4
            cv.transform = CGAffineTransformMakeScale(1, 1)
        }) { (finished) -> Void in
            if !finished {
                return
            } else {
                UIView.animateWithDuration(duration,
                    delay: 0,
                    options: [.CurveLinear],
                    animations: { () -> Void in
                        cv.alpha = 0
                        cv.transform = CGAffineTransformMakeScale(2, 2)
                    }, completion: { (finished) -> Void in
                        weakSelf!.startBackgroundCircleAnimation()
                })
            }
    }
}

首先，生成一个随机位置和大小的 circle view，并加入到开始页面的 view 中，并且插入在开始按钮的 scale view 下面，否则会盖住 scale view。然后随机生成圆的延迟时间和持续时间这两个值，用在动画中。整个动画周期分两个部分：1.圆的大小由0.5倍放大到1倍，透明度由0到0.4；2.圆的大小由1倍放大到2倍，透明度过渡到0。
由于这个动画也是要不断重复的，所以要在 completion 的 block 中调用该方法以此来实现无限动画。这个方法只是一个圆的动画，要实现 gif 中那么多圆的动画我一共调用了7次这个方法。

但是，因为这部分的动画，我发现了一个很严重的问题，那就是这个游戏玩过一会儿后手机发热好严重。一开始我以为是在游戏中计算可用的圆的那个 while 循环造成的，后来一想这点计算量应该不至于啊。后来还是靠 Instrument 的 Time Profiler 才发现问题所在（第一次使用，果然是神器），就是这个 startBackgroundCircleAnimation 造成的，为什么呢？这个方法居然一直在执行！因为 completion 中没有写如何结束动画，我上面说了我一共调用了7次这个方法就为了实现7个圆出现在画面里，所以一共有7个这段代码一直在无限循环的执行，导致了 CPU 100%……修改后的代码如下：

...
completion: { (finished) -> Void in
    cv.removeFromSuperview()
    if !finished {
        return
    } else {
        weakSelf!.startBackgroundCircleAnimation()
    }
}

#弹性放大

游戏的主页面就是许多的圆按照不同的顺序依次出现，同时伴随着带有弹性的放大效果（放大到最大后回弹），动画效果如图所示（gif 分辨率太低了，可能看不清）：

游戏画面

要想实现这个有弹性的动画，就要用到 UIView 的 + animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: 这个 API 了，其中 usingSpringWithDamping 就是弹性的阻尼，initialSpringVelocity 就是弹性的初速度。动画开始之前，先把每个圆缩放到0.1倍，然后在动画中恢复到正常大小。为了让圆的 circle view 在动画中也可以被点击，options 里就设置了 .AllowUserInteraction。具体代码如下：

for cv in circleViews {
    let delay = Double(arc4random()) / Double(UINT32_MAX) * 0.3
    cv.transform = CGAffineTransformMakeScale(0.1, 0.1)
    UIView.animateWithDuration(0.5,
        delay: delay,
        usingSpringWithDamping: 0.5,
        initialSpringVelocity: 6.0,
        options: UIViewAnimationOptions.AllowUserInteraction,
        animations: {
            cv.alpha = 1
            cv.transform = CGAffineTransformIdentity
        }, completion: nil)
}

#颜色渐变

游戏的主页面顶端有一个示意倒计时的进度条，通过长度和颜色来提示用户剩余时间。如图所示：

倒计时进度条

这个进度条的实现是自定义一个 CountDownView，将其放置在游戏画面的顶端，并根据已过时间和总时间来设置进度条的长度和颜色。颜色的过渡并不是从绿直接到红，中间需要黄色过渡一下，所以前一半是由绿到黄，后一半是由黄到红。更新进度的代码如下：

func updateProgress(time:CGFloat, total:CGFloat) {
    let progressViewWidth = frame.size.width * time / total
    progressView.frame = CGRectMake(0, 0, progressViewWidth, frame.size.height)

    let r,g,b :CGFloat
    let a: CGFloat = 1.0
    if time < total/2 {
        r = time/total*2
        g = 1
    } else {
        r = 1
        g = 2 - time/total*2
    }
    b = 0
    let currentColor = UIColor(red: r, green: g, blue: b, alpha: a)
    progressView.backgroundColor = currentColor
}

因为画面中的圆是渐次出现的，所以进度条不是从一开始就进行倒计时的，而是有一个0.3秒的延迟，这里就用到了 GCD 的延迟执行。然后为了达到平滑的更新效果，所以要每六十分之一秒就更新一下进度条，这里就用到了 NSOperationQueue 以及 NSBlockOperation。这段代码觉得写得有些复杂，我相信还有更好的实现，因为我对多线程还不太熟悉，还请多指教：

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(0.3 * Double(NSEC_PER_SEC))), dispatch_get_main_queue()) { () -> Void in
    self.startTime = NSDate()
    weak var weakOperaion = self.updateOperation
    self.updateOperation.addExecutionBlock { () -> Void in
        while weakOperaion?.cancelled == false {
            NSThread.sleepForTimeInterval(1/60)
            let interval = NSDate().timeIntervalSinceDate(self.startTime!)
            NSOperationQueue.mainQueue().addOperationWithBlock({ () -> Void in
                self.countDownView.updateProgress(CGFloat(interval), total: self.totalTime)
            })
        }
    }
    self.queue.addOperation(self.updateOperation)
}

#后记

除了上面介绍的，其实还有几处动画没有提及，比如正确点击圆后的圆放大直到充满屏幕，比如游戏结束后 GAME OVER 这两个单词的动画，因为我觉得这些相较于以上都比较容易，而且掌握了以上几个动画后这几个更是不在话下了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,602评论 25赞 708
  • 重拾JAVA
    2016.02.03，重拾JAVA开发。
    西鬼阅读 453评论 0赞 0
  • 学会看成交量，让你轻松区分熊牛市
    成交量 是指一个时间单位内对某项交易成交的数量。一般情况下，成交量大且价格上涨的股票，趋势向好。成交量持续低迷...
    丁老师看盘阅读 295评论 0赞 0
  • 一缕思乡
    清晨又是我第一个到办公室。 打开电脑，显示器上满满的都是林丹谢杏芳，英雄余旭明天就魂归故里了，那么让人扼腕，...
    方大叔阅读 295评论 0赞 0