open source проект, идеи

[DjDiablo]

Есть амбициозный кандидат.


Если поддержит Gozar, DjDiablo, dmitry111 уже неплохо.
Но до команды пару человек не хватает.

Чтобы доказать жизнеспособность, нужно реализовать четыре компонента.

1) Холст - редактор позволяющий выделять, перемещать, масштабировать, и удалять html элементы.

2) Таймлайн. Перемещение кейфреймов, перемещение бегунка, масштабирование. На самом деле сложный компонент.

3) Данные. Общая модель с данными для таймлайна и редактора.
Возможный образец

{
    "id анимируемого элемента":{
           "имя анимируемого свойства":{
                 "время":"значение св-ва".
                 "время":"значение св-ва",
                 "время":"значение св-ва"
           },
           "имя анимируемого свойства":{
                 "время":"значение св-ва".
                 "время":"значение св-ва",
                 "время":"значение св-ва"
           }
    }
    //другие анимируемые dom элементы
}

Тайм лайн и холст, меняют данные модели. Модель при изменении генерирует событие change которые слушают все заинтерисованные компоненты, это прежде всего таймлайн, холст, и менеджер анимаций

4) менеджер анимаций- задача в зависимости от позиции бегунка просчитать анимацию. Посути для каждого свойства ищетсся ближайший keyframe слева, и справа. Между этими кейфремами происходит трансформация от значения а до значения b, задача найти значение на которое указывает бегунок.

тоесть мы имеем четыре компонента, три из которых завязаны на модель.

до первой демо версии 1-2 месяца работы, в зависимости от занятости участников.
Естественно это только начало, затем можно добавить undo/redo и редактор св-в.

[melky]

fuck this

[DjDiablo]

fuck this

Что что ?)))
Картинка демонстрирует образец от adobe, ясен перец что за adobe не угнаться, тем более опираясь только на веб технологии.

Melky ты уже работаешь над движком анимации, ты бы мог вписаться в проект. Главное требование это способность просчитать один кадр на заданной миллисекунде.

[melky]

Melky ты уже работаешь над движком анимации, ты бы мог вписаться в проект. Главное требование это способность просчитать один кадр на заданной миллисекунде.

такое уже есть. давно

там остались мелкие детали..

просто не знаю, зачем такой редактор нужен

[Gozar]

не знаю, зачем такой редактор нужен

Я знаю. И все разработчики canvas и css3 знают.

[nerv_]

Если поддержит Gozar, DjDiablo, dmitry111 уже неплохо.

что ты о себе в третьем лице?

fuck this

кстати, видео

1) Холст - редактор позволяющий выделять, перемещать, масштабировать, и удалять html элементы.

делал нечто подобное

2) Таймлайн. Перемещение кейфреймов, перемещение бегунка, масштабирование. На самом деле сложный компонент.

на первый взгляд посложнее первого

-------------===|=======--------
--========-----|-----------------
-----------------|-----------------
-----=========|==========----
-----------------|-----------------

"-" - единица измерения времени

| - позиция указателя (текущая)

= - временная полоса (начало время start, конец, время end). Позиция указателя - step(время_в_позиции_указател я), где step - анимационная функция (это для отрисовки на холст)

масштабирование - fixZoom(время_в_позиции_указат� �ля) => правильное время

мысли сходу в слух

Возможно, приму участие, если пустите )

UPD: кстати ancii графика очень хорошо иллюстрирует

[melky]

= - временная полоса (начало время start, конец, время end). Позиция указателя - step(время_в_позиции_указател я), где step - анимационная функция (это для отрисовки на холст)

см. сорцы у меня в подписи

просто у CSS3 анимаций точно такая же модель записи свойств:

КЛЮЧЕВЫЕ_КАДРЫ = {
    "время_1": {
        "имя анимируемого свойства": "значение",
        "имя анимируемого свойства": "значение"
    },
    "время_2": {
        "имя анимируемого свойства": "значение",
        "имя анимируемого свойства": "значение"
    }
}

у меня это есть

можно будет мой двиг туда включить... если я его когда-нибудь уже доделаю)))

у меня как раз в идеях есть сделать анимацию не только для элементов, а вообще для всего - например, для объектов в канвасе.

и это почти уже есть - см. классический режим,

https://bitbucket.org/ColCh/melanim/...ssic.js?at=dev

это реализация по сути стандарта CSS3 анимаций на JavaScript.

[DjDiablo]

Всем заинтерисованным просьба скинуть контакты в личку, либо на форум, кому как удобнее. В первую очередь интерисует скайп.
.

Далее обменяемся контактами, затем нам потребуется установочная конференция, думаю встреча в скайпе нам подайдёт.

[nerv_]

см. сорцы у меня в подписи

бегло глянул. Что именно ты хотел сказать?

КЛЮЧЕВЫЕ_КАДРЫ = {
    "время_1": {
        "имя анимируемого свойства": "значение",
        "имя анимируемого свойства": "значение"
    },
    "время_2": {
        "имя анимируемого свойства": "значение",
        "имя анимируемого свойства": "значение"
    }
}

честно скажу, css анимации никогда не рисовал, но, вроде, правильней тут будет
длительность_анимации = время_начала (0- умолчание) + смещение -> время_конца (длительность_анимации - умолчание) + смещение

смещение применительно к временной шкале

Т.е. я хотел сказать, что формулировки время_1 ... время_n не совсем точно отражают ситуацию

Прав, не? )))

[melky]

бегло глянул. Что именно ты хотел сказать?

если интересует алгоритм вычисления значений между кейфреймами, можно глянуть там.

честно скажу, css анимации никогда не рисовал, но, вроде, правильней тут будет
длительность_анимации = время_начала (0- умолчание) + смещение -> время_конца (длительность_анимации - умолчание) + смещение

смещение применительно к временной шкале

я имел в виду свойств анимируемого объекта, а не параметров анимации

параметры анимации - это длительность, кейфреймы, кол-во итераций и т.д.