javascript - HTML/CSS/Javascript -- 过渡和绘图

Question

我想知道如何进行这些流畅的过渡（线条的绘制和图像的移动）。如果有人能告诉我它叫什么，以及它需要做什么，例如 css、javascript、jquery 或所有它们的组合，甚至是框架，那就太好了。对不起，我不得不问这个问题，但我真的不知道该怎么称呼它。

onlycoin , 多边形

Answer 1

There are quite a few ways of going about doing this, and because there is no built-in/standard way of doing what you want, then here are a few handy scripts: Raphael.js and

For a method with just javascript and some CSS, here's one I found that uses some math to check for the line. Here's the JSFiddle code:

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")
        }           
    }) 

There is also a helpful tutorial here for animation with JavaScript.

Sorry I couldn't help much, but hopefully this will point you in the right direction.