Анимация show/hide содержимого canvas
Пожелание очень простое, но никак не могу найти такое же простое решение.
Есть содержимое canvas. Нужно (начиная с темного экрана) плавно показать его радиальным переходом от центра, а потом также скрыть, от краев к центру.
Мне удалось это сделать, но даже не буду приводить весь код, слишком длинно.
Ключевые моменты:
- Добавляется вторая канва с бОльшим
z-index - На ней создается
RadialGradientсaddColorStop(0, 'rgba(0,0,0,0)')иaddColorStop(1.0, 'rgba(0, 0, 0, 1)') - В процессе анимации применяется
setTransformэтого градиента для расширения и сжатия. При этом приходится очень хитро ставить параметрыsetTransformиfillRect
Код готов привести (для оптимизации), если это единственный выход. Но надеюсь есть принципиально более простой подход!