Как создать анимацию логотипа в SVG?

 
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
Вот есть некая статья по анимации http://www.creative-seo.ru/blog/animaciya-logotipa-svg/

но никак не пойму как создавать анимацию. где прорисовывать кадры анимации. Может есть у кого опыт, поделитесь информацией и примерами.
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
многие ссылаются на некий скрипт http://snapsvg.io/ - но вообще никак не пойму как им пользоваться.
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2602
yury,
Вы только учитывайте, что яваскрипты работают на стороне клиента. И вся нагрузка ложится на машину пользователя.
Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать...
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
Ris:

yury,
Вы только учитывайте, что яваскрипты работают на стороне клиента. И вся нагрузка ложится на машину пользователя.
Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать...

думаю для анимации логотипа не понадобится особо ресурсов. а судя по описаниям по тому скрипту, там все очень легко. но вот мой мозг никак не может понять как этим пользоваться.
Посетитель
small user social cms
Медаль
Сообщений: 333
Ris:

Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать...
rofl
Редактировалось: 1 раз (Последний: 26 января 2017 в 23:15)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
yury:
но никак не пойму как создавать анимацию. где прорисовывать кадры анимации.
Для этого придётся покурить не мало.
На этих ресурсах про синтаксис
Здесь пример(на буржуйском),но код есть код
Рисуешь картинку в редакторе в клеточку, задаёшь координаты каждой точке и прописываешь в path.И далее по примеру.
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
Lora:

yury:
но никак не пойму как создавать анимацию. где прорисовывать кадры анимации.
Для этого придётся покурить не мало.
На этих ресурсах про синтаксис
Здесь пример(на буржуйском),но код есть код
Рисуешь картинку в редакторе в клеточку, задаёшь координаты каждой точке и прописываешь в path.И далее по примеру.

неужели эти все цифры пишутся вручную? адоб уже верстку по сути из картинки делает, криво но делает. не уж то нет автоматизированного сервиса?(
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
не уж то челвоек как то вручную вычислял все координаты http://webix.pro/svg/spravochnik/elementy/path.html ? если да, то как это можно сделать, какой прогой или сервисом?
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
yury:
не уж то челвоек как то вручную вычислял все координаты
Ну в данном примере можно и вручную, не так и долго. А вообще можете написать js скрипт, или найти, который будет переводить координаты мышки в svg координаты.И кликайте себе на здоровье smile
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1147
Adobe Edge Animate
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Или вот редактор для прорисовки карт. Тоже координаты можно вычислить.
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
вот такой код как получить

Код PHP:
  1. <svg id="logo_svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 48" enable-background="new 0 0 149 48" xml:space="preserve">
  2. <path id="logo_h" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF" d="M17,39h-6V9h6l0,12l18,0V9h6v30h-6V27H17V39z"></path>
  3. <path id="logo_other" fill="#FFFFFF" d="M149,39C149,39,119,39,119,39C119,39,119,9,119,9C119,9,149,9,149,9M149,9C149,9,149,15,149,15C149,15,125,15,125,15C125,15,125,33,125,33C125,33,143,33,143,33C143,33,143,27,143,27C143,27,131,27,131,27C131,27,131,21,131,21C131,21,149,21,149,21C149,21,149,39,149,39C149,39,149,39,149,39M113,33C113,33,113,15,113,15C113,15,107,15,107,15C107,15,107,33,107,33C107,33,113,33,113,33C113,33,113,33,113,33M59,39C59,39,65,39,65,39C65,39,65,15,65,15C65,15,77,15,77,15C77,15,77,9,77,9C77,9,47,9,47,9C47,9,47,15,47,15C47,15,59,15,59,15C59,15,59,39,59,39C59,39,59,39,59,39M107,33C107,33,89,33,89,33C89,33,89,15,89,15C89,15,107,15,107,15C107,15,107,9,107,9C107,9,83,9,83,9C83,9,83,39,83,39C83,39,107,39,107,39C107,39,107,33,107,33C107,33,107,33,107,33"></path>
  4. <defs></defs></svg>
Посетитель
small user social cms
Медаль
Сообщений: 111
yury:
вот такой код как получить

в кореле рисуете и сохраняете в svg, потом этот файл через любой редактор открыть там и будет код
Посетитель
no avatar
МедальАвторитет форума
Сообщений: 2774
Kokshetimes:
в кореле рисуете и сохраняете в svg, потом этот файл через любой редактор открыть там и будет код
в иллюстраторе делал, но код оооочень большой получается на выходе. в кореле меньше?
Посетитель
small user social cms
Почетный донор проекта
Сообщений: 54
Оказывается можно и в inkscape svg анимашки готовить

пример
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.