Академический Документы
Профессиональный Документы
Культура Документы
Otchet 28
Загружено:
Владислав МасюкОригинальное название
Авторское право
Доступные форматы
Поделиться этим документом
Поделиться или встроить документ
Этот документ был вам полезен?
Это неприемлемый материал?
Пожаловаться на этот документАвторское право:
Доступные форматы
Otchet 28
Загружено:
Владислав МасюкАвторское право:
Доступные форматы
УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ «БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ
УНИВЕРСИТЕТ ИНФОРМАТИКИ И РАДИОЭЛЕКТРОНИКИ» ФИЛИАЛ «МИНСКИЙ
РАДИОТЕХНИЧЕСКИЙ КОЛЛЕДЖ»
Программные средства создания Internet-приложения
Лабораторная работа №28
«Применение функций временной задержки. Анимации в JavaScript»
Выполнила: Проверила:
учащаяся группы №62492 Виничук О.Н.
Гулида А.В.
Минск 2020
1. Цель работы
Формирование умений применения функций временной задержки, навыков
создания анимации средствами JavaScript.
2. Задание
Создать HTML-документ, содержащий сценарии с использованием функций
временной задержки на языке JavaScript.
3. Оснащение работы
ПК, текстовый редактор, браузер.
Результат выполнения работы:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
height: 3000px;
}
.slider {
position: relative;
overflow: hidden;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 33%;
max-width: 33%;
}
.slider__control {
position: absolute;
top: 50%;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
height: 50px;
transform: translateY(-50%);
background: rgba(0, 0, 0, .5);
}
.slider__control_show {
display: flex;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg
xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-
4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_right::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg
xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-
1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.slider__item>div {
line-height: 250px;
font-size: 100px;
text-align: center;
}
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider__wrapper">
<div class="slider__item">
<div style="height: 250px; background: orange;">1</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: green;">2</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: violet;">3</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: coral;">4</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: brown;">5</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: orchid;">6</div>
</div>
<div class="slider__item">
<div style="height: 250px; background: aqua;">7</div>
</div>
</div>
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#"
role="button"></a>
</div>
...
// обработчик события click для кнопок "назад" и "вперед"
let _controlClick = function (e) {
if (e.target.classList.contains('slider__control')) {
e.preventDefault();
let direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
_transformItem(direction);
}
};
let _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя
click
_sliderControls.forEach(function (item) {
item.addEventListener('click', _controlClick);
});
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem('right');
},
left: function () { // метод left
_transformItem('left');
}
}
}
}());
const slider = multiItemSlider('.slider')
</script>
<script language='JavaScript' type='text/JavaScript'>
<!--
function reset1(){
clearTimeout(my_time);
document.getElementById('i1').style.left= "500px";
document.getElementById('i1').style.top= "100px";
document.getElementById("msg").innerHTML="";
}
function move_img(str) {
var x=document.getElementById('i1').offsetTop;
x= x +100;
document.getElementById('i1').style.top= x + "px";
}
function disp(){
var step=10;
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
if(y < 600 ){y= y +step;
document.getElementById('i1').style.top= y + "px"; // vertical movment
}else{
if(x < 800){x= x +step;
document.getElementById('i1').style.left= x + "px"; // horizontal movment
}
}
//////////////////////
}
function timer(){
disp();
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x + " Y : " + y
my_time=setTimeout('timer()',10);
}
//-->
</script>
</body>
</html>
Контрольные вопросы
1. Для чего необходим setInterval?
JavaScript-анимация применяется там, где не подходит CSS.
Например, по сложной траектории, с временной функцией, выходящей за
рамки кривых Безье, на canvas. Иногда её используют для анимации в старых IE.
setInterval
С точки зрения HTML/CSS, анимация – это постепенное изменение стиля
DOM-элемента. Например, увеличение координаты style.left от 0px до 100px
сдвигает элемент.
Если увеличивать left от 0 до 100 при помощи setInterval, делая по 50 изменений в
секунду, то это будет выглядеть как плавное перемещение. Тот же принцип, что и в кино:
для непрерывной анимации достаточно 24 или больше вызовов
setInterval в секунду.
2. Опишите структуру анимации.
На основе requestAnimationFrame можно соорудить и гораздо более мощную, но в
то же время простую функцию анимации. У анимации есть три основных параметра:
duration;
общее время, которое должна длиться анимация, в мс. Например, 1000;
timing(timeFraction).
3. Охарактеризуйте функцию bounce.
Функция bounce делает то же самое, только наоборот: «подпрыгивание»
начинается сразу.
Эта функция немного сложнее предыдущих и использует специальные
коэффициенты:
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
Упругая анимация. Эта функция зависит от дополнительного параметра x,
который определяет начальный диапазон.
function elastic(x, timeFraction) {
return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 *
timeFraction)
}
