Анімація графіки svg

Міністерство освіти і науки України

Дніпропетровський національний університет імені Олеся Гончара

Факультет фізики, електроніки та комп'ютерних систем

Кафедра комп’ютерних наук та інформаційних технологій

Звіт до лабораторної роботи № 2

АНІМАЦІЯ ГРАФІКИ SVG

Виконав

студент з групи КС-21-1

Царюк-Цейтер І. А.

Перевірив

доцент ККН

Андрєєв М. В.

Дніпро

2023

1. На веб-сторінці засобами SVG створити чотири анімації зображення синього

квадрата розміром 100×100 з чорною облямівкою, у якого на протязі 5 секунд: а) колір змінюється на червоний; б) прозорість змінюється від 1 до 0; в) радіус закругленості кутів збільшується від 0 до 50 і назад; г) координата x змінюється від –100 до 500 (за рахунок чого створюється анімований рух зображення квадрата). Створити ще одну анімацію, у якої перші три вказані зміни відбуваються одночасно і разом з цим розмір квадрата збільшується з 100×100 на 200×200 (квадрат при цьому повинен бути нерухомим). Зробити ці анімації безперервними.

2. На веб-сторінці засобами SVG створити анімацію спрощеного зображення

світлофора (з трьох кіл), у якого на протязі 4 секунд горить червоне світло, потім 2 секунди – жовте, потім 4 секунди – зелене, і потім все повторюється. Рядом зі створеною анімацією світлофора додати ще одну анімацію, у якої на рівні кожного сигналу світлофора під час його дії подовжується горизонтальна смужка відповідного кольору. Довжина смужки повинна відповідати часу дії відповідного сигналу, її початок повинен відповідати часу початка дії сигналу на горизонтальній шкалі часу, по закінченню дії сигналу смужка повинна зникати. При визначенні горизонтальної координати для анімації смужок вважати, що кожний новий повний цикл починається з нульового моменту часу. На цій веб-сторінці зробити ще одну анімацію однієї горизонтальної смужки, довжина якої починається з нульової і за 4 секунди досягає свого максимального значення, при цьому робить це в циклі із трьох повторень так, що на першому смужка має червоний колір, на другому – жовтий і на третьому – зелений, цикл має безперервно повторюватися. При виконанні завдань цього пункту використовувати атрибут begin елемента animate, в якому вказувати базове значення syncbase, що складається з ідентифікаційного посилання на інший елемент анімації та відповідної події, за якою має починатися анімація даного елементу.

3. На веб-сторінці для синього прямокутника розміром 6×20 з чорною облямівкою створити анімацію його обертального руху навколо його центра симетрії та навколо центра обертання, який зсунутий відносно центра симетрії прямокутника на (20,20). Як проміжну побудувати анімацію для випадку, коли зсув центра обертання відносно центра симетрії прямокутника складає (0,20). Для кращої візуалізації руху обертання на зображенні чорною точкою показати центр симетрії прямокутника, а червоною точкою – центр обертання. Для виконання цього завдання використати анімацію атрибутів трансформації, використовуючи <animateTransform>.

4. На веб-сторінці створити анімацію руху синього наконечника стрілки за замкнутою траєкторією, що задана шляхом (SVG-елементом path) і відображена червоним кольором, як на рис. 2.1. Шлях визначити наступними командами:

d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z".

5. Виконати анімацію тексту наступного вигляду "Анімація тексту", що пода-

ний шрифтом Verdana та має розмір 24 pt. Анімація має відбуватися 5 секунд і не повторюватися. Текст на початку має бути скритим і повинен стати видимим після першої секунди анімації. Після закінчення першої секунди і до кінця анімації текст має рухатися від точки (0,0) до точки (100,200), виконуючі обертання від –30° до 0° і змінюючи масштаб (пропорційно збільшуючись) з 1 до 3, а колір з червоного на синій.