Преобразования WebKit CSS и анимация в Javascript

Я работаю над веб-приложением для iPhone. Я только начал играть с правилами CSS webkit-transform и webkit-animation. У меня есть несколько вопросов: например, есть ли реальное преимущество в использовании их вместо, скажем, jQuery.animate(...)? Полученные анимации не кажутся такими уж ускоренными и быстрыми. Давайте лучше объясним: у меня есть ряд изображений, которые я должен перемещать по экрану, например, галерея... Я устанавливаю правила CSS для каждого изображения следующим образом:

-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;

затем я изменяю style.left и style.top каждого элемента, который хочу переместить, с новыми координатами. Результат не такой быстрый, как я ожидал. Это более или менее быстро, как jQuery (совсем не плавно). Я видел, что есть даже -webkit-animation и -webkit-transform, но я до сих пор не понимаю, как их правильно использовать. Первый позволяет мне перемещать предметы, но не создает анимацию, я использую следующий код:

var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;

при этом элемент перемещается, но без анимации. Если я динамически создаю анимацию с помощью:

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";

таким образом элемент переместится один раз, не так плавно, и вернется в свое старое положение. Повторение этого кода ни к чему не приводит.

Как вы думаете, есть ли реальное преимущество с точки зрения плавности движений в их использовании? И если да, то как их правильно использовать?


iphone animation webkit
person gotch4    schedule 23.07.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что-то вроде этого должно делать то, что вы хотите, и довольно гладко работает в Safari на моем iPhone 4:

<style type='text/css'>

    #element {

        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transition-property: top, left, bottom, right;
        -webkit-transition-duration: 300ms;
        -webkit-transition-timing-function: ease-in;

    }

</style>

<script type='text/javascript'>

    document.querySelector('#element').style.left = '300px';

</script>
person Collective Cognition    schedule 04.02.2011