Нужно написать программу для перемещения гифки, диаграмма по которой она должна двигаться на прикрепленном фото

@Vysuado339 · Регистрация: 01.10.2023

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

Пока что код такой:

PHP/HTML
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
<html>
<head>
<style>
#im2 {position:absolute; left:0; top:0}
</style>
</head>
<body>
<img src="fon3.jpg" id="im1" width="400" height="400" >
 
<img src="3.gif" id="im2" width='50' height='50' >
<script>
function f()
{
 
x=x+20;
 
r2.style.left=x
 
 
if (x<x1-x2) 
 
setTimeout("f()",100);
}
function f1(y,x)
{
 
Y=Y+20;
r2.style.top=y
 
if (y<y1-y2) 
 
setTimeout("f()",100);
}
x=0;
 
r1=document.getElementById('im1')
 
r2=document.getElementById('im2')
x1=r1.width 
x2=r2.width 
 
f();
y1=r1.height
y2=r2.height
f1(0,x1);
</script>
</html>

На фото нарисованно какое должно быть передвижение:

@FFPowerMan · 29.10.2023, 13:33

Движение вправо: увеличение координаты X. Движение вниз: увеличение координаты Y. В чем проблема?

@mr_dramm · 29.10.2023, 14:03

Быстрый анализ говорит, нам потребуется 3 действия перемещения вправо, вниз, влево

Сделать можно множеством способов, с помощью transition и js или только с css animation. Но так как мы в разделе js то...
Не рекоммендуется делать это с помощб requestAnimationFrame так как css анимация плавнее выглядит, хотя это может зависеть от частоты монитора например на мониторе 400герц тики будут не запетны, но ... ладно го кодить

Демка

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: orange;
      transition: transform 1s;
    }
    </style>
</head>
<body>
  <div class="box"></div>
<script>
  const LEFT = 0, RIGHT = 1, DOWN = 2, offsetX = 200, offsetY = 100;
 
  const a = [DOWN, LEFT, DOWN, RIGHT];
  // чтобы не запутаться в неправлениях, а потом их попать, удобно же
  a.reverse()
  const box = document.querySelector(".box")
  let x = 0, y = 0; 
 
  x += offsetX;
  setTimeout(()=> box.style.transform = `translate(${x}px, 0px)`, 0)
  box.addEventListener("transitionend", ()=> {
    if(a.length == 0) return 
    const d = a.pop()
 
    if(d == DOWN) {
      y+= offsetY;
    }
    else if(d == LEFT) {
      x-= offsetX
    }
    else{
      x+= offsetX
    }
    box.style.transform = `translate(${x}px, ${y}px)`
  })
 
</script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы 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 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@FFPowerMan 2158 / 1238 / 509 Регистрация: 11.10.2018 Сообщений: 6,283
	29.10.2023, 13:33
	Движение вправо: увеличение координаты X. Движение вниз: увеличение координаты Y. В чем проблема? 1

Опции темы

Нужно написать программу для перемещения гифки, диаграмма по которой она должна двигаться на прикрепленном фото

Решение