web-dev-qa-db-ja.com

IDでリンクし、キャンバスなしで2つの要素の間に描かれた線をアニメーション化する

Sudhanshu Yadavの Pattern Lock というライブラリを使用しています。基本的にはAndroidパターンロック画面の模倣です。アニメーションを描画して、ロック解除の手順を示しています（キャプチャとして使用するため）。この方法ではやりたくありません。彼は他のプロジェクトの1つで行ったことがあります。線上に矢印の付いた画像があり、方向を示しています。ユーザーがそれを完了できるように、正確なロック解除画面上でアニメーションを実行したいと思います。SVGを使用してみました。 、しかし、私はそれらを完全に理解しておらず、関連することがわかった唯一のチュートリアルは非常に技術的であったため、うまくいきませんでした。CSSでも@keyframesを使用してみました。ここのプロジェクトは、コンテナはキャンバスであり、divまたはセクションである必要があります。

私の最終目標は、これから始まるアニメーションを実行することです。

starting point

アニメーションの次の部分に移動します-線を引きます：

animating 1

animating 2

最終結果は次のとおりです。

end result

開始点と終了点がどこにあるかを知るために、アニメーションが発生しているのを確認する必要があります。可能であれば、そのアニメーションのタイミングも調整できるようにする必要があります。 jsplumbを試しましたが、必要なことを実行できず、ドキュメントがわかりにくいです。

しかし、ここに私のコードがあります：

<html>
<head>
    <link href="css/patternLock.css"  rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <script src="js/patternLock.js"></script>
    <script>
        $(document).ready(function() {
            var lock = new PatternLock("#patternContainer", {enableSetPattern: true});
            lock.setPattern('123');
        });
    </script>
</head>
<body>

    <h1>Memorize!</h1>
    <div class="container">
        <div id="patternContainer"></div>
    </div>
</body>
</html>

JQueryを使用してこれを行う方法はありますか？パスワード/番号の順序を動的に変更できる必要があります。したがって、「1-2-6-9」のようなランダムシーケンスを作成し、パターンでそれをアニメーション化してから、ユーザーがそれを入力できるようにして、パスワードが常に静的にならないようにする必要があります。

追伸：各ポイント（ドット）には固有のIDがあるため、その方法で各IDにリンクする必要があります。そのため、シーケンスが1から始まる場合、IDは「number_1」で始まり（たとえば）、次に「number_2」、「number_6」、「number_9」に移動します。

javascriptjquerycssanimationdynamic
32
Haring10

デモ：[〜＃〜] codepen [〜＃〜]

その単なるsvgおよびcssキーフレームアニメーション。すべてのパスに個別のアニメーションがあるように、行ごとに個別のパスを追加しました。

タイミングと遅延については、さまざまなパスのアニメーションプロパティを確認してください。

お気に入り animation: Drawpath 1s linear 2s forwards;
最初の数字はアニメーションの長さなので、1秒です。

2秒は遅延です。したがって、2秒の遅延があります。 Forwardsは、endプロパティを保持するだけであり、アニメーションが完了したときに行が消えないようにします。

.key-anim1 {
  -webkit-animation: Drawpath 1s linear forwards;
  animation: Drawpath 1s linear forwards;
  stroke-dasharray: 0, 100;
}
.key-anim2 {
  -webkit-animation: Drawpath 1s linear 1s forwards;
  animation: Drawpath 1s linear 1s forwards;
  stroke-dasharray: 0, 100;
}
.key-anim3 {
  -webkit-animation: Drawpath 1s linear 2s forwards;
  animation: Drawpath 1s linear 2s forwards;
  stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
@keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
<svg class="test" viewbox="0 0 400 200">
  <path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
  <path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
  <path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
  <circle r="10" cy="50" cx="50" fill="#f33" />
  <circle r="10" cy="100" cx="50" fill="#f33" />
  <circle r="10" cy="150" cx="50" fill="#f33" />
  <circle r="10" cy="50" cx="100" fill="#f33" />
  <circle r="10" cy="100" cx="100" fill="#f33" />
  <circle r="10" cy="150" cx="100" fill="#f33" />
  <circle r="10" cy="50" cx="150" fill="#f33" />
  <circle r="10" cy="100" cx="150" fill="#f33" />
  <circle r="10" cy="150" cx="150" fill="#f33" />
</svg>
21
Persijn

このプラグインを使用してみてください： http://ignitersworld.com/lab/patternLock.html

お役に立てば幸いです、

ありがとうございました

3
user3629322

これを行うのに役立つライブラリがあるかどうかはわかりませんが、独自のアニメーションメソッドを作成することもできます。線要素を作成し（たとえば、spanを使用）、ある点から別の点に線を引くメソッドを作成します。

JQuery .position()メソッドを使用して要素の（x、y）座標を取得し、.width()または.height()を使用して行の長さを変更できます。これがプレーンなJavaScriptでどのように機能するかを示すために、簡単なフィドルを作成しました。

http://jsfiddle.net/zaekfzwx/

これは左から右に移動するだけですが、canvas要素を使用せずにDOMに描画する関数を作成する方法についての一般的な考え方を理解できます。たとえば、CSS3 rotate変換を使用して、次のように別の方向に線を引くことができます。

http://jsfiddle.net/46g8s1xe/

しかし、ダニエルが述べたように、行の位置属性は、どのコンピューターでも読み取ることができるHTML内にあり、キャプチャのポイントを打ち負かします。

1
APTy