JQuery - Как я могу плавно изменить размер изображения, чтобы создать пульсирующий эффект?

Question

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

Текущая анимация находится на главной странице сайта http://laveryrowe.com. Рассматриваемая анимация - это изображение на 75%, которое можно увидеть сразу после прибытия на сайт.

Я тестировал в Safari, Firefox и Internet Explorer.Анимация только что делает переход в Firefox, однако Safari и Internet Explorer не дают достаточно плавного изменения размера для нашего клиента.

Кто-нибудь знает лучший метод анимации, чем тот, который я использовал?(см. код ниже и посмотрите сайт для примера).

function pulse() {
    $('#seventyfive').animate({
        marginTop: 175, 
        marginLeft: 25, 
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            marginTop: 161.95, 
            marginLeft: 15.2, 
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

Заранее большое спасибо, мы действительно можем использовать руку,

Редактировать: Проблема не в позиционировании (или, по крайней мере, я так не думаю), а скорее в том, как изменяется размер изображения, вы можете заметить дрожащие края по мере его увеличения,Кажется, выглядит лучше, когда увеличивается непрозрачность, но мне нужно то же качество, когда оно непрозрачное.

Jai

Answer 1

Ваша анимация не плавная, потому что ваш marginLeft округляется в меньшую сторону (изображение перемещается влево на один пиксель), а затем ваша ширина округляется в большую сторону (пиксели изображения сдвигаются вправо лишь немного, потому что они повторно выбираются для увеличения.) Даже если изображение не двигалось правильно, ваши глаза говорят вам, что это произошло, потому что они воспринимают середину изображения как немного правее.Это, наряду с выполнением одного и того же действия по вертикали, заставляет анимацию казаться прыгающей вокруг.

Вот пример того, почему я думаю, что края кажутся мерцающими или дрожащими.Ниже приведены два изображения размером 3 на 1 пиксель.Они оба уменьшены до 5 на 1 и сдвинуты на 4 пикселя влево.Синий - это то, что вы видите, где размер и местоположение меняются независимо.Красный позволяет изменять размер только при изменении местоположения и должен выглядеть как плавная анимация.

Answer 2

Рассматривали ли вы использование эффектов пользовательского интерфейса jQuery?

http://jqueryui.com/demos/effect/#default

Другая альтернатива состоит в том, чтобы отговорить их от пульсирующих 75% до желтых мигающих баннеров и со вкусом использоватькадры.

Answer 3

А как насчет анимации размера шрифта?Т.е. => http://jsfiddle.net/steweb/D3X7R/

js / jQuery

(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 0.5
        }, 700, function(){pulse(!back)});
})(false);

Разметка:

<div id="seventyfive">75%</div>

Css:

#seventyfive{
    position:absolute;
    font-size:100px;
    font-weight:bold;
}

Answer 4

Вот пример следующего →

Проблема в том, что вы одновременно анимируете и позицию, и размер, и онине синхронизировано друг с другом.Я понимаю, что вы делаете это, чтобы держать его по центру по вертикали и горизонтали.Вместо этого я бы использовал таблицу ( dreaded ), чтобы держать изображение в правильном положении, и просто изменял размер и непрозрачность с помощью Javascript, например:

<table id="table75">
    <tr>
        <td><img id="seventyfive" src="http://laveryrowe.com/assets/images/heading_index_75.png" /></td>
    </tr>
</table>

#table75 { width:XXXpx; height:YYYpx; }
#table75 tr { vertical-align:middle; }
#table75 tr td { text-align:center; }

function pulse() {
    $('#seventyfive').animate({
        width: 261, height: 98, 
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            width: 287.1, height: 107.8, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

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

См. пример →

Answer 5

Вы можете попробовать использовать + = некоторое количество вместо анимирования до определенного значения каждый раз. Я использовал это раньше и никогда не замечал никаких проблем.

Answer 6

Я бы использовал Flash для анимации "75%" сглаживания PNG SUPER с помощью функции замедления.Это будет работать очень хорошо.