Пример анимации

Копировать     Выделить всё

//== Файл Стартовый.os == начало
ПодключитьВнешнююКомпоненту("C:\444\111\DeclarativeForms\DeclarativeForms\bin\Debug\DeclarativeForms.dll");
ДФ = Новый ДекларативныеФормы();
ДФ.cssПуть = "butterfly.css";
Форма1 = ДФ.Форма;
Форма1.НачальнаяШирина = 800;
Форма1.НачальнаяВысота = 450;

Заголовок1 = Форма1.ДобавитьДочерний(ДФ.Заголовок1());
Заголовок1.Текст = "3-D анимация OneScript";

Контейнер = Форма1.ДобавитьДочерний(ДФ.Блок());
Контейнер.Идентификатор = "контейнер";

Бабочка = Контейнер.ДобавитьДочерний(ДФ.Блок());
Бабочка.Идентификатор = "бабочка";

ЛевоеКрыло = Бабочка.ДобавитьДочерний(ДФ.Блок());
ЛевоеКрыло.Идентификатор = "левоекрыло";

ПравоеКрыло = Бабочка.ДобавитьДочерний(ДФ.Блок());
ПравоеКрыло.Идентификатор = "правоекрыло";

Форма1.Открыть();
//== Файл Стартовый.os == конец

//== Файл butterfly.css == начало
body {
  margin: 0;
  text-align: center;
  background: url(background32.jpg);
}
h1 {
  font-family: Monotype Corsiva,Gabriola,serif;
  color: #D72F2C;
  text-shadow: 2px 2px 0 #D9D9D9, 4px 4px 0 white;
}
#контейнер {
  background: url(grass.png);
  background-repeat: no-repeat;
  perspective: 600px;
  perspective-origin: 50% 0%; 
  width: 660px;
  height: 100%;
  margin: 50px auto 0;
}
#бабочка {
  position: relative;
  width: 350px;
  height: 312px;
  transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
  transform-origin: 100% 0%;
  transform-style: preserve-3d;
  animation: butterfly 5s linear infinite;
}
#левоекрыло {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(butterfly.png);
  background-repeat: no-repeat;
  transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  transform-origin: inherit;
  animation: левоекрыло 0.2s linear infinite;
}
#правоекрыло {
  position: absolute;
  left: 175px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(butterfly.png);
  background-repeat: no-repeat;
  transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
  transform-origin: inherit;
  animation: правоекрыло 0.2s linear infinite;
}
@keyframes butterfly {
  from { transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0); }
  25% { transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0); }
  50% { transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0); }
  75% { transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0); }
  to { transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0); }
}
@keyframes правоекрыло {
  from { transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg); }
  50% { transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 100deg); }
  to { transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg); }
}
@keyframes левоекрыло {
  from { transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg); }
  50% { transform: rotateX(90deg) rotate3d(0, 1, 0, 80deg); }
  to { transform: rotateX(90deg) rotate3d(0, 1, 0, 00deg); }
}
//== Файл butterfly.css == конец

Копировать     Выделить всё

ПодключитьВнешнююКомпоненту("C:\444\111\DeclarativeForms\DeclarativeForms\bin\Debug\DeclarativeForms.dll");
ДФ = Новый ДекларативныеФормы();
Форма1 = ДФ.Форма;
Форма1.НачальнаяШирина = 800;
Форма1.НачальнаяВысота = 450;

Контент = Форма1.Контент;
Контент.Стиль.Отступ = ДФ.Отступ(0, 0, 0, 0);
Контент.Стиль.ГоризонтальноеВыравниваниеТекста = ДФ.ГоризонтальноеВыравниваниеТекста.Центр;
Контент.Стиль.ФоновоеИзображение = "background32.jpg";

Заголовок1 = Контент.ДобавитьДочерний(ДФ.Заголовок1());
Заголовок1.Текст = "3-D анимация OneScript";
Заголовок1.Стиль.СемействоШрифтов = "Monotype Corsiva,Gabriola,serif";
Заголовок1.Стиль.ЦветТекста = ДФ.Цвет.Кирпичный;
Заголовок1.Стиль.ТеньТекста = ДФ.Тень(3, 3, 0, , ДФ.Цвет.Белый);

Контейнер = Контент.ДобавитьДочерний(ДФ.Блок());
Контейнер.Идентификатор = "контейнер";
Контейнер.Текст = ".";
Контейнер.Стиль.ФоновоеИзображение = "grass.png";
Контейнер.Стиль.МозаикаКартинки = ДФ.МозаикаКартинки.НеПовторять;
Контейнер.Стиль.Перспектива = 600;
Контейнер.Стиль.ИсточникПерспективы = "50% 0%";
Контейнер.Стиль.Ширина = 660;
Контейнер.Стиль.Высота = "100%";
Контейнер.Стиль.Отступ = "50px auto 0";

Бабочка = Контейнер.ДобавитьДочерний(ДФ.Блок());
Бабочка.Текст = ".";
Бабочка.Идентификатор = "бабочка";

Бабочка.Стиль.Позиция = ДФ.Позиция.Относительно;
Бабочка.Стиль.Ширина = 350;
Бабочка.Стиль.Высота = 312;
Массив6 = Новый Массив();
Массив6.Добавить(ДФ.Поворот3Д(0, 1, 0, 0));
Массив6.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Бабочка.Стиль.Сдвиг = Массив6;
Бабочка.Стиль.ТочкаСдвига = "100% 0%"; // Если используем число, то по умолчанию 
// измерение устанавливается в пикселях. Но можно через строку задать измерение в пароцентах.
Бабочка.Стиль.СтильСдвига = ДФ.СтильСдвига.Трехмерный;

Кадр1 = ДФ.Стиль();
Массив1 = Новый Массив();
Массив1.Добавить(ДФ.Поворот3Д(0, 1, 0, 0));
Массив1.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Массив1.Добавить(ДФ.Перевод3Д(-150, 300, 0));
Кадр1.Сдвиг = Массив1;
Кадр1.Смещение = 0;

Кадр2 = ДФ.Стиль();
Массив2 = Новый Массив();
Массив2.Добавить(ДФ.Поворот3Д(0, 1, 0, -90));
Массив2.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Массив2.Добавить(ДФ.Перевод3Д(-150, 300, 0));
Кадр2.Сдвиг = Массив2;
Кадр2.Смещение = 0.25;

Кадр3 = ДФ.Стиль();
Массив3 = Новый Массив();
Массив3.Добавить(ДФ.Поворот3Д(0, 1, 0, -180));
Массив3.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Массив3.Добавить(ДФ.Перевод3Д(-150, 300, 0));
Кадр3.Сдвиг = Массив3;
Кадр3.Смещение = 0.5;

Кадр4 = ДФ.Стиль();
Массив4 = Новый Массив();
Массив4.Добавить(ДФ.Поворот3Д(0, 1, 0, -270));
Массив4.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Массив4.Добавить(ДФ.Перевод3Д(-150, 300, 0));
Кадр4.Сдвиг = Массив4;
Кадр4.Смещение = 0.75;

Кадр5 = ДФ.Стиль();
Массив5 = Новый Массив();
Массив5.Добавить(ДФ.Поворот3Д(0, 1, 0, -360));
Массив5.Добавить(ДФ.Масштаб3Д(0.5, 0.5, 0.5));
Массив5.Добавить(ДФ.Перевод3Д(-150, 300, 0));
Кадр5.Сдвиг = Массив5;
Кадр5.Смещение = 1;

Кадры1 = ДФ.Кадры();
Кадры1.Имя = "бабочка";
Кадры1.Добавить(Кадр1);
Кадры1.Добавить(Кадр2);
Кадры1.Добавить(Кадр3);
Кадры1.Добавить(Кадр4);
Кадры1.Добавить(Кадр5);

Стиль1 = ДФ.Стиль(); // Обязательно создаем стиль для кадров.
Стиль1.Кадры = Кадры1;
Анимация1 = ДФ.СвойстваАнимации(Кадры1.Имя, 5000, ДФ.ФункцияСинхронизации.Линейно, , -1, , , );
Бабочка.Стиль.Анимация = Анимация1;

ЛевоеКрыло = Бабочка.ДобавитьДочерний(ДФ.Блок());
ЛевоеКрыло.Стиль.Позиция = ДФ.Позиция.Абсолютно;
ЛевоеКрыло.Стиль.Лево = 0;
ЛевоеКрыло.Стиль.Верх = 0;
ЛевоеКрыло.Стиль.Ширина = 200;
ЛевоеКрыло.Стиль.Высота = 312;
ЛевоеКрыло.Стиль.ФоновоеИзображение = "butterfly.png";
ЛевоеКрыло.Стиль.МозаикаКартинки = ДФ.МозаикаКартинки.НеПовторять;
Массив7 = Новый Массив();
Массив7.Добавить(ДФ.ПоворотИкс(90));
Массив7.Добавить(ДФ.Поворот3Д(0, 1, 0, 0));
ЛевоеКрыло.Стиль.Сдвиг = Массив7;
ЛевоеКрыло.Стиль.ТочкаСдвига = Бабочка.Стиль.ТочкаСдвига;

Кадр6 = ДФ.Стиль();
Массив9 = Новый Массив();
Массив9.Добавить(ДФ.ПоворотИкс(90));
Массив9.Добавить(ДФ.Поворот3Д(0, 1, 0, 0));
Кадр6.Сдвиг = Массив9;
Кадр6.Смещение = 0;

Кадр7 = ДФ.Стиль();
Массив10 = Новый Массив();
Массив10.Добавить(ДФ.ПоворотИкс(90));
Массив10.Добавить(ДФ.Поворот3Д(0, 1, 0, 80));
Кадр7.Сдвиг = Массив10;
Кадр7.Смещение = 0.5;
  
Кадр8 = ДФ.Стиль();
Массив11 = Новый Массив();
Массив11.Добавить(ДФ.ПоворотИкс(90));
Массив11.Добавить(ДФ.Поворот3Д(0, 1, 0, 0));
Кадр8.Сдвиг = Массив11;
Кадр8.Смещение = 1;

Кадры2 = ДФ.Кадры();
Кадры2.Имя = "левоекрыло";
Кадры2.Добавить(Кадр6);
Кадры2.Добавить(Кадр7);
Кадры2.Добавить(Кадр8);

Стиль2 = ДФ.Стиль(); // Обязательно создаем стиль для кадров.
Стиль2.Кадры = Кадры2;
Анимация2 = ДФ.СвойстваАнимации(Кадры2.Имя, 200, ДФ.ФункцияСинхронизации.Линейно, , -1, , , );
ЛевоеКрыло.Стиль.Анимация = Анимация2;

ПравоеКрыло = Бабочка.ДобавитьДочерний(ДФ.Блок());
ПравоеКрыло.Стиль.Позиция = ДФ.Позиция.Абсолютно;
ПравоеКрыло.Стиль.Лево = 175;
ПравоеКрыло.Стиль.Верх = 0;
ПравоеКрыло.Стиль.Ширина = 200;
ПравоеКрыло.Стиль.Высота = 312;
ПравоеКрыло.Стиль.ФоновоеИзображение = "butterfly.png";
ПравоеКрыло.Стиль.МозаикаКартинки = ДФ.МозаикаКартинки.НеПовторять;
Массив7 = Новый Массив();
Массив7.Добавить(ДФ.ПоворотИкс(90));
Массив7.Добавить(ДФ.Перевод3Д(-178, 0, 0));
Массив7.Добавить(ДФ.Поворот3Д(0, 1, 0, 180));
ПравоеКрыло.Стиль.Сдвиг = Массив7;
ПравоеКрыло.Стиль.ТочкаСдвига = Бабочка.Стиль.ТочкаСдвига;

Кадр9 = ДФ.Стиль();
Массив14 = Новый Массив();
Массив14.Добавить(ДФ.ПоворотИкс(90));
Массив14.Добавить(ДФ.Перевод3Д(-178, 0, 0));
Массив14.Добавить(ДФ.Поворот3Д(0, 1, 0, 180));
Кадр9.Сдвиг = Массив14;
Кадр9.Смещение = 0;

Кадр10 = ДФ.Стиль();
Массив12 = Новый Массив();
Массив12.Добавить(ДФ.ПоворотИкс(90));
Массив12.Добавить(ДФ.Перевод3Д(-178, 0, 0));
Массив12.Добавить(ДФ.Поворот3Д(0, 1, 0, 100));
Кадр10.Сдвиг = Массив12;
Кадр10.Смещение = 0.5;

Кадр11 = ДФ.Стиль();
Массив13 = Новый Массив();
Массив13.Добавить(ДФ.ПоворотИкс(90));
Массив13.Добавить(ДФ.Перевод3Д(-178, 0, 0));
Массив13.Добавить(ДФ.Поворот3Д(0, 1, 0, 180));
Кадр11.Сдвиг = Массив13;
Кадр11.Смещение = 1;

Кадры3 = ДФ.Кадры();
Кадры3.Имя = "правоекрыло";
Кадры3.Добавить(Кадр9);
Кадры3.Добавить(Кадр10);
Кадры3.Добавить(Кадр11);

Стиль3 = ДФ.Стиль(); // Обязательно создаем стиль для кадров.
Стиль3.Кадры = Кадры3;
Анимация3 = ДФ.СвойстваАнимации(Кадры3.Имя, 200, ДФ.ФункцияСинхронизации.Линейно, , -1, , , );
ПравоеКрыло.Стиль.Анимация = Анимация3;

Форма1.Открыть();