Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> анимация svg, через javascript 
:(
    Опции темы
Bulat
Дата 19.3.2015, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


татарский Нео
***


Профиль
Группа: Завсегдатай
Сообщений: 1636
Регистрация: 22.3.2006
Где: за углом

Репутация: 1
Всего: 57



имею :
Код

<html>
<body>
<svg width="100" height="100">
  <circle id="my_circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>

    <animate
        xlink:href="#my_circle"
    attributeName="fill"
    dur="1440ms" 
      repeatCount="indefinite"
    keyTimes="0;
      1;"
    calcMode="spline" 
    keySplines="0,0,1,1;"
    values="#1eb287;
      #ca5f52;"
    />

</svg>
</body>
</html> 


здесь анимация задается статически, через тег animate, а нужно сделать динамически через javascript. Мож кто подскажет как, какой метод javascript??


--------------------
менеджер по кодеврайтингу  smile 
PM MAIL WWW ICQ   Вверх
diadiavova
Дата 19.3.2015, 20:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5807
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 139



Динамически можно добавить элемент animate smile Ну, а так вообще в яваскрипте встроенных функций для анимации цвета нет, так что либо ищи какие-нибудь библиотеки или там плагины к жквери например, либо решай проблему "в лоб". То есть разбей временной промежуток на некоторое количество частей (например 25 кадров в секунду), создай все промежуточные цвета, забей их в массив и по таймеру присваивай по очереди нужному свойству.

А вообще тема не в том разделе создана, к XML вопрос отношения не имеет, так что переношу.


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
Bulat
Дата 20.3.2015, 07:04 (ссылка)   | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


татарский Нео
***


Профиль
Группа: Завсегдатай
Сообщений: 1636
Регистрация: 22.3.2006
Где: за углом

Репутация: 1
Всего: 57



Цитата(diadiavova @  19.3.2015,  20:24 Найти цитируемый пост)
Динамически можно добавить элемент animate

Я поражаюсь твоей гениальности, а главное точности утверждений!  smile  Ну в том, что элемент animate можно добавить динамически я и не сомневаюсь, да и мне вообще собственно все равно как будет называтся элемент, вот если бы при этом еще и сама анимация работала!  smile 

Цитата(diadiavova @  19.3.2015,  20:24 Найти цитируемый пост)
Ну, а так вообще в яваскрипте встроенных функций для анимации цвета нет, так что либо ищи какие-нибудь библиотеки или там плагины к жквери например, либо решай проблему "в лоб". То есть разбей временной промежуток на некоторое количество частей (например 25 кадров в секунду), создай все промежуточные цвета, забей их в массив и по таймеру присваивай по очереди нужному свойству.


Да ладно, ты прям америку открыл! Может еще и синематогроф заново изобретем?  smile 

Цитата(diadiavova @  19.3.2015,  20:24 Найти цитируемый пост)
А вообще тема не в том разделе создана, к XML вопрос отношения не имеет, так что переношу. 

И вот тут ты опять не прав! Все это еще должно сработать в контектсе xslt-преобразований! Но чтобы понятнее было я убрал лишнюю воду. Ибо

Код

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <xsl:template match="scheme">
        ....
           <svg ....>
        ....
    </xsl:template>
</xsl:stylesheet>


 smile 

Хоть бы что-то толковое и по существу отписал!


--------------------
менеджер по кодеврайтингу  smile 
PM MAIL WWW ICQ   Вверх
diadiavova
Дата 20.3.2015, 12:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5807
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 139



Bulat, вот  я всяких дегенератов встречал на форуме, но такого, чтобы взялся помочь участнику, а он в ответ тупо хамить начал, я как-то даже не припомню. Будешь продолжать в том же духе - выпишу читательский билет. И если тебя интересует бряцаю ли причиндалами полномочиями, то да - именно этим я сейчас и занимаюсь.
Цитата(Bulat @  20.3.2015,  07:04 Найти цитируемый пост)
Я поражаюсь твоей гениальности, а главное точности утверждений!  smile  Ну в том, что элемент animate можно добавить динамически я и не сомневаюсь, да и мне вообще собственно все равно как будет называтся элемент, вот если бы при этом еще и сама анимация работала!

Видишь ли в чем дело, когда я даю ответ на вопрос, я обычно предполагаю у спрашивающего наличие хотя бы элементарных знаний, поэтому отвечаю компактно. Воспитанные люди, когда чего-то не знают, уточняют, но встречаются и такие, которые думают, что если у них что-то не работает, значит ответ неверный, при этом им даже в голову не приходит, что сами они могут иметь пробелы в знании основ. В качестве поясняющего примера, привожу код, который прекрасно работает, ну по крайней мере в файрфоксе. Что до других браузеров, то в них и твой пример не пашет. Получен он путем редактирования твоего примера, на которое у меня ушло минут 5
Код

<!DOCTYPE html>

<html>
<body>
    <svg width="100" height="100" id="hissvg">
        <circle id="my_circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    <script>
        var circle = document.getElementById("my_circle");
        var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
        var xlinkns = "http://www.w3.org/1999/xlink";
        var svg = document.getElementById("hissvg");
        svg.appendChild(animate);
        var atts = {
            attributeName: "fill",
            dur: "1440ms",
            repeatCount: "indefinite",
            keyTimes: "0; 1;",
            calcMode: "spline",
            keySplines: "0,0,1,1;",
            values: "#1eb287; #ca5f52;"
        };
        for (var name in atts )
        {
            animate.setAttribute(name, atts[name]);
        }
        animate.setAttributeNS(xlinkns, "href", "#my_circle");
    </script>
</body>
</html> 

Цитата(Bulat @  20.3.2015,  07:04 Найти цитируемый пост)
Да ладно, ты прям америку открыл! Может еще и синематогроф заново изобретем? 

Судя по всему, этот вариант ты тоже реализовать не можешь. Стоит ли упоминать о том, что для меня это тоже не проблема? smile 
Цитата(Bulat @  20.3.2015,  07:04 Найти цитируемый пост)
И вот тут ты опять не прав! Все это еще должно сработать в контектсе xslt-преобразований! Но чтобы понятнее было я убрал лишнюю воду. Ибо

Ты знаешь в разделе XML частенько появляются темы, к разделу не имеющие отношения. Как правило связано это с тем, что вопросы, рассматриваемые в них, относятся к хмл-апи конкретного языка и должны рассматриваться в соответствующих разделах. Но попадаются и особые случаи. До сего момента я считал самым глупым обоснованием размещения темы в разделе XML тот случай, когда человек искал в сети базу данных с автомобилями, но поскольку база ему нужна была в формате XML или SQL, то он счел уместным задать вопрос там. Думаю ты сместил того парня с пьедестала: оказывается можно разместить тему в разделе, потому что вопрос, не имеющий к разделу отношения, решался в контексте хслт-преобразования, но упоминать об этом автор не стал. smile 

Цитата(Bulat @  20.3.2015,  07:04 Найти цитируемый пост)
Хоть бы что-то толковое и по существу отписал!

Ты задал очень общий вопрос, я написал, что есть разные пути его решения, что означает, что с твоей стороны требуется уточнение, что именно тебе надо. Или чего ты ждал? Что тебе будут выложены все возможные варианты, да еще и в полном виде?


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
Bulat
Дата 20.3.2015, 13:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


татарский Нео
***


Профиль
Группа: Завсегдатай
Сообщений: 1636
Регистрация: 22.3.2006
Где: за углом

Репутация: 1
Всего: 57



Цитата(diadiavova @  20.3.2015,  12:16 Найти цитируемый пост)
Ты знаешь в разделе XML частенько появляются темы

Ты знаешь, я никогда не встречал глупее модератора, который даже толком не знает, как называется раздел, который он модерирует! Поменьше выпендривайся, и может увидешь, что раздел называется XML, XSL, что очень хорошо, соответствует данному разделу, так как среди преобразований XSLT можно всяко-разное встретить.  smile

Цитата(diadiavova @  20.3.2015,  12:16 Найти цитируемый пост)
В качестве поясняющего примера, привожу код, который прекрасно работает, ну по крайней мере в файрфоксе. Что до других браузеров, то в них и твой пример не пашет. Получен он путем редактирования твоего примера, на которое у меня ушло минут 5

Оно и видно, что 5 минут. Кстати, решение, кроссбраузерное-таки существует, и но очень сложное и действительно требует хороших, глубинных знаний, и усердства хотя бы на пару часов, а может и больше, но уж никак не пятиминутки.  smile 

Вот если допрешь какое это решение, может я и соглашусь, что где-то высказался грубовато, а если нет - для флуда есть другие разделы и нечего нарушать правила форума, а потом еще косить стрелки с больной головы на здоровую. Хотя от тебя можно всего ожидать!  smile 


--------------------
менеджер по кодеврайтингу  smile 
PM MAIL WWW ICQ   Вверх
diadiavova
Дата 20.3.2015, 15:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Доктор Зло(диагност, настоящий, с лицензией и полномочиями)
****


Профиль
Группа: Модератор
Сообщений: 5807
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 11
Всего: 139



Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
Ты знаешь, я никогда не встречал глупее модератора, который даже толком не знает, как называется раздел, который он модерирует! Поменьше выпендривайся, и может увидешь, что раздел называется XML, XSL, что очень хорошо, соответствует данному разделу, так как среди преобразований XSLT можно всяко-разное встретить.  

Я нигде не написал, что в том разделе нельзя задавать вопросы по хслт. Но твой вопрос хслт не касался. В том-то все и дело, что ты его только имел в виду.
Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
Оно и видно, что 5 минут.

Да и оно работает, в отличие от твоих потуг.
Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
Кстати, решение, кроссбраузерное-таки существует, и но очень сложное и действительно требует хороших, глубинных знаний, и усердства хотя бы на пару часов, а может и больше, но уж никак не пятиминутки.  

Я своим примером не предлагал тебе решения твоей проблемы в целом, это был ответ на утверждение, что добавление элемента эффекта не дает. Почему не во всех браузерах работает? Ну точно не по той причине, которую назвал ты. Вот такой код работает везде кроме ие
Код

<!DOCTYPE html>

<html>
<body>
    <svg width="100" height="100" id="hissvg">
        <circle id="my_circle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    <script>
        var circle = document.getElementById("my_circle");
        var svgns = "http://www.w3.org/2000/svg";
        var animate = document.createElementNS(svgns, "animate");
        var xlinkns = "http://www.w3.org/1999/xlink";
        var svg = document.getElementById("hissvg");

        svg.appendChild(animate);
        var atts = {
            attributeName: "fill",
            dur: "1440ms",
            repeatCount: "indefinite",
            values: "#1eb287; #ca5f52;",
            begin: "1s"
        };
        for (var name in atts)
        {
            animate.setAttribute(name, atts[name]);
        }
        animate.setAttributeNS(xlinkns, "xlink:href", "#my_circle");
    </script>


</body>
</html> 
 Что я изменил? Всего лишь убрал некоторые атрибуты, назначение их при помощи setAttribute не дает эффекта, надо пользоваться другими методами. Что до ИЕ, то насколько мне известно там ограниченная поддержка SMIL-анимации SVG. Только не надо в связи с этим рассказывать мне, что я не дал тебе решения твоей задачи, я и не пытался. Просто этот пример подтверждает, что все браузеры ведут себя в данном вопросе одинаково: программное добавление элемента дает такой же эффект, как и разметка. В ие можешь проверить с помощью чего-то, что он поддерживает.
 И в любом случае два часа на это не понадобится.
Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
Вот если допрешь какое это решение, может я и соглашусь, что где-то высказался грубовато

Мне не принципиально, согласишься ты с этим или нет. Я предупредил, что будет, если будешь хамить, ты не понял.
Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
а если нет - для флуда есть другие разделы и нечего нарушать правила форума

А для того, чтобы делать подобные замечания есть модераторы. smile
Цитата(Bulat @  20.3.2015,  13:54 Найти цитируемый пост)
 Хотя от тебя можно всего ожидать! 

Полагаю, хотя бы в этом я твои ожидания оправдал smile 


--------------------
Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile
PM   Вверх
Google
  Дата 14.12.2019, 05:30 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0749 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.