Как сделать плавное изменение числа в js коде?

Question

[Владислав Чернушевич]

Есть такой код на js

bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;

где xy - это координаты положения курсора. В зависимости от положения меняется центр радиального градиента. Как сделать так, чтобы значения координат изменялись плавно, чтобы центр перемещался не сразу за курсором, а с плавно и с некоторой задержкой?

Answer 1

[Евгений Петров]

element {
	transition: background .5s .5s;
}

Comments

[Nikolay Talanov]

Градиенты нельзя менять транзишеном :) Градиенты можно анимировать на css с помощью:
1) Background-position
2) Дополнительного элемента с другим градиентом и изменением opacity (с 1 до 0 у оригинала и с 0 до 1 у второго).
3) Css animation не чекал

[Евгений Петров]

Nikolay Talanov: Хмм... Никогда не пробовал, но помнится, в спецификации указано, что нельзя менять тип градиента и количество точек останова.

[Nikolay Talanov]

codepen.io/suez/pen/bea3e2eae19c82b1f6ad69ea1d1c56... вот попытка изменения цветов линейного бг и изменения позиции radial градиента при hover'е.

[Евгений Петров]

Nikolay Talanov: Да, запишу для себя в разряд загадок. Наверняка, что-то я не так понял из спецификации.

[Nikolay Talanov]

Евгений Петров: Где то читал, что в IE10 работает транзишен градиента :)

[Евгений Петров]

Nikolay Talanov: Да, я не вчитался — анимируются только точки останова. Их позиция и цвета. А позиция старта градиента увы.

Answer 2

[Nikolay Talanov]

Если такое не умеет GSAP (а по ходу он не умеет), то по идее это должно решаться с помощью requestAnimationFrame. То есть пишите функцию анимации, которая стартует raf, меняя значение с использованием изинга. В теории все звучит легко, но на деле при привязке к mousemove начинается адовая херня. Надо юзать что-то типа throttle, но у меня уже голова болит таким в воскресенье вечером заниматься.
codepen.io/suez/pen/ab687e94e1a7de55b483c454988e8c73 - вот оооооочень кривая демка с говнокодом, которая анимирует позицию радиального градиента по клику. Если в самом низу в $(document).on("click" этот клик поменять на mousemove, то увидите как все будет дергаться (о чем я собственно и писал выше, упоминая необходимый throttle). В этой демке уже предусмотрена система остановки анимации и старта новой. То есть если во время анимации кликнуть по блоку снова, то анимация корректно переедет в новое место. Но с mousemove без throttle по виду забивается весь тред при быстром движении мышью и получается веселуха.

Comments

[Владислав Чернушевич]

www.impossible-bureau.com/work - вот реализовано то, что нужно. Только не могу понять как

[Nikolay Talanov]

Владислав Чернушевич: У них реализовано как то вот так i.imgur.com/rxHRIM1.png
Код к сожалению глянуть я не в состоянии, ибо там все минифицировано. Но там 100% юзается анимация на raf, только вместо непосредственного изменения свойства gradient они меняют положение маски как я понимаю.

[Nikolay Talanov]

Владислав Чернушевич: В общем там идет главный блок с общим gradientom с углом в 45%. И есть 2 блока маски, один с красным радиальным, другой с фиолетовым. Если ховеришь верхнюю часть блока - активен красный, если нижнюю то фиолетовый. При активности соответственно opacity становится 1.