Рецепт: управление светом через затемнение области
1. Создаём план помещения и вставляем его в наше изображение
2. Для удобства создаём новый слой над нашим фоном
...и, чтоб фон не мешал, блокируем фоновый слой от изменений
3. Выбираем инструмент рисования линий
4. Создаём фигуру, покрывающую площадь комнаты
5. Заливае фигуру чёрным цветом и ставим "непрозрачность" в 30%
6. Делаем для нашей фигуры понятное имя:
7. Сохраняем изображение и загружаем его в План
8. Создаём состояние для управления светом
Общий смысл в следующем -- если свет включен, то показываем наш фон комнаты с прозрачностью 10% (светло), иначе с прозрачностью 50% (темно). И, соответствено, по нажатию на фон меняем состояние освещения. Кстати, совсем прятать фон нельзя, т.к. в таком случае он перестанет отрабатывать событие нажатия.
9. Небольшой тюнинг.
Вышеописанное работает, но по клику фон плавно меняется с чёрного, до нужной нам степени прозрачности, что не очень красиво. Сделаем, чтобы оно менялось от 10% до 50% и обратно. Переходим в закладку "Дополнительный код CSS" и вставляем следующий код:
Код: Выделить всё
@keyframes fade50to10 {
from { opacity:0.5; }
to { opacity:0.1; }
}
@keyframes fade10to50 {
from { opacity:0.1; }
to { opacity:0.5; }
}
.fade10to50 {
display:block;
opacity:0.1;
animation:fade10to50 ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.6s;
}
.fade50to10 {
display:block;
opacity:0.5;
animation:fade50to10 ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.6s;
}
Переходим в наше состояние и меняем классы на следующие (они берутся из нашего CSS-кода):
Всё, теперь наш фон красиво и плавно меняется с 10 до 50 и обратно:
