在 iOS 8 键盘扩展中实现键盘按键弹出动画答案

【问题标题】：Implement Keyboard Key Pop Animation in iOS 8 Keyboard Extension在 iOS 8 键盘扩展中实现键盘按键弹出动画
【发布时间】：2015-08-24 09:39:18
【问题描述】：

我想问一下iOS 8键盘扩展在按住键盘键时如何实现弹出动画。我知道如何在每个键上分配长按手势，但不知道如何为键设置动画以显示该特定键中的其他字符。

编辑：我看到有人问here 这个类似的问题，但不同之处在于他能够创建流行动画。

编辑 2：我看到另一个类似的问题被问到 here，但与标准键盘上的默认外观相比，它们的外观有所不同。

编辑 3：我能够在敲击键盘键时实现我想要的行为。我只需要知道如何正确绘制扩展键视图。附上图片供参考。第一个是我们迄今为止所取得的成就。我想知道如何绘制那个字母 F 键，然后将其转换为 UIView。

编辑 4： 我能够创建按键弹出视图，但不是我想要的类似于标准键盘按键弹出的所需形状或层。供参考：

编辑 5： 我尝试了 PaintCode 的演示版，它生成了以下代码。这是在我的自定义视图上的 drawRect 方法中。我的按键宽度通常为 26.0，高度为 39.0。顺便说一句，我也在使用 Objective-C。

    UIBezierPath* bezierPath = UIBezierPath.bezierPath;
    [bezierPath moveToPoint: CGPointMake(26, 5.12)];
    [bezierPath addLineToPoint: CGPointMake(26, 18.03)];
    [bezierPath addCurveToPoint: CGPointMake(23.05, 22.41) controlPoint1: CGPointMake(26, 19.88) controlPoint2: CGPointMake(24.82, 21.51)];
    [bezierPath addCurveToPoint: CGPointMake(19.62, 25.27) controlPoint1: CGPointMake(22.05, 23.24) controlPoint2: CGPointMake(20.79, 24.3)];
    [bezierPath addCurveToPoint: CGPointMake(19.62, 39.95) controlPoint1: CGPointMake(19.62, 30.82) controlPoint2: CGPointMake(19.62, 39.95)];
    [bezierPath addCurveToPoint: CGPointMake(17.17, 42) controlPoint1: CGPointMake(19.62, 41.08) controlPoint2: CGPointMake(18.52, 42)];
    [bezierPath addLineToPoint: CGPointMake(8.83, 42)];
    [bezierPath addCurveToPoint: CGPointMake(6.38, 39.95) controlPoint1: CGPointMake(7.48, 42) controlPoint2: CGPointMake(6.38, 41.08)];
    [bezierPath addCurveToPoint: CGPointMake(6.38, 25.33) controlPoint1: CGPointMake(6.38, 39.95) controlPoint2: CGPointMake(6.38, 30.89)];
    [bezierPath addCurveToPoint: CGPointMake(5.67, 24.74) controlPoint1: CGPointMake(6.15, 25.14) controlPoint2: CGPointMake(5.91, 24.94)];
    [bezierPath addCurveToPoint: CGPointMake(5.37, 24.49) controlPoint1: CGPointMake(5.57, 24.66) controlPoint2: CGPointMake(5.47, 24.57)];
    [bezierPath addLineToPoint: CGPointMake(5.32, 24.45)];
    [bezierPath addCurveToPoint: CGPointMake(2.75, 22.3) controlPoint1: CGPointMake(4.41, 23.69) controlPoint2: CGPointMake(3.5, 22.93)];
    [bezierPath addCurveToPoint: CGPointMake(1.02, 20.85) controlPoint1: CGPointMake(2.06, 21.92) controlPoint2: CGPointMake(1.47, 21.43)];
    [bezierPath addCurveToPoint: CGPointMake(0.98, 20.82) controlPoint1: CGPointMake(0.99, 20.83) controlPoint2: CGPointMake(0.98, 20.82)];
    [bezierPath addCurveToPoint: CGPointMake(0, 18.03) controlPoint1: CGPointMake(0.36, 20.02) controlPoint2: CGPointMake(-0, 19.06)];
    [bezierPath addLineToPoint: CGPointMake(0, 5.12)];
    [bezierPath addCurveToPoint: CGPointMake(2.48, 1.01) controlPoint1: CGPointMake(0, 3.44) controlPoint2: CGPointMake(0.97, 1.94)];
    [bezierPath addCurveToPoint: CGPointMake(6.05, 0) controlPoint1: CGPointMake(3.48, 0.39) controlPoint2: CGPointMake(4.71, 0.02)];
    [bezierPath addLineToPoint: CGPointMake(6.13, 0)];
    [bezierPath addLineToPoint: CGPointMake(19.87, 0)];
    [bezierPath addCurveToPoint: CGPointMake(26, 5.12) controlPoint1: CGPointMake(23.25, 0) controlPoint2: CGPointMake(26, 2.29)];
    [bezierPath closePath];
    [[UIColor redColor] setFill];
    [bezierPath fill];

问题是，它看起来像这样：

如果我能把它做得足够大，让它像默认键盘一样，那么它就可以工作了。

【问题讨论】：

您可以使用CGAffineTransforms 来缩放贝塞尔路径的CGPath 属性的副本，直到它足够大。
查看此链接。我添加了弹出按钮的代码：stackoverflow.com/a/33355236/535013
感谢穆扎米尔爵士 :)
Cau 你分享你的想法？我开发了自定义键盘，而不是应用程序扩展。我必须显示几个弹出键。我的键盘包含数学键。例如，当用户单击平方根按钮时，必须在弹出窗口中显示平方根、立方根、nth root

标签： ios ios8 ios-keyboard-extension

【解决方案1】：

我会使用CAShapeLayer。

您可以随时重置形状图层的形状，甚至可以为形状的变化设置动画以做一些比 Apple 版本更精细的事情。

这里是一个游乐场的代码，它演示了一个简单版本的类来实现这一点：

import UIKit

class KeyPopView: UIView {

  static let widthPadding : CGFloat = 5.0
  static let leftOffset : CGFloat = -5.0

  init(frame: CGRect, letters: [String]) {
    super.init(frame: frame)
    addLetters(letters)
  }

  required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override class func layerClass() -> AnyClass {
    return CAShapeLayer.self
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    var run : CGFloat = KeyPopView.widthPadding
    for l in labels {
      let s = sizeForLabel(l)
      let mh = maxHeight(labels)
      l.frame = CGRectMake(run, -mh, s.width, s.height)
      run += s.width + KeyPopView.widthPadding
    }
  }

  var shapeLayer: CAShapeLayer {
    get {
      return layer as! CAShapeLayer
    }
  }

  var path: CGPathRef {
    get {
      return shapeLayer.path
    }
    set(nv) {
      shapeLayer.shadowPath = nv
      shapeLayer.path = nv
    }
  }

  var labels : [UILabel] = [] {
    willSet {
      for l in labels {
        l.removeFromSuperview()
      }
    }
    didSet {
      for l in labels {
        addSubview(l)
      }
      path = keyPopPath(labels, cornerRadius: cornerRadius).CGPath
    }
  }

  var cornerRadius : CGFloat = 4 {
    didSet {
      path = keyPopPath(labels, cornerRadius: cornerRadius).CGPath
    }
  }

  override var backgroundColor: UIColor? {
    set(newValue) {
      shapeLayer.fillColor = newValue?.CGColor
    }
    get {
      return UIColor(CGColor: shapeLayer.fillColor)
    }
  }

  func keyPopPath(ls : [UILabel], cornerRadius: CGFloat) -> UIBezierPath {
    let radius = CGSizeMake(cornerRadius, cornerRadius);
    let f = CGRectMake(0, 0, frame.width + KeyPopView.widthPadding * 2, frame.height)
    let mh = maxHeight(ls)
    var b = UIBezierPath(roundedRect: CGRectMake(KeyPopView.leftOffset, -mh, widthForLabels(ls) - KeyPopView.leftOffset + KeyPopView.widthPadding, mh), byRoundingCorners: UIRectCorner.AllCorners, cornerRadii: radius)
    b.appendPath(UIBezierPath(roundedRect: f, byRoundingCorners: UIRectCorner.BottomLeft | UIRectCorner.BottomRight, cornerRadii: radius))
    return b
  }

  func addLetters(letters : [String]) {
    labels = letters.map({(s: String) -> UILabel in
      var l = UILabel()
      l.text = s
      return l
    })
  }

  func widthForLabels(ls: [UILabel]) -> CGFloat {
    return ls.reduce(0, combine: {(t, l) in t + sizeForLabel(l).width + KeyPopView.widthPadding}) + KeyPopView.widthPadding
  }

  func sizeForLabel(l: UILabel) -> CGSize {
    return l.text!.sizeWithAttributes([NSFontAttributeName: l.font])
  }

  func maxHeight(ls: [UILabel]) -> CGFloat {
    var m : CGFloat = 0;
    for l in ls {
      let h = sizeForLabel(l).height
      m = m > h ? m : h
    }
    return m
  }
}

//start with a gray background view
var ba = UIView(frame: CGRectMake(0, 0, 300, 300))
ba.backgroundColor = UIColor.grayColor()
//add a mock "key"
let key = UILabel()
key.text = "a"
key.textAlignment = NSTextAlignment.Center
key.backgroundColor = UIColor.whiteColor()
let size = key.text!.sizeWithAttributes([NSFontAttributeName: key.font])
key.frame = CGRectMake(5, 0, size.width + 10, size.height)
key.layer.cornerRadius = 5
key.center = ba.center
ba.addSubview(key)
//add the initial keypop
key.hidden = true // the key's rounded corners aren't showing up correctly in my playground preview -- this shouldn't be necessary
var k = KeyPopView(frame: CGRectMake(0, 0, size.width, size.height), letters: ["a"])
k.backgroundColor = UIColor.whiteColor()
ba.addSubview(k)
k.center = CGPointMake(key.center.x - 5, key.center.y)
ba
//demonstrates resizing of the keypop view to accomdate more letters
k.addLetters(["a", "b", "c", "d", "e"])
ba

在目前的形式中，这个类有很多问题：

字母稍微偏离中心
视图的框架用作弹出开始的关键帧，而不是实际绘制的框架。
只支持左键弹出
几个选项被强制解包
所用路径的“主干”没有像系统键盘那样的圆角内角
变量的命名是为了简洁，而不是清晰

然而，这应该为实现您想要的目标提供良好的基础。

【讨论】：

谢谢，但关键的流行形状也与我想出的几乎相同。检查问题描述的更新。
为了更接近您想要的确切形状，您可以编辑keypopPath创建的路径，将曲线附加到阀杆的内角（您可能需要调整形状层/路径以使其工作）或从头开始创建它作为一系列点和曲线添加到贝塞尔路径。事实上，Rambo 发布的链接在 inputViewPath 方法中使用这种方法 github.com/illyabusigin/CYRKeyboardButton/blob/master/… 的代码应该很容易适应您的特定用例。

【解决方案2】：

可能最简单的方法是在 Photoshop 中制作动画，或者将动画帧输出为单独的图像，然后为 UIImageView (docs) 制作动画。

所以只要按照上面提到的方式动画弹出窗口的背景，然后可以让字母随着动画淡入，或者用背景动画仔细动画UILabel

【讨论】：