Кто-нибудь имел успех с большим изображением, переводом/анимацией на Chromecast?

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


chromecast
person user2880296    schedule 14.10.2013    source источник
comment
Вам повезло с этим? Мне интересно знать, каковы факторы плавности анимации...   -  person Ed_    schedule 25.10.2013
comment
Эд, см. ниже. Также я думаю, что гладкость связана с тем, что именно вы пытаетесь анимировать. Например, что-то вроде наложения для воспроизведения/паузы, которое представляет собой полупрозрачный квадрат размером ~ 80 x 80 пикселей, вы можете использовать переход css для непрозрачности. Если анимация составляет около 0,25 с, то все должно быть в порядке. У меня возникли проблемы с медленным перемещением изображения размером 1000x600 пикселей по экрану.   -  person user2880296    schedule 26.10.2013
comment
Хорошо - у меня был подобный опыт. Анимировать текст на экране с помощью CSS-перехода не составило труда. Вместо этого используйте изображение 1080p, и вы получите огромное количество разрывов.   -  person Ed_    schedule 26.10.2013
comment
Мне тоже был бы интересен ответ на этот вопрос. Я понимаю, что Chromecast не очень эффективен для такого типа операций, но мне интересно, как Google сделал это самостоятельно для своего приложения галереи изображений, которое переключается между изображениями, когда нет запущенных приложений?   -  person Garett    schedule 29.10.2014
comment
Я тоже пытаюсь найти решение этой проблемы. Мое приложение требует перемещения 100 или около того div в виде прокрутки, обновляемой не менее 25 кадров в секунду (40 мс). Я пробовал translateX, style.left, element.offset, и все они дают такие же плохие результаты. Я также пытался использовать RequestAnimationFrame вместо setInterval безрезультатно.   -  person Dan Barry    schedule 20.01.2015

Ответы (3)


arrow_upward
2
arrow_downward

Если вы посмотрите на события на панели временной шкалы отладчика Chromecast Chrome, вы обнаружите, что любая краска на разумном размере экрана занимает около 100 мс. Да, 1/10 секунды! Это делает любую анимацию (CSS, JQuery и т. д.) очень сложной и часто неустойчивой.

Что касается движения элементов, я не заметил никакой разницы в производительности анимации CSS по сравнению с производительностью анимации JQuery(). Я ожидаю, потому что ужасные времена Paint скрывают любые различия.

Можно было бы подумать, что Google использовал бы часть этого великолепного видеооборудования для улучшения производительности отрисовки браузера Chromecast, но этот тип приложения Chromecast, похоже, не является одним из их вариантов использования.

person FinnTheHuman    schedule 25.10.2013
comment
Вот еще информация. Неудивительно, что CSS оказывает существенное негативное влияние на время отрисовки. Например, удаление box-shadow: 2px 2px 10px 2px rgba(200, 200, 200, 0.1); из элемента, который я анимировал, сократило время падения краски примерно на 40% и увеличило кажущуюся плавность анимации. Я предполагаю, что все, что изменяет основной фон (в данном случае альфа-тень), следует использовать с осторожностью или не использовать вообще. - person FinnTheHuman; 26.10.2013
comment
Я также нашел аналогичные результаты. Когда я тестировал полномасштабную анимацию снежинок на холсте html5, похожую на link[ ссылка на сайт]. Я обнаружил, что могу получить максимум 3,5 кадра в секунду. В другом случае мне удалось анимировать непрозрачность с помощью 'code'-webkit-transition: opacity .35s easy-in-out;'code'. .35s был почти максимальной длиной с гораздо лучшими результатами. Мне любопытно попробовать перемещать изображение каждые 100 мс, чтобы придать ему своего рода эффект ожогов кеном, как если бы он перемещался по экрану. Единственное, что меня беспокоит, это неожиданные перекраски. - person user2880296; 26.10.2013
comment
@FinnTheHuman Очень ценная информация! Действительно, box-shadow убивает производительность Chromecast. Я считаю, что то же самое относится и к text-shadow. Крошечный графический процессор, безусловно, должен бороться с (я полагаю) внеэкранными буферами. Вы нашли других преступников, о которых нужно знать? - person l33t; 11.06.2021

arrow_upward
1
arrow_downward

Помните, что устройство Chromecast

  • имеет ограниченные ресурсы (как ЦП, так и память)
  • имеет урезанную версию хрома

В результате вы не сможете делать много причудливых переходов/переводов, которые вы в противном случае могли бы сделать на рабочем столе, или производительность (насколько она плавная) не будет такой, какой вы хотели бы ее видеть. так что если вы воспроизводите медиа одновременно.

person Ali Naddaf    schedule 14.10.2013
comment
Я понимаю и полностью понимаю, что Chromecast имеет серьезные ограничения, поэтому ваш ответ совершенно бесполезен. В нескольких случаях я обнаружил, что изменение времени, а также типа анимации CSS значительно повышает производительность. Например, если вы постепенно исчезаете и появляется на основе непрозрачности менее 0,25 с, анимация кажется довольно плавной. Я просмотрел код того, как команда Chromecast делает анимацию, и иногда они идут на многое, чтобы использовать более 100 изображений для анимации чего-либо. «Невозможно» — неприемлемый ответ, когда это делают люди из Google или вашей команды. - person user2880296; 15.10.2013
comment
Если вы ищете общий рецепт, чтобы сказать, что вы используете эти параметры и тому подобное, вы не получите его, поскольку таких вещей не существует. Возможно, вы сможете поиграть с различными параметрами, чтобы улучшить результат в вашем случае, но эти настройки ограничивается конкретным случаем и не может быть обобщена на все случаи. Все это вызвано ограничениями аппаратного обеспечения. Вы можете углубиться в конкретный сценарий, который у вас есть, и посмотреть, как вы можете улучшить то, что получаете, но общий ответ на ваш вопрос остается прежним: вы не можете ожидать причудливых переходов в целом. - person Ali Naddaf; 15.10.2013

arrow_upward
1
arrow_downward

Я разрабатываю приложение chromecast, в котором у меня есть очень большой DIV с абсолютным позиционированием, который я анимирую на экране и за его пределами. Он имеет довольно сложный макет с html, css и изображениями, даже анимированными GIF-файлами. Однако, пока я удостоверяюсь, что во время выполнения анимации нет перекомпоновок, я получил хорошую производительность, используя transform: translate() CSS для управления ее положением. Ранее я модифицировал свойство CSS top, но производительность была жалкой.

В качестве примера, вот немного HTML:

<body>
    <div>
        ... Main content ...
    </div>
    <div id="overlay">
        ... Overlay content here ...
    </div>
</body>

И соответствующий CSS:

#overlay {
    position: absolute;
    top: 25px;
    left: 50px;
    width: 1180px;
    height: 670px;
    transition: all 1s;
    transform: rotate(-2deg) translateY(750px);
}

#overlay.active {
    transform: rotate(-2deg) translateY(0);
}

При этом все, что я делаю в своем javascript, — это включаю и выключаю класс active, чтобы наложение отображалось и скрывалось. Я не могу заставить отладчик временной шкалы работать с удаленным хромкастом, поэтому я точно не знаю, что такое FPS, но объективно кажется, что это не менее 30 кадров в секунду. Он определенно кажется гладким. Надеюсь, это поможет.

person Niicodemus    schedule 30.03.2015