плавная траектория движения обновляемая

@vooduq · Регистрация: 06.06.2013

Студворк — интернет-сервис помощи студентам

к примеру за курсором летит птица, но не с линейной функцией приближения

кто то имел дело с такими рода проектами?
советы, как минимизировать затраты ресурсов, ссылки

@Padimanskas · 29.11.2013, 06:05

Сообщение от vooduq

за курсором летит птица, но не с линейной функцией приближения

А с какой?

Сообщение от vooduq

кто то имел дело с такими рода проектами?

Есть такие люди

Сообщение от vooduq

советы, как минимизировать затраты ресурсов

JavaScript
1
2
3
4
5
6
function fn(time){
    // Анимация
    requestAnimationFrame(fn);
}
var reqAni = requestAnimationFrame(fn); // Запустить анимацию
cancelAnimationFrame(reqAni); // Остановить анимацию

Сообщение от vooduq

ссылки

Вводите в поисковый запрос: animation when mousemove event occur JavaScript
Или задайте вопрос на форуме: Please tell me how to make smooth animation of the flying bird with JavaScript

@vooduq · 29.11.2013, 16:02 **[ТС]**

Спасибо.

Смотри, есть траектория:
1 клик - left:100px, 2 клика - left:300px, 3 клика - left:350px, 4 клика - left:500px.
Когда мы делаем один клик, получаем траекторию 0px -> 100px автоматически объект двигается к 100px за 1000мс. Если во время этого движения кликаем еще раз - получаем новую траекторию: 0 -> 100px -> 300px. Но, во время второго клика мы уже двигаемся не с 0 а с текущего положения, к примеру 30px -> 100px -> 300px за 700 (1000-300) миллисекунд допустим по функции квадратного корня т.е. быстро->нормально->медленно->стоп.

Добавлено через 6 минут
А теперь представь что таких объектов 5 штук, и они стоят в ряд первый на 0, второй на уровне 1 клик, третий 2-го и т.д.
Все они делают одинаковое количество шагов, но для последнего первый шаг это положение первого объекта т.е. 0. Типа карусель.
Или как сделать лучше?

Добавлено через 13 минут
Есть функция для получения графика траектории, пример выхода ( три клика вперед ):

JavaScript
1
2
3
4
5
6
7
8
9
Object 
0 Object
left 0
1 Object
left 290
2 Object
left 600
3 Object
left 800

И есть функция для анимации http://jsfiddle.net/PHL5g/8/

HTML+CSS

HTML5
1
2
3
4
5
<div id="test-container">
    <div id="item"></div>
    <div id="button" class="button-right">right</div>
    <div id="button" style="left:0;" class="button-left">left</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#test-container {
    border:3px solid white;
    width:454px;
    height:300px;
    margin:30px auto 0;
    position:relative;
    background:rgba(0,0,0,.4);
}
 
#item {
    border:2px solid white;
    width:50px;
    height:50px;
    position:absolute;
    background:maroon;
    top:100px;
    left:0;
}
 
#button {
    width:80px;
    border:2px solid white;
    color:white;
    position:absolute;
    right:1px;
    bottom:1px;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var buttonRight = document.getElementsByClassName('button-right')[0];
var buttonLeft = document.getElementsByClassName('button-left')[0];
var item = document.getElementById('item');
buttonRight.addEventListener('click',function(){ handler('right',1000); },false);
buttonLeft.addEventListener('click',function(){ handler('left',1000); },false);
 
var clickH = 0;
var funcStart = false;
var left0blockX,block0Y,equal,razn,now,start;
function handler(side,time){
    if(side === 'right')
        clickH++;
    else
        clickH--;
    start = (new Date()).getTime();
    block0LeftX = parseInt(item.style.left)||0;
    block0LeftY = 100*clickH - block0LeftX;
    if(!funcStart){
        animate();
        funcStart = true;
    }
 
        function animate(){
            now = (new Date()).getTime();
            razn = now - start;
            equal = razn/time;
 
                if(equal<1){
                    item.style.left = block0LeftX + block0LeftY*Math.sin(equal*Math.PI/2) + 'px';
                    setTimeout(animate,16);
                }
                else{
                    item.style.left = block0LeftX + block0LeftY + 'px';
                    funcStart = false;
                }
        };
};

Но суть именно как проложить путь 0 -> 100 -> 300 а не 0 -> 300

Добавлено через 33 минуты
Приблизительная формула:
x = now;
x1 = 290;
x2 = 600;
x3 = 800;

1 клик y1 = x1 - x;
2 клика y2 = (y1) + x2;
3 клика y3 = (y1) + (y2) + x3;

@vooduq · 02.12.2013, 04:20 **[ТС]**

вот что я имею ввиду http://jsfiddle.net/zgnrU/1/ ( еще не доделанная )

HTML+CSS

HTML5
1
2
3
4
<div id="test-container">
    <div id="item"></div>
    <div id="button" class="button-right">right</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#test-container {
    border:3px solid white;
    width:454px;
    height:300px;
    margin:30px auto 0;
    position:relative;
    background:rgba(0,0,0,.4);
}
 
#item {
    border:2px solid white;
    width:50px;
    height:50px;
    position:absolute;
    background:maroon;
    top:100px;
    left:0;
}
 
#button {
    width:80px;
    border:2px solid white;
    color:white;
    position:absolute;
    right:1px;
    bottom:1px;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var buttonRight = document.getElementsByClassName('button-right')[0];
var buttonLeft = document.getElementsByClassName('button-left')[0];
var item = document.getElementById('item');
var step = 0;
buttonRight.addEventListener('click',function(){ step++;move(1600); },false);
 
var map = [{left:100,top:30},{left:150,top:100},{left:300,top:30},{left:500,top:130},{left:100,top:100},{left:300,top:30},{left:500,top:90},{left:100,top:0},{left:30,top:160},{left:100,top:60}];
var started = false;
var start,coefic;
function move(time){
    if(!started){
        start = (new Date().getTime());
        started = true;
        mainProcessor(); // обновляются данные только шаги, и текущее положение элемента
    }
    var ClickTime = (new Date().getTime());
    var raznClickTime = (ClickTime - start);
    coefic = ((time + raznClickTime)/time)*2;
 
        function mainProcessor(){
            var n = 0;
            var count = 0;
            var leftX = parseInt(item.style.left)||0; // берем текущее положение
            var leftY = map[n].left - leftX;
            var topX = parseInt(item.style.top)||0;
            var topY = map[n].top - topX;
            processor();
 
                function processor(){
                    count++;
                    var now = (new Date().getTime());
                    var razn = now - start;
                    var equal = razn/time*coefic||0; var a = equal - n;
                    if(a<1){
                        item.style.left = leftX + leftY*Math.sin(a*Math.PI/2) + 'px';
                        item.style.top = topX + topY*Math.sin(a*Math.PI/2) + 'px';
                        console.log('-------------\nclick: ' + step + '\ncount: ' + count + ' \ntime: ' + (1) + '\nnow coefic: ' + coefic + '\nnow equal: ' + equal + '\nleft: ' + item.style.left + '\nnow: ' + ((new Date().getTime()) - start));
                        setTimeout(processor,1);
                    }
                    else{
                        item.style.left = leftX + leftY + 'px';
                        item.style.top = topX + topY + 'px';
                        if(n+1<step){
                            n++;
                            leftX = parseInt(item.style.left)||0;
                            leftY = map[n].left - leftX;
                            topX = parseInt(item.style.top)||0;
                            topY = map[n].top - topX;
                            processor();
                        }
                        else{
                            started = false;
                            step = 0;
                        }
                    }
                };
 
            };
};

Добавлено через 21 минуту
правда что-то с коэффициентом не так, не пойму почему к примеру 360+600/600 дает 1.6, но когда мы умножаем 1.6*360 получаем 576 какого фига, не пойму

Комментарий модератора

Код должен быть в сообщении. Песочницы - это бонус. Сегодня они есть, а завтра — нет.

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404

	плавная траектория движения обновляемая 29.11.2013, 05:39. Показов 2169. Ответов 3 Метки нет (Все метки) к примеру за курсором летит птица, но не с линейной функцией приближения кто то имел дело с такими рода проектами? советы, как минимизировать затраты ресурсов, ссылки 0