javascript - HTML/CSS/Javascript -- トランジションと描画

Question

これらの滑らかなトランジション (線の描画と画像の移動) を行う方法を知りたいです。それが何と呼ばれているのか、それを行うために必要なもの、つまりcss、javascript、jquery、またはそれらすべての組み合わせ、またはフレームワークさえも教えていただければ幸いです。申し訳ありませんが、これを尋ねなければなりませんが、文字通り何と呼ぶべきかわかりません。

オンリーコイン、 ポリゴン

Answer 1

これを行うにはかなりの数の方法があります。必要なことを行うための組み込み/標準の方法はないため、いくつかの便利なスクリプトを次に示します: Raphael.jsおよび

JavaScript といくつかの CSS のみを使用するメソッドの場合、数学を使用して行をチェックするメソッドを次に示します。JSFiddle コードは次のとおりです。

var top = 0;
var left= 0;
var top2 = 0;
var left2 = 0;

$("#draw").css("background", "gray")
    //Check if even or not
    i = 0;
    $("#draw").on("click", function(e) {
       i++;
    //If even, draw line
        if (i%2 != 0) {
        //First point
        top = e.pageY
        left = e.pageX
        }
        else  {
        //Second point
        top2 = e.pageY
        left2 = e.pageX
        //Calculate difference
        heightdifference = top2-top;
        widthdifference = left2-left;
            //arcsin fix: x < -1 or x > 1 not allowed
            //I suck at this, maybe someone can find a better solution?
            divide =  (heightdifference/widthdifference < -1 || heightdifference/widthdifference > 1) ?  widthdifference/heightdifference : heightdifference/widthdifference
            //Rotate the line
        rotation = 180/Math.PI*Math.asin(divide)
            //Pythagoras
        width = Math.sqrt(Math.pow(heightdifference,2)+Math.pow(widthdifference,2))
            //Margin: Pythagoras 2
        a = width/2
        var b
        c = widthdifference/2
        margintop = Math.sqrt(Math.pow(a,2)-Math.pow(c,2))
            margintop = (rotation > 0) ? 0-margintop : margintop            
        $("<div>").css({
           "height": "2px",
           "background": "black",
           "width": width,
           "position": "absolute",
           "top": top,
           "left": left,
            "margin-top": 0-margintop,
            "-webkit-transform": "rotate("+rotation+"deg)",
            "-moz-transform": "rotate("+rotation+"deg)",
            "-ms-transform": "rotate("+rotation+"deg)",
            "-o-transform": "rotate("+rotation+"deg)",
            "transform": "rotate("+rotation+"deg)"

        }).appendTo("#draw")
        }           
    }) 

また、JavaScript を使用したアニメーションに関する役立つチュートリアルもここにあります。

申し訳ありませんが、あまり役に立ちませんでしたが、これが正しい方向に向かうことを願っています。