простая анимация CSS3 не гладкая на сафари и iPad UIWebView - PullRequest
Новая
       1

простая анимация CSS3 не гладкая на сафари и iPad UIWebView

1 голос
/ 08 сентября 2011

Я пытаюсь переместить блок текста с помощью анимации css3. Анимация не плавная на сафари и iPad UIWebview. Вот код . Есть ли способ сделать это намного более гладким? Это более заметно, когда я анимирую изображение. Я использовал другую функцию хронометража, но она все еще не гладкая. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
    width:100px;
    height:100px;
    position:relative;

    -webkit-animation-name: mymove;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;  

}


@-webkit-keyframes mymove 
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>


<div>Move this block</div>

</body>
</html>

Ответы [ 3 ]

4 голосов
/ 26 октября 2011

Вы можете попытаться «форсировать аппаратное ускорение», добавив -webkit-transform: translateZ (0) к анимированному div

Попробуйте здесь: http://jsfiddle.net/aHWzN/

Обновление: Теперь вы можете использовать will-change, чтобы обеспечить более плавную анимацию: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

.foo {will-change: left}
2 голосов
/ 18 мая 2012

Это должен делать тот составной слой, который минимизирует перекрашивание. Вы можете включить это в about: flags в Chrome, чтобы увидеть составные слои, называемые «Границы составного слоя рендеринга».

Когда вы используете -webkit-transform: translate3d (0,0,0), он часто «пинает» его в составной слой. Он также готовит его к анимации.

Например, если у вас есть карусель изображений, если вы анимируете изображения, сначала поместите -webkit-transform: translate3d (0, 0, 0); на картинке

Но это само по себе не исправит мерцание вашей анимации в iPad.

Указав функцию синхронизации, она лучше обрабатывает анимацию, и вы получите плавные результаты.

-webkit-хронометраж-функция: кубический Безье (0,42, 0, 0,58, 1,0); ослабевает.

Вчера я сделал простую карусель со скользящими изображениями, которая плавно работает на iPad 1. https://github.com/grandecomplex/imagecarousel

1 голос
/ 28 ноября 2011

Возможно, вы захотите взглянуть на блог моего коллеги. Он подробно обсуждает производительность анимации iOS вместе с видео, показывающим различия в производительности между версиями iOS. http://uncorkedstudios.com/2011/11/18/animation-performance-disparity-on-ios/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...