Анимация цифр
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tsifry{
display: inline-block;
width: 100px;
height: 40px;
margin: 10px 10px 10px 10px;
border-bottom: 1px solid #000;
text-align: center;
}
.skidka{
display: inline-block;
width: 200px;
height: 20px;
padding: 20px 20px 20px 20px;
border: 10px solid #4E82BE;
text-align: center;
cursor: pointer;
}
.skidka:hover{
border: 10px solid #132E5A;
}
.tekst{
display: inline-block;
width: 100px;
height: 20px;
text-align: center;
margin: 20px 0px 20px 0px;
}
</style>
</head>
<body>
<div class="tsifry">900</div>
<div class="skidka">Получить скидку?</div>
<script>
let tsifry = document.querySelector(".tsifry");
const skidka = document.querySelector(".skidka");
let tekst = document.querySelector(".tekst");
let odinraz = false;
function skidkaFun(){
if(!odinraz){
let y = tsifry.innerHTML;
let x = y / 100 * 10;
let z = y - x;
console.log(y);
console.log(x);
tsifry.innerHTML = z;
odinraz = true;
}
}
skidka.addEventListener("click", skidkaFun);
</script>
</body>
</html>
Не могу сообразить как сделать так что бы показывалась смена цифр. При нажатие цифры убавлялись до нужного значение. |
|
function timer(b) {
return {
play: function() {
var d = performance.now();
c = !0;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 <= a && (a = 1, b.callback && b.callback());
b.elem.innerHTML = b.from + (b.to - b.from) * a | 0;
1 > a && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 3,
to : 0,
duration: 2 * 1000,
elem : span,
callback : function() { this.elem.classList.add('test')}
});
but.addEventListener('mousedown', anim.play);
пробую разобраться функция с именем timer с параметромb что она делает почему то сразу возращает, далее пишет что play: это что? название функции если да то почему она в начале переменная? то что за : Что она делает создает переменную которая возращает временную метку и переменная которая не ровна нулю requestAnimationFrame это для окна? функция названа e и есть параметр a в ней действия а будет ровна ... и все дальше поплыл ... |
анимация чисел js
Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tsifry{
display: inline-block;
width: 100px;
height: 40px;
margin: 10px 10px 10px 10px;
border-bottom: 1px solid #000;
text-align: center;
}
.skidka{
display: inline-block;
width: 200px;
height: 20px;
padding: 20px 20px 20px 20px;
border: 10px solid #4E82BE;
text-align: center;
cursor: pointer;
}
.skidka:hover{
border: 10px solid #132E5A;
}
.tekst{
display: inline-block;
width: 100px;
height: 20px;
text-align: center;
margin: 20px 0px 20px 0px;
}
</style>
</head>
<body>
<div class="tsifry">900</div>
<div class="skidka">Получить скидку?</div>
<script>
const animateNum = (elem, duration) => (from, to) => {
const beginTime = performance.now();
const animate = currentTime => {
let delta = (currentTime - beginTime) / duration;
delta = Math.min(1, delta);
let num = (from + (to - from) * delta) | 0;
elem.textContent = num;
delta == 1 || requestAnimationFrame(animate)
};
requestAnimationFrame(animate)
};
let tsifry = document.querySelector(".tsifry");
const skidka = document.querySelector(".skidka");
let tekst = document.querySelector(".tekst");
const duration = 1200;
const showNum = animateNum(tsifry, duration);
function skidkaFun(){
let y = +tsifry.innerHTML;
let x = y / 100 * 10;
let z = y - x;
showNum(y, z)
}
skidka.addEventListener("click", skidkaFun, {once : true});
</script>
</body>
</html>
|
рони,
Все сработало, не уверен что получу объяснение как это скрипт работает, но можно хотя бы ссылки на русском языке что бы у меня была возможность разобраться |
Сергей Ракипов,
код сделан на основе темы из учебника, ссылка во втором посте, там всё на русском. https://learn.javascript.ru/js-anima...tura-animatsii |
рони,
Спасибо по изучаю! |
рони,
Вроде понятнее, думаю со временем разберусь |
Сергей Ракипов,
алгоритм анимации, есть путь любой величины, это всегда 100% или 1, есть время любой величины, это всегда 100% или 1. условно исходная точка 3 километр, начало в 11 : 00, план похода: 5 километров за 1 час. прошло время... сейчас 11 : 20, вопрос где мы сейчас? 11 : 20 минус 11 : 00 = 20 минут. 60 минут это 100%, 20 минут это 33%. 5 километров это 100%, 33% это 5 * .33 = 1.65км. 3 + 1.65 = 4.65 км. каждый момент времени, вычисляется процент времени который прошёл, и согласно этому проценту, к начальной величине добавляется согласно этим процентам, запланированное изменение. 3 + 1.65 = 4.65 км. 3 + 3.3 = 6.3 км. 3 + 5 = 8 км. если величина прошедшего времени, превысила 100% , проценты выравниваются до 100%, происходит последнее изменение, и функция останавливается. |
рони,
Спасибо хорошее объяснение. И я вчера попробовал по делать скрипты с использованием requestAnimationFram Простенькие получилось, думаю со временем дойду и до вариантов по сложнее. |
| Часовой пояс GMT +3, время: 22:45. |