Код анимации
Копировать Выделить всё
//== Файл Стартовый.os == начало
Перем ДФ, Флажок1, Флажок2, Подпись1, Подпись2, Ползунок1, Ползунок2, Ползунок3, Куб, БлокВцентре, Икс, Игрек;
Процедура Флажок1_ПриИзменении() Экспорт
Ползунок1.Отключено = Не Флажок1.Помечен;
Ползунок2.Отключено = Не Флажок1.Помечен;
Ползунок3.Отключено = Не Флажок1.Помечен;
Если Флажок1.Помечен Тогда
Подпись1.Стиль.ЦветФона = ДФ.Цвет.БледноЗеленый;
БлокВцентре.Стиль.Перспектива = Ползунок1.Значение;
Иначе
Подпись1.Стиль.ЦветФона = ДФ.Цвет.БелаяДымка;
БлокВцентре.Стиль.Перспектива = "none";
КонецЕсли;
КонецПроцедуры
Процедура Флажок2_ПриИзменении() Экспорт
Если Флажок2.Помечен Тогда
Подпись2.Стиль.ЦветФона = ДФ.Цвет.БледноЗеленый;
Куб.Стиль.Состояние = ДФ.Состояние.Запущена;
Иначе
Подпись2.Стиль.ЦветФона = ДФ.Цвет.БелаяДымка;
Куб.Стиль.Состояние = ДФ.Состояние.Остановлена;
КонецЕсли;
КонецПроцедуры
Процедура Ползунок1_Ввод() Экспорт
Ползунок1.Стиль.РазмерКартинки = ДФ.Размер(ДФ.АргументыСобытия.Значение - 300, 7);
БлокВцентре.Стиль.Перспектива = ДФ.АргументыСобытия.Значение;
КонецПроцедуры
Процедура Ползунок2_Ввод() Экспорт
Ползунок2.Стиль.РазмерКартинки = ДФ.Размер(ДФ.АргументыСобытия.Значение + 100, 7);
БлокВцентре.Стиль.ИсточникПерспективы = ДФ.ИсточникПерспективы(Икс, ДФ.АргументыСобытия.Значение);
Игрек = ДФ.АргументыСобытия.Значение;
КонецПроцедуры
Процедура Ползунок3_Ввод() Экспорт
Ползунок3.Стиль.РазмерКартинки = ДФ.Размер(ДФ.АргументыСобытия.Значение + 100, 7);
БлокВцентре.Стиль.ИсточникПерспективы = ДФ.ИсточникПерспективы(ДФ.АргументыСобытия.Значение, Игрек);
Икс = ДФ.АргументыСобытия.Значение
КонецПроцедуры
ПодключитьВнешнююКомпоненту("C:\444\111\DeclarativeForms\DeclarativeForms\bin\Debug\DeclarativeForms.dll");
ДФ = Новый ДекларативныеФормы();
ДФ.cssПуть = "cub.css";
Форма1 = ДФ.Форма;
Контент = Форма1.Контент;
Контент.Стиль.Отображать = ДФ.Отображать.Гибкий;
Контент.Стиль.РасположениеСодержимого = ДФ.РасположениеСодержимого.Вцентре;
Контент.Стиль.ВыравниваниеЭлементов = ДФ.ВыравниваниеЭлементов.Центр;
Контент.Стиль.Переполнение = ДФ.Переполнение.Прокрутка;
Контент.Стиль.ЦветФона = ДФ.Цвет.БелаяДымка;
Контент.Стиль.НаправлениеЭлементов = ДФ.НаправлениеЭлементов.Колонка;
Контент.Стиль.НаправлениеЭлементов = ДФ.НаправлениеЭлементов.Колонка;
Контент.Стиль.РазмерШрифта = 20;
БлокВерх = Форма1.ДобавитьДочерний(ДФ.Блок());
БлокВерх.Стиль.Отображать = ДФ.Отображать.Гибкий;
Флажок1 = БлокВерх.ДобавитьДочерний(ДФ.Флажок());
Флажок1.Идентификатор = "usePerspective";
Флажок1.ПриИзменении = ДФ.Действие(ЭтотОбъект, "Флажок1_ПриИзменении");
Флажок1.Стиль.Отображать = ДФ.Отображать.Отсутствие;
Флажок1.Помечен = Истина;
Флажок2 = БлокВерх.ДобавитьДочерний(ДФ.Флажок());
Флажок2.Идентификатор = "runAnimation";
Флажок2.ПриИзменении = ДФ.Действие(ЭтотОбъект, "Флажок2_ПриИзменении");
Флажок2.Стиль.Отображать = ДФ.Отображать.Отсутствие;
Флажок2.Помечен = Истина;
Подпись1 = БлокВерх.ДобавитьДочерний(ДФ.Подпись());
Подпись1.Связь = Флажок1.Идентификатор;
Подпись1.Текст = "Использовать перспективу";
Подпись1.Стиль.Границы = ДФ.Границы(1, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Черный);
Подпись1.Стиль.РадиусГраницы = ДФ.РадиусГраницы(4, 4, 4, 4);
Подпись1.Стиль.Заполнение = ДФ.Заполнение(3, 3, 3, 3);
БлокВерх.ДобавитьДочерний(ДФ.Блок()).Стиль.Ширина = 15;
Подпись2 = БлокВерх.ДобавитьДочерний(ДФ.Подпись());
Подпись2.Связь = Флажок2.Идентификатор;
Подпись2.Текст = "Запустить анимацию";
Подпись2.Стиль.Границы = ДФ.Границы(1, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Черный);
Подпись2.Стиль.РадиусГраницы = ДФ.РадиусГраницы(4, 4, 4, 4);
Подпись2.Стиль.Заполнение = ДФ.Заполнение(3, 3, 3, 3);
БлокСередина = Форма1.ДобавитьДочерний(ДФ.Блок());
БлокСередина.Стиль.ОтступСверху = 20;
БлокСередина.Стиль.Отображать = ДФ.Отображать.Гибкий;
БлокСлева = БлокСередина.ДобавитьДочерний(ДФ.Блок());
БлокСлева.Стиль.НаправлениеЭлементов = ДФ.НаправлениеЭлементов.Строка;
БлокСлева.Стиль.Ширина = 50;
БлокСлеваТекст = БлокСлева.ДобавитьДочерний(ДФ.Блок());
БлокСлеваТекст.Текст = "Перспектива";
БлокСлеваТекст.Стиль.Позиция = ДФ.Позиция.Абсолютно;
БлокСлеваТекст.Стиль.Ширина = 50;
БлокСлеваТекст.Стиль.Сдвиг = ДФ.Поворот(270);
БлокСлеваТекст.Стиль.ОтступСлева = -9;
БлокСлеваТекст.Стиль.ОтступСверху = 185;
Ползунок1 = БлокСлева.ДобавитьДочерний(ДФ.Ползунок());
Ползунок1.Минимум = 300;
Ползунок1.Максимум = 600;
Ползунок1.Значение = 450;
Ползунок1.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Ползунок1.Стиль.Ширина = 300;
Ползунок1.Стиль.Сдвиг = ДФ.Поворот(270);
Ползунок1.Стиль.ОтступСлева = -115;
Ползунок1.Стиль.ОтступСверху = 185;
Ползунок1.Ввод = ДФ.Действие(ЭтотОбъект, "Ползунок1_Ввод");
Ползунок1.Стиль.РазмерКартинки = ДФ.Размер(150, 7);
БлокВцентре = БлокСередина.ДобавитьДочерний(ДФ.Блок());
БлокВцентре.Стиль.Ширина = 400;
БлокВцентре.Стиль.Высота = 400;
БлокВцентре.Класс = "container";
БлокВцентре.Стиль.Отображать = ДФ.Отображать.Гибкий;
БлокВцентре.Стиль.РасположениеСодержимого = ДФ.РасположениеСодержимого.Вцентре;
БлокВцентре.Стиль.ВыравниваниеЭлементов = ДФ.ВыравниваниеЭлементов.Центр;
БлокВцентре.Стиль.Перспектива = 1000;
БлокВцентре.Стиль.ИсточникПерспективы = ДФ.ИсточникПерспективы(0, 1);
Икс = 0;
Игрек = 1;
БлокСправа = БлокСередина.ДобавитьДочерний(ДФ.Блок());
БлокСлева.Стиль.НаправлениеЭлементов = ДФ.НаправлениеЭлементов.Строка;
БлокСправа.Стиль.Ширина = 50;
Ползунок2 = БлокСправа.ДобавитьДочерний(ДФ.Ползунок());
Ползунок2.Класс = "input2";
Ползунок2.Минимум = -100;
Ползунок2.Максимум = 200;
Ползунок2.Значение = 0;
Ползунок2.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Ползунок2.Стиль.Ширина = 300;
Ползунок2.Стиль.Сдвиг = ДФ.Поворот(270);
Ползунок2.Стиль.ОтступСлева = -135;
Ползунок2.Стиль.ОтступСверху = 185;
Ползунок2.Ввод = ДФ.Действие(ЭтотОбъект, "Ползунок2_Ввод");
Ползунок2.Стиль.РазмерКартинки = ДФ.Размер(100, 7);
БлокСправаТекст = БлокСправа.ДобавитьДочерний(ДФ.Блок());
БлокСправаТекст.Текст = "Источник перспективы - вертикаль";
БлокСправаТекст.Стиль.Позиция = ДФ.Позиция.Абсолютно;
БлокСправаТекст.Стиль.Ширина = 300;
БлокСправаТекст.Стиль.Сдвиг = ДФ.Поворот(90);
БлокСправаТекст.Стиль.ОтступСлева = -115;
БлокСправаТекст.Стиль.ОтступСверху = 185;
БлокСнизу = Форма1.ДобавитьДочерний(ДФ.Блок());
БлокСнизу.Стиль.Отображать = ДФ.Отображать.Гибкий;
БлокСнизу.Стиль.Ширина = 500;
БлокСнизу.Стиль.НаправлениеЭлементов = ДФ.НаправлениеЭлементов.Колонка;
БлокСнизу.Стиль.ВыравниваниеЭлементов = ДФ.ВыравниваниеЭлементов.Центр;
БлокСнизу.Стиль.ОтступСверху = 3;
Ползунок3 = БлокСнизу.ДобавитьДочерний(ДФ.Ползунок());
Ползунок3.Класс = "input3";
Ползунок3.Минимум = -100;
Ползунок3.Максимум = 200;
Ползунок3.Значение = 100;
Ползунок3.Стиль.Ширина = 300;
Ползунок3.Ввод = ДФ.Действие(ЭтотОбъект, "Ползунок3_Ввод");
Ползунок3.Стиль.РазмерКартинки = ДФ.Размер(200, 7);
БлокСнизуТекст = БлокСнизу.ДобавитьДочерний(ДФ.Блок());
БлокСнизуТекст.Текст = "Источник перспективы - горизонталь";
Куб = БлокВцентре.ДобавитьДочерний(ДФ.Блок());
Куб.Класс = "cube";
Куб.Стиль.Позиция = ДФ.Позиция.Относительно;
Куб.Стиль.Ширина = 200;
Куб.Стиль.Высота = 200;
Куб.Стиль.СтильСдвига = ДФ.СтильСдвига.Трехмерный;
Фронт = Куб.ДобавитьДочерний(ДФ.Блок());
Фронт.Класс = "side front";
Фронт.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Фронт.Стиль.Ширина = "100%";
Фронт.Стиль.Высота = "100%";
Фронт.Стиль.Непрозрачность = 0.75;
Фронт.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
Фронт.Стиль.ЦветФона = ДФ.Цвет(213, 0, 0);
Фронт.Стиль.Сдвиг = ДФ.ПереводЗет(100);
ЛеваяСторона = Куб.ДобавитьДочерний(ДФ.Блок());
ЛеваяСторона.Класс = "side left";
ЛеваяСторона.Стиль.Позиция = ДФ.Позиция.Абсолютно;
ЛеваяСторона.Стиль.Ширина = "100%";
ЛеваяСторона.Стиль.Высота = "100%";
ЛеваяСторона.Стиль.Непрозрачность = 0.75;
ЛеваяСторона.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
ЛеваяСторона.Стиль.ЦветФона = ДФ.Цвет(48, 79, 254);
Массив1 = Новый Массив();
Массив1.Добавить(ДФ.ПоворотИгрек(90));
Массив1.Добавить(ДФ.ПереводЗет(100));
ЛеваяСторона.Стиль.Сдвиг = Массив1;
ПраваяСторона = Куб.ДобавитьДочерний(ДФ.Блок());
ПраваяСторона.Класс = "side right";
ПраваяСторона.Стиль.Позиция = ДФ.Позиция.Абсолютно;
ПраваяСторона.Стиль.Ширина = "100%";
ПраваяСторона.Стиль.Высота = "100%";
ПраваяСторона.Стиль.Непрозрачность = 0.75;
ПраваяСторона.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
ПраваяСторона.Стиль.ЦветФона = ДФ.Цвет(170, 0, 255);
Массив2 = Новый Массив();
Массив2.Добавить(ДФ.ПоворотИгрек(-90));
Массив2.Добавить(ДФ.ПереводЗет(100));
ПраваяСторона.Стиль.Сдвиг = Массив2;
Задняя = Куб.ДобавитьДочерний(ДФ.Блок());
Задняя.Класс = "side back";
Задняя.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Задняя.Стиль.Ширина = "100%";
Задняя.Стиль.Высота = "100%";
Задняя.Стиль.Непрозрачность = 0.75;
Задняя.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
Задняя.Стиль.ЦветФона = ДФ.Цвет(170, 0, 255);
Задняя.Стиль.Сдвиг = ДФ.ПереводЗет(-100);
Верхняя = Куб.ДобавитьДочерний(ДФ.Блок());
Верхняя.Класс = "side top";
Верхняя.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Верхняя.Стиль.Ширина = "100%";
Верхняя.Стиль.Высота = "100%";
Верхняя.Стиль.Непрозрачность = 0.75;
Верхняя.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
Верхняя.Стиль.ЦветФона = ДФ.Цвет(0, 191, 165);
Массив3 = Новый Массив();
Массив3.Добавить(ДФ.ПоворотИкс(90));
Массив3.Добавить(ДФ.ПереводЗет(100));
Верхняя.Стиль.Сдвиг = Массив3;
Нижняя = Куб.ДобавитьДочерний(ДФ.Блок());
Нижняя.Класс = "side bottom";
Нижняя.Стиль.Позиция = ДФ.Позиция.Абсолютно;
Нижняя.Стиль.Ширина = "100%";
Нижняя.Стиль.Высота = "100%";
Нижняя.Стиль.Непрозрачность = 0.75;
Нижняя.Стиль.Границы = ДФ.Границы(2, ДФ.СтильГраницы.Сплошная, ДФ.Цвет.Белый);
Нижняя.Стиль.ЦветФона = ДФ.Цвет(100, 221, 23);
Массив4 = Новый Массив();
Массив4.Добавить(ДФ.ПоворотИкс(-90));
Массив4.Добавить(ДФ.ПереводЗет(100));
Нижняя.Стиль.Сдвиг = Массив4;
// Создадим одельные кадры.
Кадр1 = ДФ.Стиль();
Массив5 = Новый Массив();
Массив5.Добавить(ДФ.ПоворотИгрек(0));
Массив5.Добавить(ДФ.ПоворотИкс(720));
Массив5.Добавить(ДФ.ПоворотЗет(0));
Кадр1.Сдвиг = Массив5;
Кадр1.Смещение = 0; // Для первого и последнего кадра задать смещение во времени обязятельно.
Кадр2 = ДФ.Стиль();
Массив6 = Новый Массив();
Массив6.Добавить(ДФ.ПоворотИгрек(360));
Массив6.Добавить(ДФ.ПоворотИкс(0));
Массив6.Добавить(ДФ.ПоворотЗет(360));
Кадр2.Сдвиг = Массив6;
Кадр2.Смещение = 1; // Для первого и последнего кадра задать смещение во времени обязятельно.
// Соберем одельные кадры.
Кадры1 = ДФ.Кадры();
Кадры1.Имя = "вращениекуба"; // Обязательно задаем имя.
Кадры1.Добавить(Кадр1);
Кадры1.Добавить(Кадр2);
Стиль1 = ДФ.Стиль(); // Обязательно создаем стиль для кадров.
Стиль1.Кадры = Кадры1;
Анимация1 = ДФ.СвойстваАнимации(Кадры1.Имя, 10000, ДФ.ФункцияСинхронизации.Линейно, , -1);
Куб.Стиль.Анимация = Анимация1;
Флажок1_ПриИзменении();
Флажок2_ПриИзменении();
Форма1.Открыть();
//== Файл Стартовый.os == конец
//== Файл cub.css == начало
input[type="range"]:focus {
box-shadow: 0 0 3px 1px #4b81dd;
outline: none;
}
input[type="range"] {
-webkit-appearance: none;
margin-right: 15px;
width: 200px;
height: 7px;
background: rgba(255, 255, 255, 0.6);
border-radius: 5px;
background-image: linear-gradient(#ff4500, #ff4500);
background-size: 70% 100%;
background-repeat: no-repeat;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-ms-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #ff0200;
}
input[type="range"]::-moz-range-thumb:hover {
background: #ff0200;
}
input[type="range"]::-ms-thumb:hover {
background: #ff0200;
}
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-moz-range-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type="range"]::-ms-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
.input1, .input2::-webkit-slider-thumb {
cursor: ns-resize;
}
.input3::-webkit-slider-thumb {
cursor: ew-resize;
}
.input1, .input2::-moz-range-thumb {
cursor: ns-resize;
}
.input3::-moz-range-thumb {
cursor: ew-resize;
}
.input1, .input2::-ms-thumb {
cursor: ns-resize;
}
.input3::-ms-thumb {
cursor: ew-resize;
}
//== Файл cub.css == конец
