Анимация 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

Код готов привести (для оптимизации), если это единственный выход. Но надеюсь есть принципиально более простой подход!


Ответы (0 шт):