Софт

Animate

Рейтинг: 4.0/5.0 (1072 проголосовавших)

Категория: Windows: Анимация

Описание

Animate

company_name = Animate Co. Ltd.

company_slogan = Your favorite place for your pleasure and dream.

company_type =

foundation = 1983

location = Tokyo, Japan

industry = Retail

homepage = [http://www.animate.co.jp/ Official website ] Nihongo|Animate |?????????|Kabushiki gaisha Animeito is the retailing arm of MOVIC and is the largest retailer of anime. games. and manga in Japan. The first and headquarters store of Animate opened in 1983 and is located in Ikebukuro. a district in Tokyo, Japan. Currently, there are 38 Animate stores in Japan, and one in Taipei. Taiwan. However, for a brief period of time, there was also one in Southern California, specifically in Los Angeles, which closed some time in 2003.

Collaboration with Broccoli

On January 23. 2008. Animate's rival company, Broccoli. announced that they collaborated with Animate and made a new company "AniBro". Animate holds 70% of the company, while Broccoli holds 30%. The president of the company will be the CEO of Animate, although he will continue to manage Animate along with AniBro. AniBro plans to expand using the AniBro brand to many places in Japan. [citeweb |url=http://www.broccoli.co.jp/company/pr/pdf/080123_pr_teikei.pdf |title=?????????????????????????????????? |accessdate=2008-01-26 |language=Japanese |publisher=Broccoli ]

Look at other dictionaries:

animate — [an?i mat?; ] for adj. [, an??mit] vt. animated, animating [< L animatus, pp. of animare, to make alive, fill with breath < anima: see ANIMAL] 1. to give life to; bring to life 2. to make energetic or spirited 3. to stimulate to action or… … English World dictionary

Animate — An i*mate, v. t. [imp. & p. p. ; p. pr. & vb. n. .] [L. animatus, p. p. of animare, fr. anima breath, soul; akin to animus soul, mind, Gr. wind, Skr. an to breathe, live, Goth. us anan to expire (us out), Icel. [ o]nd… … The Collaborative International Dictionary of English

Animate — bezeichnet: Animate (Unternehmen), eine auf Anime und Manga spezialisierte Kaufhauskette in Japan Animate e.V. einen osterreichischen Manga und Anime Verein Diese Seite ist eine Begriffsklarung zur Unterscheidung mehrerer mit demselben Wort… … Deutsch Wikipedia

animate — [adj1] alive breathing, live, living, mortal, moving, viable, vital, zoetic; concept 539 Ant. dead animate [adj2] lively activated, active, alert, animated, dynamic, energized, gay, happy, spirited, vivacious; concept 401 Ant. discouraged, dull,… … New thesaurus

Animate — An i*mate, a. [L. animatus, p. p.] Endowed with life; alive; living; animated; lively. [1913 Webster] The admirable structure of animate bodies. Bentley. [1913 Webster] … The Collaborative International Dictionary of English

animate — adj *living, alive, animated, vital Analogous words: physical, corporeal, *bodily: animal, *carnal, fleshly Antonyms: inanimate Contrasted words: lifeless, *dead animate vb … New Dictionary of Synonyms

animate — index conscious (awake), exhort, generate, incite, inspire, live (conscious), motivate … Law dictionary

animate — > VERB 1) bring to life or activity. 2) give (a film or character) the appearance of movement using animation. > ADJECTIVE ? alive; having life. DERIVATIVES animator noun. ORIGIN Latin animare, from anima life, soul … English terms dictionary

animate — animately, adv. animateness, n. animatingly, adv. v. /an euh mayt /; adj. /an euh mit/, v. animated, animating, adj. v.t. 1. to give life to; make alive: God animated the dust. 2. to make lively, vivacious, or vigorous; give zest or spirit to:… … Universalium

animate — <<11>>animate (adj.) alive, late 14c. from L. animatus (see ANIMATE (Cf. animate) (v.)). <<12>>animate (v.) 1530s, to fill with boldness or courage, from L. animatus pp. of animare give breath to, also to endow with a particular spirit, to give… … Etymology dictionary

Animate:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Анимация с jQuery: 7-шаговая программа (jquery animate)

    Анимация с jQuery: 7-шаговая программа (jquery animate)

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

    Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

    Также скачайте исходники себе на компьютер!

    Предисловие автора

    Анимация: концепция, которая часто вызывает противоположные реакции людей. Некоторые хвалят ее полезность, в то время как прочие клянут за слишком частое применение. Тем не менее, правильно используемая анимация часто оживляет пользовательский интерфейс и делает его гораздо более привлекательным и аккуратным. В этом учебнике мы начнем с основ jQuery, затем узнаем, как создать свою первую анимацию (jquery animate), затем как построить эффекты и, наконец, разработаем нечто действительно высококлассное.

    Заинтересованы? Давайте начнем прямо сейчас! Пожалуйста, заметьте, все адресовано исключительно новичкам, поэтому я буду заострять внимание на некоторых моментах. Шагайте вместе со мной. Если вам интересно, посмотрите в первой части демо-ролика простой эффект, который мы сегодня построим.

    Шаг 1. Основы jQuery

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

    Обычная строка кода выглядит вот так:

    Давайте рассмотрим каждую ее часть:

    $ — сокращение от «объект jQuery». Используйте jQuery в случае, если вы берете другую рамку на той же самой странице, как здесь: jquery(DOM Element).something();

    (DOM Element) – элемент, с которым вы что-то хотите сделать. Это один из тузов в рукаве jQuery. Здесь для получения одного из элементов можно использовать селекторы CSS. Любое объявление, которое работает в CSS-документе, может быть употреблено здесь. ID, классы, псевдоклассы — все, что хотите.

    something() – то, что нужно сделать с полученным элементом. Это может быть все, что угодно – от скрывания элемента до AJAX-вызова к обработчику событий.

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

    Шаг 2. Использование встроенных эффектов

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

    Прежде чем мы рассмотрим каждый из этих методов, вот общий формат для каждого метода:

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

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

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

    Обратный вызов – это функция, которая исполняется, когда анимация закончена. Ее можно использовать, чтобы что-то сделать, выполнить вызов AJAX в фоновом режиме, обновить другую часть пользовательского интерфейса и так далее. Пределом служит только ваша фантазия.

    Вот список функций, идущих в комплекте с jQuery:

    show/hide (показать/скрыть)– методы показа и сокрытия элемента. В качестве параметров использует скорость и обратный вызов.

    toggle (переключение)– метод, который управляет отображением элемента в зависимости от его текущего состояния, например, если элемент скрыт, то начинает отображаться, и наоборот. Использует методы показа и скрытия.

    slideDown/slideUp (смещение вниз/смещение вверх)- говорит сам за себя. Меняет высоту элемента для создания скользящей анимации, позволяющей проявить или скрыть элемент.

    slideToggle (скользящее переключение)- то же самое, что и метод переключения, за исключением того, что использует методы slideDown/slideUp для проявления или сокрытия элементов.

    fadeIn/fadeOut (усиление/затухание)- меняет непрозрачность элемента, о котором идет речь, для создания эффекта постепенного изменения.

    fadeTo – видоизменяет непрозрачность элемента идентично переданной величине. Очевидно, он использует дополнительный параметр непрозрачности, где 0 – абсолютная прозрачность, а 1 – полная непрозрачность.

    Как дополнительное средство, вышеупомянутый метод переключения имеет альтернативную реализацию, где он использует выражение, как параметр для определения того, показывать ли или скрывать элемент.

    Например, если вы хотите переключить только список элементов, которые имеют класс effect(эффект), ваш код будет выглядеть вот так:

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

    Шаг 3. Построение собственной анимации

    Часто встроенные методы не совсем подходят под ваши нужды, и в этом случае вы, очевидно, захотите построить свои собственные эффекты. jQuery позволит вам это сделать. Довольно легко, в общем-то.

    Чтобы сделать собственный анимационный эффект, вы используете метод animate. Позвольте показать вам.

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

    Параметры speed и callback аналогичны предыдущему методу. Объект — набор свойств, который может содержать несколько пар ключ/значение – это именно то, что делает метод уникальным. Вы передаете каждое свойство, которое нужно анимировать, вместе с конечным значением. Например, предположим, что вы хотите анимировать элемент на 90% от его текущей ширины, тогда вам придется сделать что-то вроде следующего:

    Вышеприведенный фрагмент анимирует элемент на 90% его ширины, а затем подает сигнал пользователю, указывающий на то, что анимация закончена.

    Обратите внимание, что вы не ограничены в размерах. Можно анимировать широкий набор свойств, включая непрозрачность, поля, дополнение пробелами, границы, размеры шрифтов. Метод также очень гибок, когда речь заходит о модулях программы. Работает все – пиксели, проценты. Заработает все перемешенное, как показано ниже. Правда, выглядеть связным оно не будет.

    При определении свойства, которое состоит более чем из одного слова, заметьте, что его нужно определять слитно прописными буквами без разделяющих дефисов (т.н. camel case). Это контрастирует с обычным синтаксисом CSS, так что обратите внимание. Правильно borderTop . а не border-top .

    Примечание: jQuery позволяет анимировать только свойства, принимающие числовые значения. Это означает, что можно использовать только основные свойства, а все что связано с цветом — нет. Но не волнуйтесь. С помощью jQuery UI мы вскоре сможем анимировать и цвета.

    Шаг 4. Тонкая настройка эффекта

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

    Самый простой способ избежать этой проблемы – использовать метод stop сразу перед началом анимации. Он эффективно очищает очередь и анимация может идти как обычно. Например, таким будет привычный код.

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

    Довольно просто, не так ли? Но этот метод имеет небольшую проблемку. Быстрое движение не приведет к излишним повторениям, но анимация останется незавершенной. Если хотите полностью избавиться от этого недостатка, вам придется использовать плагин типа hoverFlow .

    Шаг 5. Добавим немного реализма — ускорение

    Если хотите добавить немного реализма, вам нужно лучше контролировать скорость прохождения анимации. Вот где и таится easing (ускорение). Оно, по существу, управляет ускорением и замедлением анимации во времени.

    По умолчанию метод easing – это качель, встроенная в jQuery. Плагин easing Robert’а Penner’а позволяет использовать множество эффектов ускорения. Обратитесь к разделу easing в демо-ролике, чтобы взглянуть на каждый эффект ускорения.

    Когда дело доходит до использования собственного эффекта ускорения, то позвольте предупредить: его можно использовать только с методом animate. Когда вы имеете присоединенный плагин ускорения, использовать собственный метод ускорения так же просто, как и передавать его в качестве параметра, как указано здесь:

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

    Шаг 6. Подгоняем «тютелька в тютельку» — jQuery UI

    Обновление до jQuery UI добавляет множество очень нужных функций. Вам, фактически, не нужна вся библиотека для того, чтобы пользоваться дополнительными функциями. Вам требуется только файл эффектов ядра, чтобы воспользоваться всей функциональностью. Не ядро UI, а только файл эффектов ядра, который весит каких-то мизерных 10 килобайт.

    Важные функции, которые добавляет в таблицу библиотека эффектов jQuery UI – это поддержка анимирования цветов, ускорение и трансформация классов.

    Если помните, я уже упоминал, что с ядром библиотеки jQuery вы ограничены только анимированием тех качеств, которые принимают числовые значения. В jQuery UI все ограничения снимаются. Теперь можно легко анимировать цвет фона элемента, цвет его границы и так далее.

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

    Например, если вы хотите анимировать цвет границы элемента при наведении курсора, ваш код будет выглядеть так:

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

    И последняя характеристика, которую вносит jQuery, это интегрированные уравнения ускорения. Ранее вам приходилось пользоваться дополнительным плагином, чтобы позаботиться об этом, но сейчас они идут в комплекте, так что больше об этом не нужно беспокоиться.

    Шаг 7. Построение нашего первого по-настоящему высококлассного эффекта

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

    Представьте: вы хотите показать изображение, и когда мышь пользователя указывает на него, вы демонстрируете два раздела внутри картинки. Один показывает заголовок, а второй показывает крошечное описание изображения. Я уверен, вы найдете буквально несметное множество плагинов, которые делают то же самое, но сегодня мы собираемся построить его с нуля. Я обещаю вам, что это не так сложно, как казалось бы. Фактически, это весьма легко и можно построить очень быстро. Давайте начнем.

    Во-первых, нам нужна простая базовая разметка, на которой можно строить.

    Для получения этого эффекта нам, во-первых, нужно обдумать структуру каждого элемента. Каждый такой элемент заключается в оболочку div с классом item. Внутри оболочки div помещается 3 тега: само изображение и два дочерних элемента div, содержащих название и описание.

    Прочие части довольно обычные и говорят сами за себя. Мы начинаем с включения библиотеки jQuery, библиотеки jQuery UI и нашего файла, который содержит обычный код JavaScript. Заметьте, что мне понадобилось только часть ядра эффектов jQuery UI, так что я скачал только его. Если вам нужно больше встроенных эффектов, то нужна пользовательская сборка. Ее можно скачать здесь .

    Вот как выглядит наша страница на этом этапе.

    Здесь вы должны кое-что взять на заметку. Каждый элемент имеет свойство position установленное как relative (относительная), так, что элементы внутри него могут быть установлены в абсолютных координатах. Кроме того, свойство overflow (переполнение) установлено на hidden (скрыто), так что мы можем скрывать название и описание за пределами видимой области, пока они нам не понадобятся.

    Название и описание имеют свойство position установленным на absolute (абсолютный) и могут быть точно заданы внутри внешнего элемента. Название имеет верхнее значение top (верх) установленным на 0, так что оно находится сверху, а описание имеет свое нижнее значение bottom (низ) равным 0, так что находится прямо в самом низу.

    Помимо того, CSS очень шаблонен и занимается главным образом разметкой текста, немного позиционированием и стилями. Ничего слишком радикального.

    Вот как выглядит наша страница на этой стадии.

    Магия JavaScript, включенная с помощью jQuery

    Может быть, выглядит слишком впечатляюще, но на самом деле это не так. Я объясню каждую часть.

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

    Во-первых, мы убираем название и описание из виду. Мы делаем это при помощи JavaScript, а не CSS по очень конкретной причине. Даже если JavaScript отключен, он выглядит довольно изящно. Название и описание по-прежнему наложены поверх изображения и все это смотрится как в стадии проведения над ним мышью. Если для скрытия названия и описания использовать CSS, и при этом отключить JavaScript, они будут полностью скрыты и совершенно бесполезны. Я выбрал для грязной работы JavaScript в интересах обеспечения лучшего качества.

    Мы изначально привязали наш пользовательский код к функции hover каждого элемента класса item. Это позволяет сделать этот обработчик довольно универсальным и многократно используемым. Добавление этой функциональности к любым другим элементам так же просто, как и придание им класса item. Первая функция – для события hover. вторая – для события unhover .

    В рамках функции параметр this относится к элементу, который запустил событие. Для изменения соответствующих значений мы пользуемся методом animate. Мы также используем немного ускорения для того, чтобы сделать его более броским. На mouseout или unhover мы просто изменили их значения обратно к значениям по умолчанию.

    И еще, когда над контейнерами названия и описания проводят мышью, они медленно трансформируют цвета благодаря jQuery UI.

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

    Заключение

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

    Вопросы? Похвала? Критика? Напишите разделе комментариев. Счастливого кодирования!

    JQuery для начинающих

    jQuery для начинающих. Часть 5. Эффекты // JavaScript

    Продолжаем изучать jQuery. Переходим к эффектам…

    Материалы данной статьи включены в учебник «jQuery для начинающих ». Учебник распространяется бесплатно, и сопровождается интерактивными примерами .

    Хотел было написать огромную статью о эффектах, с примерами той или иной анимации, но получилось скорее заметка, которая поможет вам понять суть эффектов в jQuery

    Запомните – все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).

    Функция animate понимает следующие параметры:

    • params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate() – и высота плавно изменяется до 200px)
    • duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms
    • easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin )
    • callback – функция, которая будет вызвана после окончания анимации

    Альтернативный способ инициализации:

    • params – описание CSS свойств элемента, до которых будет происходить анимация
    • options – объект настроек:
      • duration – см. выше
      • easing – см. выше
      • complete – аналогичен ранее описанному callback-параметру
      • step – еще одна callback функция – отвечает за пошаговое изменение параметров – пример ниже
      • queue – флаг очереди, если выставить в false – то данная анимация будет игнорировать очередь и запустится сразу

    Если заглянуть в руководство пользователя – то в разделе эффектов можно найти еще несколько вспомогательных функций:

    • show( ) – отображает выбранные элементы
    • hide( ) – скрывает выбранные элементы
    • toggle( ) – переключатель между show/hide
    • slideDown( speed, callback ) – выдвигает объект(ы) вниз – увеличивает высоту от 0 до 100%
    • slideUp( speed, callback ) – задвигает объект(ы) вверх – уменьшает высоту от 100% до 0
    • slideToggle( speed, callback ) – переключатель между slideDown/slideUp
    • fadeIn( speed, callback ) – отображает выбранные элементы – изменяет прозрачность элементов
    • fadeOut( speed, callback ) – скрывает выбранные элементы – изменяет прозрачность элементов
    • fadeTo( speed, opacity, callback )- изменяет прозрачность элементов до указанного значения

    Самые простые методы hide и show обходятся без функции animate, т.к. манипулируют лишь атрибутом display (демо ):

    Как я и говорил ранее – остальные вспомогательные функции лишь обертки над animate, приведу пример (демо ):

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

    Стоит так же обратить внимание на способ задания параметров CSS для animate:

    Step Callback

    Не стоит забывать и о step-функции, приведу пример использования (демо ):

    Отключение

    Иногда требуется отключить всю анимацию (для дебага к примеру) – воспользуйтесь следующей конструкцией:

    В очередь, … ©

    Немного о очередности работы функции animate – большинство моих читателей уже знакомо с организацией последовательной анимации – для этого мы можем использовать цепочку вызовов:

    Для параллельного запуска анимации, необходимо будет внести следующие изменения:

    Так же есть функции stop – с помощью данной функции мы можем остановить выполнение текущей либо всех анимаций (демо ):

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

    • queue( name ) – возвращает очередь – массив функций
    • queue( name, callback ) – добавляет функцию в очередь
    • queue( name, queue ) – заменяет текущую очередь новой
    • dequeue( name ) – берет первую функцию из очереди и выполняет её

    По умолчанию все манипуляции производятся с очередью “fx” – т.е. очередь со всей анимацией

    Данные функции могут понадобиться для управления анимации (демо ):

    Или вот пример реализации очереди отличной от “fx”:

    Пока я вижу одну недоработку – все анимации используют очередь “fx”, и никак изменить это нельзя, т.е. анимация либо идет вместе со всеми в этой очереди, либо сама по себе запускается сразу, назначить анимации другую очередь нельзя

    Возвращаясь к анимации, думаю стоит обратить внимание на способ “наращивания” значений CSS свойств, происходит это следующим образом:

    По умолчанию, для изменение delta используется линейное уравнение, опционально можно указать ‘swing’, но используя плагин easing. можно разнообразить этот список (демо ) :

    • Quad — квадратичная функция (delta = progress 2 ).
    • Cubic — кубическая функция (delta = progress 3 ).
    • Quart — delta = progress 4 .
    • Quint — delta = progress 5 .
    • Expo — экспоненциальная функция (delta = 2 (progress ? 1) ? 8 )
    • Circ — четверть окружности (delta = 1 ? sin(acos(progress)))
    • Sine — кусок синусоиды (delta = 1 ? sin((1 ? progress) ? ? / 2))
    • Back — сначала оттягивает delta в минус, а потом плавно доводит до 1
    • Bounce — прыгающий переход
    • Elastic — эластичный переход (резинка)

    Данные функции оперируют следующими параметрами (именование параметров из jquery.js):

    • p – коэффициент прохождения анимации, изменяется от 0 до 1
    • n – коэффициент наложенный на время (p*duration)
    • firstNum – начальное значение = 0
    • diff – изменение значения = 1

    При подготовке данного раздела использовались материалы из статьи Анимация в MooTools. Основы и не только

    Есть несколько плагинов, который расширяют функционал animate (возможно вы используете еще какие – то отпишитесь):

    • easing – дополнительные уравнения для easing (позволит разнообразить анимацию)
    • color – позволяет плавно изменять цвет шрифта/фона/границ
    • backgroundPosition – с его помощью можем анимировать фоновое изображение элементов

    Вывод напрашивается сам собой – большинство плагинов для анимации – это лишь обертки над animate, и следовательно не всегда стоит подключать сторонние плагины для реализации своей цели.

    P.S. Для всех моих читателей – RSS канала доступен по адресу http://anton.shevchuk.name/feed/ (единственный верный).

    P.P.S. Еще я постоянно зависаю на твиттере. так что следуйте за мной…

    Animate

    -етот метод позволяет создавать произвольную анимацию за счет изменения числовых атрибутов (например, height, width, opacity и др.).

    Метод animate () имеет два формата.

    animatе (. )

    В первом параметре атрибуты и значения должны быть указаны следующим образом.

    Атрибут1. "Значение1",

    Атрибут2: "Значение2",

    АтрибутN: "ЗначениеN"

    В качестве значения могут быть указаны:

    • число с абсолютными единицами измерения (например, рх, in и др.);

    • число с относительными единицами измерения % и em;

    • hide, show или toggle.

    Можно также определять значения атрибута относительно его текущей позиции, указав перед значением += или -= .

    В параметре может быть указано время выполнения анимации в миллисекундах или следующие значения:

    В параметре могут быть указаны эффекты замедления из дополнительных модулей или два значения:

    • swing — в начале идет ускорение, а в конце замедление (значение по умолчанию);

    • linear — равномерная скорость движения.

    В параметре значения должны быть указаны следующим образом.

    Animate

    Метод .animate()

    Метод выполняет анимацию, настроенную с помощью свойств CSS.

    .animate( properties, [ duration ], [ easing ], [ callback ] )
    • properties — Объект со свойствами CSS, согласно которым будет выполняться анимация.
    • duration — Строка или число, определяющая длительность анимации.
    • easing — Строка, определяющая функцию управления скоростью анимации.
    • callback — Функция, вызываемая после выполнения анимации.

    Метод появился в jQuery 1.0.

    .animate( properties, options )
    • properties — Объект со свойствами CSS, согласно которым будет выполняться анимация.
    • options — Объект дополнительных настроек анимации. Поддерживаются опции:
      • duration: Строка или число, определяющая длительность анимации.
      • easing: Строка, определяющая функцию управления скоростью анимации.
      • complete: Функция, вызываемая после выполнения анимации.
      • step: Функция, вызываемая после каждого шага анимации.
      • queue: Флаг типа Boolean, задающая необходимость помещения анимации в очередь эффектов jQuery. Есил этот флаг равен false. то анимация начнется незамедлительно.
      • specialEasing: Объект из одного или более свойств CSS, в соответствие каждого свойству CSS ставится собственная функция управления скоростью изменения этого свойства (опция добавлена в jQuery 1.4).

    Метод появился в jQuery 1.0.

    Метод .animate() позволяет создавать эффекты анимации для любых числовых свойств CSS. Единственным обязательным параметром является объект со свойствами CSS. Этот объект похож на такой же объект, что передается в метод .css(). за исключением того, что набор свойств несколько ограничен.

    Все анимируемые свойства должны задаваться в виде отдельного числового значения (за исключением свойств, описанных ниже); нечисловые свойства не могут быть анимированы с использованием базового функционала jQuery. (Например, свойства width. height или left могут быть анимированы, но свойство background-color не может. Существуют отдельные плагины для анимации таких свойств, как color. background-color. border-color ). Значения свойств без единиц измерения трактуются в виде количества пикселей. Единицы измерения em и % могут указываться, только в тех случаях, когда это применимо.

    Сокращенные свойства CSS (например, margin. background. border ) не поддерживаются. Например, если вам необходимо произвести анимацию свойства margin ,то нужно указать каждое из отдельных свойств:

    В дополнение к числовым значениям каждое свойство может быть задано в виде строки 'show'. 'hide' или 'toggle'. Эти ключевые слова позволяют производить анимацию со скрытием и отображением элемента, учитывая исходное значение свойства display .

    Значения анимируемых свойств также могут быть относительными. Если перед числовым значением добавить последовательность символов += или -=. то конечное значение свойства будет вычислено добавлением или вычитанием указанного числа из текущего значения свойства.

    Длительность анимации

    Длительность указывается в миллисекундах; чем больше значение, тем медленнее анимация. Также допустимы строковые значение 'fast' и 'slow'. которые соответствуют длительности 200 и 600 миллисекунд.

    Вызов функции после завершения анимации

    Если указана функция обратного вызова (callback function), то она выполняется сразу после завершения анимации. Это может быть полезно для последовательного запуска нескольких анимаций. В эту функцию обратного вызова не передаются какие-либо аргументы, но переменная this содержит ссылку на элемент DOM, над которым выполняется анимация. Если анимируется несколько элементов одновременно, важно понимать, что функция обратного вызова выполнится один раз после завершения анимации каждого элемента, а не всей анимации в целом.

    Можно анимировать любой элемент, например, изображение:

    В примере ниже в процессе анимации изменяется прозрачность ( opacity ), сдвиг слева ( left ) и высоту ( height ) изображения одновременно:

    Обратите внимание на то, что мы указали строку 'toggle' в качестве значения свойства height. Так как перед анимацией изображение было видимо, то анимация сожмет его по вертикали, уменьшив высоту до 0, и скроет его. После следующего клика по элементу с ID #clickme. высота изображения вернется в исходное состояние:

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

    Свойство position у элемента не должно быть равно значению static. если необходимо выполнить анимацию свойства left. right и т.п.

    Выполнение пользовательской анимации

    Материал из JQuery

    Выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов. Функция имеет два варианта использования:

    animate(properties, [duration], [easing], [callback]):jQuery 1.0

    properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)

    duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).

    easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)

    callback — функция, которая будет вызвана после завершения анимации.

    animate(properties, options):jQuery 1.0

    properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)

    options — дополнительные опции. Должны быть представлены объектом, в формате опция:значение. Варианты опций:

    duration — продолжительность выполнения анимации (см. выше). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже) complete — функция, которая будет вызвана после завершения анимации. step — функция, которая будет вызвана после каждого шага анимации. queue — булево значение, указывающее, следует ли помещать текущую анимацию в очередь функций. В случае false. анимация будет запущена сразу же, не вставая в очередь. specialEasing — позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр:значение. Опция была добавлена в jQuery 1.4.

    Animate - Русская документация по jQuery

    animate ( параметры,  [duration ] ,  [easing ] ,  [вызов ] )

    Данная функция предназначена для создания пользовательской анимации.

    Ключевым аспектом данной функции является объект свойств стиля, который будет анимирован. Каждый ключ в рамках объекта представляет собой свойство стиля, которое также будет анимированно (например, «height», «top» или «opacity»).

    Кроме того, свойства должны быть указаны с использованием camel case (т.е. например, нужно писать  marginLeft вместо margin-left).

    Значение, связанное с ключом, показывает конец процесса анимирования свойства. Если указано число в качестве значения, тогда соответствующее свойство стиля перейдет из текущего состояния в новое. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и  «toggle»). Например, backgroundColor не поддерживается.

    Начиная с jQuery 1.2 можно указывать значения свойств используя em и % (где есть такая возможность). Кроме того, в jQuery 1.2 можно делать «относительную» анимацию, т.е. указывать значения соответствующего свойства относительно его текущей позиции (используя «+=» или же «-=»), чтобы двигать элемент в положительную либо отрицательную стороны.

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

    Animate

    Использование Animate.css

    08.08.2013

    Влад Мержевич

    После прочтения этой статьи у многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

    1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

    • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
    • Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
    • Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

    Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.

    2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим здесь ). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:

    Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.

    3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).

    Пример 1. Всплывающее сообщение

    Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу <img> добавляем класс animated и подключаем jQuery (пример 2).

    Пример 2. Галерея

    В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce ; если курсор убрать, то класс bounce также убирается.

    4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.