17

iOS 8 キーボード拡張機能のキーボードキーを押した時のポップアニメーションを実装する方法を教えてください。すべてのキーに長押しジェスチャを割り当てる方法は知っていますが、キーをアニメーション化してその特定のキーに他の文字を表示する方法はわかりません。

編集:ここで同様の質問がされているのを見ましたが、違いは、彼がポップ アニメーションを作成できたことです。

編集 2:別の同様の質問がここで尋ねられているのを見ましたが、標準キーボードのデフォルトの外観と比較してどのように見えるかが異なります。

タップされた拡張キーボード キー

編集 3:キーボードのキーをタップすると、目的の動作を実現できました。展開されたキー ビューを適切に描画する方法を知る必要があるだけです。参考までに写真を添付し​​ます。1 つ目は、これまでに達成したことです。その文字 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];

問題は、次のようになることです。

ここに画像の説明を入力

デフォルトのキーボードのようにするのに十分な大きさにすることができれば、うまくいきます。

4

2 に答える 2

0

フォトショップでアニメーションを作成するか、アニメーションフレームを個別の画像として出力できるものでアニメーション化するのが最も簡単かもしれませんUIImageViewdocs)。

したがって、上記の方法でポップアップの背景をアニメーション化するだけで、アニメーションで文字をフェードインさせるかUILabel、背景アニメーションで慎重にアニメーション化できます

于 2015-09-02T04:49:56.067 に答える