Проблемы с анимациями для web

Тема в разделе "Уроки", создана пользователем k0ttee, 24/3/15.

  1. TC
    k0ttee

    k0ttee Специалист

    Регистрация:
    12/12/14
    Сообщения:
    1,891
    Симпатии:
    781
    Баллы:
    71
    Баланс:
    90 коп.
    Вывел, руб.:
    1140
    Если схожие проблемы - пишите, может быть смогу помочь.

    Единственный метод .animate() и столько костылей...
    Напилил совсем немного кода, поглядывая за результатом в Firefox'е. Ну, думаю, вебкит он теперь везде вебкит, а значит - должно работать. А вот фиг!

    1.) Изначально есть блок, которому я не задавал position, то есть у него дефолтное
    position: auto
    2.) Делаю я ему "вылет в центр окна":
    а.) нахожу высоту и ширину полезной площади браузера
    б.) вычитаю из них половину высоты и ширины блока
    в.) веду блок в половину этих величин и делаю ему postion: fixed

    И во всех вебкит-браузерах (кроме лисы) анимация стартует не с базовой позиции, а из угла окна. Ну хоть тресни...

    И пошли костыли:
    1.) До анимации задаю блоку position: absolute
    2.) Получаю оффсет от краев экрана
    3.) Назначаю ему top и left полученные из оффсета
    4.) Чтобы все было ровно, приходится отбирать прокрутку через overflow: hidden для всего html

    Дальше начал делать галерею, где пролистываются блоки а не просто картинки. Там пропускал значение прозрачности через цикл. В лисе работало, а в хроме - шиш.
    Сама прозрачность шла шагом в 3 единицы:
    Код:
    opacity:0.3;
    opacity:0.6;
    opacity:0.9;
    Но почему-то на 0.9 не работало...
    Вывел я значение анимации через alert() и о ужас!
    9.png
    Что это за аптечная точность?
    В большинстве случаев прозрачность просто задается в CSS и все... Никто ее не анимирует особо, поэтому всем пофиг. Печаль и опять костыли: нагородил еще кода и добавил условие - больше восьми и меньше десяти. Пипец...

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

    Код:
    <html>
    <head>
       <meta charset="UTF-8">
       <style>
         #will_order{
           position: absolute;
           top: calc(50% - 20px);
           left: calc(50% - 20px);
           height: 40px;
           width: 40px;
         }
         #order_song_card{
           background: #999;
           border: solid 1px #333;
           border-radius: 5px;
           padding: 5px;
           width: 300px;
           height: 300px;
           position: absolute;
           top: calc(50% - 150px);
           left: 100%;
           opacity:0.8;
         }
         #order_name{
           width: 600px;
           border-radius: 5px;
         }
         #order_description{
           width: 600px;
           border-radius: 5px;
         }
    
       </style>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script>
         function start_order_song(){
           var client_w = document.body.clientWidth;
           var client_h = document.body.clientHeight;
    
           var move_left = client_w / 2;
           move_left = parseInt(move_left);
           move_left = move_left - 300;
    
           $('#order_song_card').animate({left: move_left,
      height : "600",
      width  : "600",
      top  : "-=150"
      }, 3000);
       
         }
         function ready_order_song(){
           $('#order_song_card').animate({
      height : "50",
      width  : "50",
      top  : "+=270",
      left  : "+=270"
      }, 1000);
      $('#order_name').hide();
      $('#order_description').hide();
      $('#ready_order').hide();
    
         }
       </script>
    </head>
    <body>
       <button id="will_order" onclick="start_order_song()">1</button>
    
       <div id="order_song_card">
         <center>Заказ</center><br>
         <input type="text" placeholder="Как вас зовут" id="order_name"><br>
         <textarea type="text" placeholder="Какую пенсю вы хотите" id="order_description"></textarea>
         <button id="ready_order" onclick="ready_order_song()">готово</button>
       </div>
    
    </body>
    </html>
     
    BrABuS нравится это.
  2. rez

    rez Администратор Команда Администрации

    Регистрация:
    6/11/13
    Сообщения:
    5,944
    Симпатии:
    3,332
    Баллы:
    211
    Пол:
    Женский
    Баланс:
    71630 коп.
    Инвестиции, CRT:
    1
    Вывел, руб.:
    0
    Ну результат не такой уж и сложный. Анимация - это индикатор проигрывания песни, так понимаю?
     
    BrABuS нравится это.
  3. TC
    k0ttee

    k0ttee Специалист

    Регистрация:
    12/12/14
    Сообщения:
    1,891
    Симпатии:
    781
    Баллы:
    71
    Баланс:
    90 коп.
    Вывел, руб.:
    1140
    Нет, это зачаток формы связи.
    Замысел был такой: вылетает с краю, уменьшается, летит на иконку почтового ящика, на ящике появляется цифра 1 (типа одно сообщение отправлено).
    Просто решил поделиться кодом - вдруг кому пригодится.
     
    BrABuS и rez нравится это.
  4. TC
    k0ttee

    k0ttee Специалист

    Регистрация:
    12/12/14
    Сообщения:
    1,891
    Симпатии:
    781
    Баллы:
    71
    Баланс:
    90 коп.
    Вывел, руб.:
    1140
    Какая же гадость этот хром... Какой же он корявый!:mad:

    Написал магнитофон и сделал 4-шаговую анимацию, на гребаном чистом CSS сделал.
    Всего 4 ключевых кадра: уменьшение круга, увеличение круга, вращение одной линии в одну сторону, вращение другой линии в другую.

    Вот чему тут казалось бы глючить?

    И знаете что? В хроме его трясет!!! В сафари и остальных операх работает плавно, а в хроме буквально дребезжит мелкой дрожью.

    Глянуть вживую можно в песочнице
    Код:
    https://jsfiddle.net/utL22dqf/6/
    Если кому хочется порисовать в векторе или SVG, не отказался бы от более интересного дизайна. Пока выглядит так.
    Снимок экрана 2016-04-29 в 4.54.29.png
     
    BrABuS нравится это.
  5. Maks

    Maks Продвинутый

    Регистрация:
    14/2/15
    Сообщения:
    227
    Симпатии:
    99
    Баллы:
    16
    Пол:
    Мужской
    Баланс:
    7120 коп.
    Вывел, руб.:
    90
    Такими темпами хром скоро перехватит пальму первенства у всеми "любимого" эксплорера :)
    А, если серьезно, хром действительно глючный браузер, у меня тоже вечно в нем что-то глючит, да и тормозит он, по сравнению с другими, ужасно.
     
    BrABuS нравится это.
  6. TC
    k0ttee

    k0ttee Специалист

    Регистрация:
    12/12/14
    Сообщения:
    1,891
    Симпатии:
    781
    Баллы:
    71
    Баланс:
    90 коп.
    Вывел, руб.:
    1140
    Многие сисадмины (которые обычно сами не пишут код, но замеряют и отлаживают чужой) частенько отмечают факт, что у Firefox кодовая база попрямей и пошустрей чем у Chrome будет.

    Когда вылезаю из Safari, скорее всего возьмусь за "лису". Там дизайн посимпотней хрома но мой взгляд.
     
    BrABuS нравится это.
Похожие темы:
  1. Светлана
    Ответов:
    212
    Просмотров:
    9,782
  2. Светлана
    Ответов:
    86
    Просмотров:
    4,307
  3. rez
    Ответов:
    141
    Просмотров:
    6,148
  4. Alex15_82
    Ответов:
    23
    Просмотров:
    1,115
  5. k0ttee

    Проблема Проблемы с https

    k0ttee, 1/4/17, в разделе: Практикум
    Ответов:
    0
    Просмотров:
    189
Загрузка...