0 / 0 / 0
Регистрация: 03.09.2018
Сообщений: 2
1

Как сделать анимацию на js

03.09.2018, 16:53. Показов 438. Ответов 1

Есть у меня изображение я хочу чтобы оно перемещалось каждые 20 миллисекунд я незнаю как это сделать помогите!!!
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.09.2018, 16:53
Ответы с готовыми решениями:

Как сделать анимацию ?
Нужно чтоб Второй блок(id block_two) выезжал справа налево закрывая собой Первый блок(id block_one...

Как сделать анимацию на сайте?
Здравствуйте друзья. Флеш вообще не знаю. Сейчас столкнулся с тем, что нужно сделать на сайте...

Как с CountUp.js сделать анимацию?
Ссылка на скрипт: https://github.com/inorganik/CountUp.js Помогите разобраться новичку - как...

Как сделать плавную анимацию height?
Привет. Создал страницу с верхним меню навигации. При прокрутке контента меню фиксируется и...

1
Эксперт JS
2028 / 1087 / 408
Регистрация: 29.04.2016
Сообщений: 2,603
03.09.2018, 17:23 2
super-js998,
Не вижу, ни разметки, ни имеющегося кода поэтому как вариант

HTML5
1
2
3
4
5
6
7
8
<div class="workSpace">
    <div class="box" id="one" data-speed-x="2" data-speed-y="6">
        <img src="https://data.pixiz.com/output/user/frame/preview/400x400/5/5/8/3/713855_be03a.jpg">
    </div>
    <div class="box" id="two" data-speed-x="7" data-speed-y="2">
        <img src="http://e-opinions.ru/image.aspx?f=uploads/wtiquhwubuqlvnx.jpg&max=380">
    </div>
</div>
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
funnyBoxes();
 
 
function funnyBoxes(){ var box = document.querySelectorAll('.box'), workSpace = document.querySelectorAll('.workSpace')[0], interval;
    
    var workArea = {}, sizeBox = {}, coord = {}, move = {}, speed = {};
    var coordinates = document.querySelectorAll('.coord');                                          
    [...box].map((e,i)=>{
        workArea[i] ={  x : workSpace.offsetWidth - e.offsetWidth,                                          y : workSpace.offsetHeight - e.offsetHeight };
        sizeBox[i] ={   x : e.offsetWidth,                                                                  y : e.offsetHeight };
        coord[i] ={     x : +window.getComputedStyle(e, null).getPropertyValue('left').replace('px',''),    y : +window.getComputedStyle(e, null).getPropertyValue('top').replace('px','') };
        speed[i] ={     x : +e.getAttribute('data-speed-x'),                                                y : +e.getAttribute('data-speed-y') };
        move[i] = {     right : true, down : true };
    });
    calculateMoves();
 
 
    function calculateMoves(){
        interval = requestAnimationFrame(calculateMoves);
        
        [...box].map((e,i)=>{
            coord[i].x <= workArea[i].x && move[i].right || coord[i].x <= 0 ? moveRight(e,i)                : '';
            coord[i].x >= workArea[i].x || coord[i].x < workArea[i].x && !move[i].right ? moveLeft(e,i)     : '';
            coord[i].y <= workArea[i].y && move[i].down || coord[i].y <= 0 ? moveDown(e,i)                  : '';
            coord[i].y >= workArea[i].y || coord[i].y < workArea[i].y && !move[i].down ? moveUp(e,i)        : '';
            
        });
        coordinates[0].innerHTML = 'x: ' + coord[0].x + ' <br> y: ' + coord[0].y;                                                                       
        coordinates[1].innerHTML = 'x: ' + coord[1].x + ' <br> y: ' + coord[1].y;                                                                       
        
    }
 
    function moveRight(e,i){
        move[i].right = true;
        coord[i].x += speed[i].x;
        e.style.left = coord[i].x + 'px';
    }
 
    function moveLeft(e,i){
        move[i].right = false;
        coord[i].x -= speed[i].x;
        e.style.left = coord[i].x + 'px';
    }
 
    function moveDown(e,i){
        move[i].down = true;
        coord[i].y += speed[i].y;
        e.style.top = coord[i].y + 'px';
    }
 
    function moveUp(e,i){
        move[i].down = false;
        coord[i].y -= speed[i].y;
        e.style.top = coord[i].y + 'px';
    }
 
    document.querySelectorAll('.workSpace')[0].onclick = ()=> { cancelAnimationFrame(interval); };
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
html, body{
    margin: 0px 0px 0px 0px;
    width:  100%;
    height:  100%;
    overflow:  hidden;
}
 
.workSpace{
    width: 100%;
    height: 100%;
    background: #eee5ff;
    overflow:  hidden;
}
 
img{
    width:  100%;
    position:  relative;
    top: -10px;
}
 
#one{
    width: 440px;
    height: 283px;
    overflow: hidden;
    position: absolute;
    left: 10px;
    top: 0px;
}
 
#two{
    width: 430px;
    height: 265px;
    overflow:  hidden;
    position: absolute;
    left: 640px;
    top: 40px;
}
 
.coord{
    width: 100%;
    height: 120px;
    background: rgba(255, 235, 59, 0.7);
    position: relative;
    top: -290px;
    text-align: left;
    color: #ff1100;
    font-size: 40px;
    font-family: comic sans ms;
    line-height: 56px;
    display: none;
}
Посмотрите код может что и получится у вас.

Добавлено через 4 минуты
Цитата Сообщение от super-js998 Посмотреть сообщение
я хочу чтобы оно перемещалось
Куда оно должно перемещаться? Вверх? Вниз? Влево/право? Или сразу во всех направлениях?
Начальная точка? Левая граница экрана или правая? Или вообще от центра экрана?
Подробнее опишите вашу задачу. По клику? При наведении мышки? Или еще как? Кстати, это можно реализовать на css немного добавив js
2
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.09.2018, 17:23

Сделать анимацию по примеру
имеется такой пример: http://livedemo00.template-help.com/wt_43436/#!/page_splash хотелось бы...

Как сделать анимацию?
Как сделать анимацию в Photoshop с русской версией из картинок?

Как сделать анимацию?
Вообщем, есть отрисованный объект (снеговик) как заставить его перемещаться по экрану? Вот код { ...

Как сделать анимацию ?
Доброго всем времени суток. Я в Buildere C++ новичок. Прошу помощи, битый час мучаюсь, не могу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.