Javascript-форум - Анимация. Увеличение и уменьшение длины линии

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Анимация. Увеличение и уменьшение длины линии (https://javascript.ru/forum/jquery/57552-animaciya-uvelichenie-i-umenshenie-dliny-linii.html)

Анимация. Увеличение и уменьшение длины линии

Имеется код, в котором содержится описание линий(одна - короче, другая - длиннее). Нужно, чтобы при нажатии кнопки "Go" длины линий изменились(длинная стала меньше, короткая - длиннее).Анимация...чтобы было видно как меняются длины этих линий. Помогите пожалуйста.

<!DOCTYPE html>
<html>
<head>
<title>Фон</title>
<meta charset="utf-8">
<link href="style.php" type="text">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">

#Go {
width:30px;
position:absolute;
top:110px;
left:190px;
}

#Fon {
background-color:#40e0d0;
position:absolute;
top:100px;
left:100px;
right:100px;
bottom:100px;
}

</style>
<script type='text/javascript'>
$(document).ready(function() {

function Nit(x, y, len)
{
this.x = x; // координата х
this.y = y; // координата у
this.len = len;
this.draw = function(context, color, globalAlpha) {
context.beginPath();
context.globalAlpha = globalAlpha;
context.lineWidth = 1;
context.strokeStyle=color;
context.moveTo(this.x,this.y);
context.lineTo(this.x,this.y + len);
context.stroke();
};
}

function NachNit()
{
var nitP = new Nit(115,55,120);
var nitL = new Nit(55,60,430);
var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
nitP.draw(context, "#000000",1);
nitL.draw(context, "#000000",1);
}

function Go()
{
}

NachNit();
$('#Go').click(Go);

});
</script>
</head>
<body>
<input type="button" id="Go" value="GO" />
<canvas id="example" width="1000" height="800"></canvas>
</body>
</html>

canvas анимация размера линии

sVETLANA2694,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

:-?

<!DOCTYPE html>
 <html>
 <head>
 <title>Фон</title>
 <meta charset="utf-8">
 <link href="style.php" type="text">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <style type="text/css">


 #Go {
 width:50px;
 position:absolute;
 top:110px;
 left:190px;
 background-color: #008000;
 }
 #Go:disabled{
  background-color:  #FF0000;
 }

 #Fon {
 background-color:#40e0d0;
 position:absolute;
 top:100px;
 left:100px;
 right:100px;
 bottom:100px;
 }

 </style>
 <script type='text/javascript'>
 $(document).ready(function() {
    function Nit(x, y, len) {
        this.x = x;
        this.y = y;
        this.len = len;
        this.draw = function(context, color, globalAlpha) {
            context.beginPath();
            context.globalAlpha = globalAlpha;
            context.lineWidth = 4;
            context.strokeStyle = color;
            context.moveTo(this.x, this.y);
            context.lineTo(this.x, this.y + this.len);
            context.stroke()
        }
    }
    var nitP = new Nit(115, 60, 120);
    var nitL = new Nit(55, 60, 430);
    var canvas = document.getElementById("example");
    var context = canvas.getContext("2d");
    nitP.draw(context, "#000000", 1);
    nitL.draw(context, "#000000", 1);

    function Go() {
        var self = this;
            self.disabled = "disabled"
        var from = nitP.len,
            to = nitL.len;
        timer({
            from: from,
            to: to,
            duration: 5 * 1E3,
            draw: function(x) {
                context.clearRect(nitP.x - 2, nitP.y, 4, nitP.len);
                nitP.len = x;
                nitP.draw(context, "#000000", 1)
            },
            callback: function() {
                nitP.draw(context, "#FF0000", 1)
            }
        });
        timer({
            from: to,
            to: from,
            duration: 5 * 1E3,
            draw: function(x) {
                context.clearRect(nitL.x - 2, nitL.y, 4, nitL.len);
                nitL.len = x;
                nitL.draw(context, "#000000", 1)
            },
            callback: function() {
                nitL.draw(context, "#FF0000", 1);
                self.disabled = null
            }
        })
    }

    function timer(a) {
        var c = performance.now();
        requestAnimationFrame(function d(b) {
            b = (b - c) / a.duration;
            1 < b && (b = 1);
            a.draw(a.from + (a.to - a.from) * b | 0);
            b == 1 && a.callback && a.callback();
            1 > b && requestAnimationFrame(d)
        })
    }
    $("#Go").click(Go)
});
 </script>
 </head>
 <body>
 <input type="button" id="Go" value="GO"  />
 <canvas id="example" width="1000" height="800"></canvas>
 </body>
 </html>