3D Touch アプローチ

2015.10.16

こんにちは、ユニトラストの白石です。

iPhone6Sに新らしく3D Touchという機能が搭載されました。これによって画面をどの程度強く押したかということがわかります。今回は「画面を押す力」をインタラクティブにアプリに反映させました。

デモに用いたプロジェクトはgithubで公開しています。

3D Touchとは

iPhone6Sではタッチスクリーンの座標に加えて、スクリーンを押したときの強さを検出することができるようになりました。この3D Touchによって従来のタッチ、スワイプ、ピンチといったジェスチャーに加え、新しくピーク（軽く押す）とポップ（強く押す）が追加されました。
今回、制作したアプリではこれらのジェスチャーは使わずに、スクリーンを押した強さをそのままコンテンツに反映させました。押した強さを検出する方法は以下のコードになります。

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    //タッチ中
    _isTouching = YES;

    UITouch *touch = [touches anyObject];
    _touchPos = [touch locationInView:self.view];

    if(touch.force){
        //スクリーンを押す強さ
        _touchForce = touch.force;
        //スクリーンを押す強さの最大値
        _maxTouchForce = touch.maximumPossibleForce;
    }
}

デモ

画面上部に表示のパラメータ＝power:現在の押す力、max:押せる力の最大値
埋め込み動画ですと文字が見えずらいかもしれません。
その場合はYouTube本家サイトにて閲覧ください。

仕組み

円がスクリーンを押した強さによって歪む仕組みを説明します。
まず、テクスチャを貼った円は1度毎に1つの三角形で出来ていて、それが360個あります。
この三角形は1フレーム毎に拡大、回転、移動の行列演算で更新されています。今回はタッチ中（スクリーンを押しているとき）にタッチした位置から一番近い頂点を中心に70頂点ほどにウェイトを付けて、頂点毎に（定数）x（押した力 / 押せる力の最大値）x（ウェイト）分だけ頂点位置を移動してフレームバッファーを書き換えています。
さらに歪みを滑らかにするために、ベジェ曲線をもとにウェイトをつけています。最初は線形にウェイトを付けていましたが、歪みが滑らかでないのが気になったので変更しました。
最後に、指を離したときのアニメーションですが、これはバネの運動になっていて押した力が強いほどバネは激しく動いて、最終的に元の円に収束します。