fat
v0.6.8
Когда дело доходит до необработанной анимации Speed Fat, превосходит каждую библиотеку веб -анимации, а также предоставляет гибкие возможности анимации, такие как сцены, последовательности, преобразования, окраска, контроль и ослабление.
Руководство по установке • Справочник API • Примеры • Пользовательские сборки • Ранжирование эталона
Получить последний (стабильный релиз):
| Строить | Файл | CDN |
| fat.min.js | Скачать | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | Скачать | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.compact.js | Скачать | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js |
| fat.custom.js | Пользовательская сборка |
Все функции:
| Особенность | fat.min.js | fat.compact.js | fat.light.js |
| Анимация | х | х | х |
| Сцены (группы) | х | х | х |
| Сборка смягчения (пользовательский пенистал) | х | х | - |
| Контроль (временная шкала) | х | - | - |
| Последовательности | х | - | - |
| Ключевые кадры | х | - | - |
| Предустановки (эффекты) | х | - | - |
| Преобразования (2d/3d) | х | х | - |
| Фильтр | х | - | - |
| Цвета | х | х | - |
| Пользовательские свойства/рендерер | х | х | х |
| Относительные значения | х | - | - |
| Прокрутка | х | - | - |
| Краска | х | - | - |
| Параллелизм (строгий режим) | х | - | - |
| Рендеринг двигателей | JS, CSS3, Waapi | Младший | Младший |
| Размер файла (GZIP) | 7,0 КБ | 4,5 КБ | 1,9 КБ |
Отладка и профилировщики флага также доступны в FAT.JS для непроизводственного использования.
Также очень просто сделать пользовательскую сборку
Сравнение библиотеки: эталон "Запрыгивающие мячи"
«Анимат» (запрыгивающие шарики 2000 года)
| Классифицировать | Название библиотеки | Библиотечная версия | Размер библиотеки | Куча памяти * | Распределение памяти ** | Обновления в секунду | Кадры в секунду |
| 1 | ТОЛСТЫЙ | 0,6,6 | 1,9 КБ | 0,85 МБ | 0,15 МБ | 103954 | 51,5 |
| 2 | GSAP | 2.0.2 | 25,8 КБ | 28,32 МБ | 8,1 МБ | 87249 | 43.1 |
| 3 | Tweenjs | 1.0.2 | 8,3 КБ | 3,16 МБ | 3,1 МБ | 69647 | 34.4 |
| 4 | Html5 (waapi) | - | - | 0,91 МБ | 0,75 МБ | - | 32.2 |
| 5 | Tinyaniate | 0.4.0 | 1,5 КБ | 1,93 МБ | 1,98 МБ | 28801 | 29 |
| 6 | Мутаол | 1.6.0 | 31,2 КБ | 3,14 МБ | 3,42 МБ | 26919 | 25.2 |
| 7 | CSS3 (переход) | - | - | 0 МБ | 0 МБ | - | 22.3 |
| 8 | Скорость | 2.0.5 | 16,6 КБ | 8,33 МБ | 7,98 МБ | 16820 | 6.3 |
| 9 | Анимея | 2.2.0 | 5,9 КБ | 7,14 МБ | 8,2 МБ | 9877 | 2.8 |
| 10 | Anim.js | - | 1,9 КБ | 7,08 МБ | 9,49 МБ | 6994 | 2.8 |
| 11 | Додзё | 1.14.2 | 53,0 КБ | 9,1 МБ | 6,5 МБ | 10607 | 2.3 |
| 12 | Морфеус | 0,7,2 | 2,7 КБ | 4 МБ | 2,97 МБ | 8543 | 2.1 |
| 13 | jQuery | 3.3.1 | 30,0 КБ | 25,14 МБ | 25,16 МБ | 7206 | 1.3 |
| 14 | Баджс | 1.0 | 1,2 КБ | 1,25 МБ | 0,91 МБ | - | 0,8 |
| 15 | Justanimate | 2.5.1 | 7,3 КБ | 109,5 МБ | 61,18 МБ | 5087 | 0,6 |
| 16 | Юи | 3.18.1 | 24,4 КБ | 159,59 МБ | 88,35 МБ | 2182 | 0,5 |
| 17 | Зепто | 1.2.0 | 11,0 КБ | 40,14 МБ | 18,49 МБ | - | 0,3 |
«Трансформации» (2000 -й отскочительные шарики)
| Классифицировать | Название библиотеки | Библиотечная версия | Обновления в секунду | Кадры в секунду |
| 1 | ТОЛСТЫЙ | 0,6,6 | 91960 | 46.1 |
| 2 | Tweenjs | 1.0.2 | 67931 | 33 |
| 3 | GSAP | 2.0.2 | 50337 | 26 |
| 4 | Анимея | 2.2.0 | 41040 | 21.6 |
| 5 | Html5 (waapi) | - | - | 16 |
| 6 | CSS3 (переход) | - | - | 15.5 |
| 7 | Зепто | 1.2.0 | - | 12.4 |
| 8 | Морфеус | 0,7,2 | 6665 | 3.3 |
| 9 | Баджс | 1.0 | - | 1 |
| 10 | Justanimate | 2.5.1 | 1218 | 0,3 |
| 11 | jQuery | 3.3.1 | 309 | 0,01 |
«Цвета» (2000 мигающих шариков)
| Классифицировать | Название библиотеки | Библиотечная версия | Обновления в секунду | Кадры в секунду |
| 1 | ТОЛСТЫЙ | 0,6,6 | 113950 | 57 |
| 2 | GSAP | 2.0.2 | 89665 | 42,65 |
| 3 | Tweenjs | 1.0.2 | 89499 | 42 |
| 4 | Скорость | 2.0.5 | 59617 | 31.25 |
| 5 | Html5 (waapi) | - | - | 26.5 |
| 6 | Anim.js | - | - | 23 |
| 7 | CSS3 (переход) | - | - | 20.6 |
| 8 | Юи | 3.18.1 | 84287 | 14.7 |
| 9 | Мутаол | 1.6.0 | 8123 | 13.3 |
| 10 | Додзё | 1.14.2 | 33004 | 11.1 |
| 11 | Анимея | 2.2.0 | 12483 | 6.3 |
| 12 | jQuery | 3.3.1 | 7002 | 4 |
| 13 | Морфеус | 0,7,2 | 3902 | 3.2 |
| 14 | Зепто | 1.2.0 | - | 2 |
| 15 | Justanimate | 2.5.1 | 4283 | 1 |
| 16 | Баджс | 1.0 | - | 0,7 |
Браузер: Chrome (рабочий стол), продолжительность теста: 30 с (среднее значение)
* Хип памяти: размер памяти, который требуется анимации для выполнения
** Распределение памяти: объем памяти, которая была выделена во время выполнения анимации
Сравнение библиотеки: эталон "Запрыгивающие мячи"
< html >
< head >
< script src =" fat.min.js " > </ script >
</ head >
...Примечание. Используйте fat.min.js для производства и fat.js для развития.
Используйте последний стабильный выпуск от CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js " > </ script >Используйте конкретную версию от CDN:
< script src =" https://cdn.jsdelivr.net/gh/nextapps-de/[email protected]/fat.min.js " > </ script >Обыкновенный JS
В ваш код включайте следующее:
var Fat = require ( "Fat" ) ;Амд
var Fat = require ( "./fat.min.js" ) ; Пространство имен «Fat» также является сценой по умолчанию (глобальная сцена).
Глобальные методы / методы сцены:
Методы управления:
| Вариант | Тип | По умолчанию | Описание |
| начинать | Логический | истинный | Включить/отключить автоматическое разрешение при выполнении анимационного вызова |
| кадр | Число | 60 | Кадры в секунду |
| Вариант | Тип | По умолчанию | Описание |
| продолжительность | Число | 400 | Продолжительность анимации (MS). |
| простота | Строка | Функция | "Линейный" | Выберите предварительно определенный метод смягчения или пропустите пользовательскую функцию смягчения. |
| задерживать | Число | 0 | Задержка анимации (MS). |
| перезвонить | Функция | нулевой | Функция, которая будет вызвана, когда анимация закончена. |
| шаг | Функция (прогресс, значение) | нулевой | Функция, которая должна быть вызвана на каждом тике (Прогресс: текущее состояние прогресса между 0 и 1, значение: текущее значение, включающее устройство, полезно при использовании пользовательских свойств). |
| петля | Число | 0 | Цикл последовательностей или ключевых кадров. Установите -1 для бесконечных петлей. |
| инициатор | Логический | ЛОЖЬ | Силы получают компьютерные стили при начале следующей петли анимации. Просто важно, когда Styles меняется в рамках обратного вызова анимации прямо перед тем, как начать новую анимацию в той же свойстве стиля (петля анимации). |
| сила | Логический | ЛОЖЬ | Силы стиля изменяются (равное ключевому слову CSS «! Важно»). |
| строгий | Логический | ЛОЖЬ | Не переопределяйте и сохраняйте различные анимации на свойствах стиля одного объекта. |
| двигатель | Нить | "JS" | Выберите один из 3 рендеринговых двигателей: « JS », « CSS », « родной ». |
Толстый. animate (selector [] | elements [], styles [] {}, options {}, обратный вызов)
Fat . animate ( "#mydiv" , { left : "100px" } , { /* options */ } ) ;Пропустите элемент, массив элементов или селектор запросов DOM.
Fat . animate ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// "this" refers to #mydiv
console . log ( this . style . left ) ;
}
} ) ;Смотрите все доступные варианты выше.
Пропустите пользовательские параметры для каждого свойства стиля:
Fat . animate ( "#mydiv" , {
left : {
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000 ,
ease : "linear"
} ,
top : {
from : 0 ,
to : "100%" ,
duration : 2000 ,
ease : "quadIn" ,
delay : 2000
}
} ) ;Передача параметра блока немного быстрее.
property: [from, to, unit] :
Fat . animate ( "#mydiv" , {
left : [ 0 , 100 , "%" ] , // from 0% to 100%
top : [ 0 , "100%" ] ,
} ) ;В качестве альтернативы передавать функцию обратного вызова в качестве последнего параметра:
Fat . animate ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 2000 ,
duration : 2000 ,
ease : "easeInOut"
} , function ( ) {
// done
} ) ; Fat . animate ( "#mydiv" , { top : "100px" } , function ( ) {
// done
} ) ; Fat . animate ( "#mydiv" , "slideInTop" , function ( ) {
// done
} ) ;Задержка анимации, пока не появится целевой элемент (например, прокрутка):
Fat . animate ( "#mydiv" , { top : "100px" } , { delay : "view" } ) ; Рассчитайте значения в зависимости от текущего состояния:
// current left + 100px
Fat . animate ( "#mydiv" , { left : "+=100px" } ) ; // double of current top
Fat . animate ( "#mydiv" , { top : "*=2" } ) ; // current left - 100px
Fat . animate ( "#mydiv" , { left : "-=100px" , } ) ; // half of current top
Fat . animate ( "#mydiv" , { top : "/=2" } ) ;Значения переключения в зависимости от текущего состояния:
// toggle current left (100% or 0%)
Fat . animate ( "#mydiv" , { left : "!=100%" } ) ; Отдельная нотация обеспечивает наилучшую производительность:
Fat . animate ( "#mydiv" , {
translateX : "100px" ,
translateY : "100px"
} ) ;то же самое, что и:
Fat . transform ( "#mydiv" , { ... } ) ;В качестве альтернативы:
Fat . animate ( "#mydiv" , {
"transform" : "translate(100px, 100px)"
} ) ;то же самое, что и:
Fat . transform ( "#mydiv" , "translate(100px, 100px)" ) ; Fat . animate ( "#mydiv" , {
color : "#f00" ,
backgroundColor : "rgba(0, 255, 0, 1)" ,
borderColor : "hsla(0, 100%, 100%, 1)"
} ) ;Отдельная нотация обеспечивает наилучшую производительность:
Fat . animate ( "#mydiv" , {
colorR : 0 ,
colorG : 0 ,
colorB : 0 ,
colorA : 0 ,
backgroundColorA : "100%" ,
borderColorB : 255
} ) ; Отдельная нотация обеспечивает наилучшую производительность:
Fat . animate ( "#mydiv" , {
brightness : 0.5 ,
contrast : 0.5 ,
hue : "180deg"
} ) ;Вы можете использовать Shorthand
hueв качествеhue-rotate
то же самое, что и:
Fat . filter ( "#mydiv" , { ... } ) ;В качестве альтернативы:
Fat . animate ( "#mydiv" , {
"filter" : "brightness(0.5) contrast(0.5) hue(180deg)"
} ) ;то же самое, что и:
Fat . filter ( "#mydiv" , "brightness(0.5) contrast(0.5) hue(180deg)" ) ; Встроенное ослабление:
Статическое (предварительно кэшированный) против динамического смягчения
Есть два способа определить функции смягчения. Когда ваше облегчение является статической кривой (например, extin, backinout, elastic и т. Д.), Вы должны определить смягчение с помощью Fat.ease["myEasing"] = fn() и просто передавать имя как строку внутри Fat.animate . Это будет предварительно переподтировать все расчеты, так что вы можете использовать действительно тяжелые определения смягчения без каких -либо недостатков производительности.
Если вы хотите использовать динамическое смягчение, что зависит от расчетов времени выполнения, вы должны передавать функцию смягчения непосредственно к Fat.animate вариантам. В этом случае расчет смягчения не будет предварительно поместить. Это позволяет программно контролировать смягчение и добавление логики во время выполнения.
Определите пользовательскую статическую функцию смягчения (1 параметра):
Fat . ease [ "linear" ] = function ( x ) {
return x ;
} ;X : текущий прогресс (0,0 - 1,0)
Определите пользовательскую статическую функцию смягчения (4 параметра):
Fat . ease [ "linear" ] = function ( t , b , c , d ) {
return b + ( c - b ) * ( t / d ) ;
} ;T : Текущее время, B : от значения, C : до значения, D : Продолжительность
Примените настраиваемое статическое смягчение:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;Используйте кубический петух:
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Рекомендуется обозначить оболочку массива для Безера:
... , { ease : [ 0 , 1 , 0 , 1 ] } ) ;Определите пользовательскую динамическую функцию смягчения (1 параметра):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( x ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ;Определите пользовательскую динамическую функцию смягчения (стиль 4 параметра):
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : function ( t , b , c , d ) {
// doing some crazy calculations depends on runtime
return x ;
} } ) ; Толстый. animate (custom_object [] {}, custom_property [] {}, options {})
Примечание. Вы не можете использовать более одного пользовательского свойства на анимацию на элементе HTML. Вместо этого при анимации пользовательских свойств объекта нет ограничений.
Просто добавьте свойство с именем "Custom":
Fat . animate ( "#mydiv" , {
custom : "50%"
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current ;
}
} ) ;Обрабатывать блок отдельно:
Fat . animate ( "#mydiv" , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
this . style . left = current + "%" ;
}
} ) ;Пройти в пользовательском объекте/функции как первый параметр вместо элемента:
Fat . animate ( {
obj : document . getElementById ( "mydiv" )
} , {
custom : 50
} , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
// "this" refers to the custom object
this . obj . style . left = current + "%" ;
}
} ) ;Вы также можете использовать последовательности:
... [ custom : 50 , custom : 0 , custom : 100 , custom : 0 ]Таким образом, можно передать пользовательские данные, логику и рендеринг через каждую работу анимации, например:
var handler = {
unit : "%" ,
obj : document . getElementById ( "mydiv" ) ,
set : function ( property , value ) {
this . obj . style [ property ] = value + this . unit ;
}
} ;
Fat . animate ( handler , { custom : 50 } , {
ease : "cubicInOut" ,
step : function ( progress , current ) {
// "this" refers to handler
this . set ( "left" , current ) ;
}
} ) ;Вы также можете использовать массив объектов/обработчиков:
Fat . animate ( [ handler1 , handler2 , handler3 ] , ...Если вам вообще не нужны значения от/к переходу, другой сценарий может быть:
function cubicInOut ( x ) {
return ( ( x *= 2 ) <= 1 ? x * x * x : ( x -= 2 ) * x * x + 2 ) / 2 ;
}
Fat . animate ( { ease : cubicInOut } , { custom : true } , {
step : function ( progress ) {
var current = this . ease ( progress ) ;
// console.log(current);
}
} ) ;В качестве альтернативы:
Fat . animate ( { } , { custom : true } , { step : function ( progress ) {
var current = cubicInOut ( progress ) ;
// console.log(current);
} } ) ;или:
Fat . animate ( { } , { custom : 1 } , {
ease : cubicInOut ,
step : function ( progress , current ) {
// console.log(current);
}
} ) ;Свойства настраиваемых объектов подростка:
function draw ( ) {
this . obj . style [ this . property ] = this . value ;
}
var custom = {
value : 0 ,
property : "left" ,
obj : document . getElementById ( "#mydiv" )
} ;
Fat . animate ( custom , { value : "50%" } , {
duration : 2000 ,
ease : "cubicInOut" ,
step : draw
} ) ; Fat . animate ( "#mydiv" , [
{ left : "100%" } , // 1st animation, 2000ms
{ top : "100%" } , // 2nd animation, 2000ms
{ left : 0 } , // 3rd animation, 2000ms
{ top : 0 } // 4th animation, 2000ms
] , {
callback : function ( ) { alert ( "Next Loop" ) } ,
delay : 2000 ,
loop : - 1 // infinite
} ) ;Используйте пользовательские параметры на свойство стиля:
Fat . animate ( "#mydiv" , [ {
left : { // 1st animation
from : 0 ,
to : 100 ,
unit : "%" ,
duration : 2000
}
} , {
top : { // 2nd animation
to : "100%" ,
duration : 2000 ,
ease : "easeInOut" ,
delay : 0
}
} ,
... Fat . animate ( "#mydiv" , {
"25%" : { left : "100%" } , // 0 -> 25%, 500ms
"50%" : { top : "100%" } , // 25 -> 50%, 500ms
"75%" : { left : 0 } , // 50 -> 75%, 500ms
"100%" : { top : 0 } // 75 -> 100%, 500ms
} , {
callback : function ( ) { alert ( "Next Loop" ) } ,
delay : 2000 ,
loop : - 1 // infinite
} ) ;Используйте пользовательские параметры на свойство стиля:
Fat . animate ( "#mydiv" , {
"0%" : {
left : {
to : "100%" ,
ease : "easeIn"
}
} ,
"100%" : {
top : {
to : "0%" ,
ease : "easeOut"
}
}
} ,
... Fat . animate ( "#mydiv" , "fadeOut" ) ;Объедините несколько пресетов (упорядочен):
Fat . animate ( "#mydiv" , "fadeOut zoomOut rollOutRight" ) ;Также можно использовать с последовательностями:
Fat . animate ( "#mydiv" , [ "slideInTop" , "zoomIn" ] ) ;Определите пользовательскую предустановку:
Fat . preset [ "fade-out-down" ] = {
opacity : 0 ,
translateY : "100%"
} ;Используйте пользовательскую предустановку:
Fat . animate ( "#mydiv" , "fade-out-down" ) ;Встроенные пресеты:
Получите глобальную сцену (по умолчанию):
var scene = Fat . animate ( element , { left : "100%" } ) ;Создайте новую сцену:
var scene = Fat . create ( ) ;Добавьте анимацию в сцену:
scene . animate ( element , { left : "100%" } ) ;Уничтожить сцену:
scene . destroy ( ) ;Полезный пример
Учитывая следующий пример:
var scene_1 = Fat . animate ( element_1 , { left : "100%" } ) ;
var scene_2 = Fat . animate ( element_2 , { left : "100%" } ) ;
var scene_3 = Fat . animate ( element_3 , { left : "100%" } ) ;
// this will also destroy scene_2 and scene_3:
scene_1 . destroy ( ) ;Все переменные указывают на ту же глобальную сцену, на которой «толстый» в основном основан.
Это правильный обходной путь:
var scene_1 = Fat . create ( ) . animate ( element_1 , { left : "100%" } ) ;
var scene_2 = Fat . create ( ) . animate ( element_2 , { left : "100%" } ) ;
var scene_3 = Fat . create ( ) . animate ( element_3 , { left : "100%" } ) ;
// this will just destroy scene_1:
scene_1 . destroy ( ) ;Не создавайте новые сцены, а также не создавайте их по умолчанию. Большое количество параллельных сцен приводит к недостатку производительности.
FAT внутренне указывает на глобальную сцену по умолчанию, поэтому вы можете соответствующим образом использовать все методы сцены на FAT .
Обновить единственный стиль:
scene . set ( "#mydiv" , "left" , "0%" ) ;Обновить несколько стилей:
scene . set ( "#mydiv" , { top : 0 , left : 0 } ) ;Удалить все анимации из объекта:
scene . remove ( "#mydiv" ) ;Удалите определенную анимацию из объекта:
scene . remove ( "#mydiv" , "left" ) ;Удалите список конкретных анимаций из объекта:
scene . remove ( "#mydiv" , [ "top" , "left" ] ) ;Сделайте паузу сцены:
scene . pause ( ) ;В качестве альтернативы:
scene . start ( false ) ;Сыграйте сцену:
scene . start ( ) ;В качестве альтернативы:
scene . pause ( false ) ;Вернуть воспроизведение (переключение):
scene . reverse ( ) ;В качестве альтернативы установить направление:
scene . reverse ( false ) ;Сбросить состояние воспроизведения и вернуться к началу:
scene . reset ( ) ;Закончить, а также выполнить обратный вызов:
scene . finish ( ) ;Установить скорость воспроизведения:
scene . speed ( 0.5 ) ; // half
scene . speed ( 1 ) ; // normal
scene . speed ( 2 ) ; // double
scene . speed ( - 2 ) ; // double (reversed direction)Искать сцену в определенную позицию:
scene . seek ( 0 ) ; // start
scene . seek ( 0.5 ) ; // middle
scene . seek ( 1 ) ; // endСдвиньте сцену относительно текущей позиции (на миллисекунд):
scene . shift ( 2000 ) ; // current + 2000 ms
scene . shift ( - 500 ) ; // current - 500 msПоследовательности цикла и обратное направление
Когда зацикливание последовательностей, а также обратно направлено направление анимации (например, установив скорость <0), вы должны пройти из-за декларационной пары для каждого стиля, в противном случае значение из-за того, что он теряется при обратном обратном направлении.
var scene = Fat . animate ( element , [ {
left : { from : "0%" , to : "50%" }
} , {
left : { from : "50%" , to : "0%" }
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;В качестве альтернативы используйте от сокращения от подсчета:
var scene = Fat . animate ( element , [ {
left : [ 0 , 50 , "%" ]
} , {
left : [ 50 , 0 , "%" ]
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ;В качестве альтернативы используйте относительно переключения:
var scene = Fat . animate ( element , [ {
left : "!=50%"
} , {
left : "!=0%"
} ] , {
loop : - 1
} ) ;
scene . reverse ( ) ; Прокрутите документ/элемент в определенную позицию (вертикально):
Fat . animate ( element , { scrollTop : 500 } ) ;Прокрутите горизонтально:
Fat . animate ( element , { scrollLeft : 500 } ) ; Прокрутите в обоих направлениях scroll: [x, y] :
Fat . animate ( element , { scroll : [ 500 , 500 ] } ) ;Используйте относительные значения:
Fat . animate ( element , { scroll : "+=50" } ) ; Запланируйте задачу для выполнения во время следующей анимационной кадры:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} ) ;Запланируйте задачу с задержкой и сохраните идентификатор краски:
var id = Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
} , 2000 ) ;Удалите вышеуказанное запланированное задание из очереди:
Fat . cancel ( id ) ;Целью задачи с каждой анимационной кадрой:
Fat . paint ( function ( time ) {
console . log ( "Now: " + time ) ;
return true ;
} ) ;Просто вернитесь , чтобы сохранить петлю живым. Вернуть ложь или не вернуть ничего, чтобы сломать петлю.
Учитывая следующий пример:
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // this style change will be shadowed
Fat . animate ( this , { top : "100%" } ) ;
} ) ;Это называется Animation Loop, обратный вызов создает новую анимацию на том же свойстве стиля объектов. Технически обратный вызов выполняется во время последнего кадра первой анимации. Таким образом, в этом свойстве все еще есть анимация и будет унаследовать следующую анимационную цикл.
Во время обратного вызова, внешние изменения в том же свойстве стиля, которое будет анимировано, будут затенены на наследство анимации.
Когда изменение стиля не произошло снаружи (например, другим инструментом) используйте метод SET , чтобы получить наилучшую производительность:
Fat . animate ( element , { top : "100%" } , function ( ) {
Fat . set ( this , "top" , 0 ) . animate ( this , { top : "100%" } ) ;
} ) ;В противном случае, чтобы решить эту ситуацию, вы должны добавить опцию Init :
Fat . animate ( element , { top : "100%" } , function ( ) {
this . style . top = 0 ; // external change somewhere happens
Fat . animate ( this , { top : "100%" } , { init : true } ) ;
} ) ;Опять же, эта проблема возникает только при использовании петлей анимации, смешанных с изменениями ручного стиля на том же свойстве стиля во время обратного вызова прямо перед тем, как будет вызван новой цикл анимации.
Учитывая следующий пример:
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 2000 } , function ( ) {
console . log ( "long" ) ;
} ) ;
// next animation will override the above one:
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 400 } , function ( ) {
console . log ( "short" ) ;
} ) ;Когда вы выполняете разные анимации на одних и тех же свойствах объектного стиля, чтобы работать параллельно, существует проблема параллелизма. По умолчанию анимация DUPE наследует старую, поэтому старой анимации больше не существует. Соответственно, с примером сверху консоли просто регистрирует «короткие».
Чтобы заставить обманутые анимации, вы должны добавить строгий вариант:
// this animation cannot be overridden:
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 2000 , strict : true } , function ( ) {
console . log ( "long" ) ;
} ) ;
Fat . animate ( "#mydiv" , { top : "100%" } , { duration : 400 } , function ( ) {
console . log ( "short" ) ;
} ) ;Теперь консоль регистрирует «короткие» после 400 мс и «долго» после 2000 мс. Хотя одинаковые свойства не могут иметь два разных значения, поэтому всегда самая ранняя начальная анимация на самом деле приоритет.
Учитывая следующий пример:
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;Объявление в стиле CSS сверху имеет ключевое слово ! Важно и предотвращает нормальные изменения в стиле.
Чтобы решить это, вы должны добавить вариант силы :
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; Это экспериментальная особенность. Все двигатели автономны, вы можете сделать индивидуальную сборку только с вашим любимым выбором.
| Двигатель | младший | CSS | родной |
| Рендерер | JavaScript (по умолчанию) | CSS переход | Веб -анимация API |
Используйте переходы CSS:
Fat . transition ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ;Используйте API веб -анимации:
Fat . native ( "#mydiv" , {
left : "100px" ,
top : "100px"
} , {
delay : 1000 ,
duration : 2000 ,
ease : "easeInOut" ,
callback : function ( ) {
// done
console . log ( this . style . left ) ;
}
} ) ; Не используйте отладку в производственных сборках.
Если у вас возникнут проблемы, вы можете временно установить флаг отладки на True в верхней части fat.js :
DEBUG = true ;Это позволяет регистрировать консоли нескольких процессов. Просто откройте консоль браузеров, чтобы сделать эту информацию видимой.
Не используйте Profiler в производственных сборках.
Чтобы собрать некоторую статистику производительности ваших сцен, необходимо временно установить флаг Profiler на True поверх fat.js :
PROFILER = true ;Это позволяет профилировать несколько процессов.
Массив всех профилей доступен:
window . stats ;Вы также можете просто открыть консоли браузеров и ввести эту линию, чтобы получить статистику.
Индекс массива соответствует сцене .
Получите статистику из конкретной сцены:
scene . stats ;Полезная нагрузка статистики разделена на несколько категорий. Каждая из этих категорий предоставляет свои собственные статистические значения.
Профилирующие статистические свойства
| Свойство | Описание |
| время | Сумма времени (мс), которую занимает процесс (лучше) лучше) |
| считать | Как часто назывался процесс |
| Опс | Средние операции в секунду (выше) лучше) |
| нано | Средняя стоимость (нс) на операцию/вызов (ниже) лучше) |
Вам нужен node.js, включая диспетчер пакетов узлов (NPM)
Установить зависимости:
npm installПолная сборка:
npm run buildСветовая сборка:
npm run build-lightКомпактная сборка:
npm run build-compactПользовательская сборка:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueНа пользовательских сборках каждый флаг сборки будет установлен на False по умолчанию.
В качестве альтернативы (пользовательская сборка):
node compile support_control=trueПользовательская сборка будет сохранена в fat.custom.xxxxx.js («xxxxx» - это хэш, основанный на флагах использованных сборки).
Поддерживаемые флаги сборки
| Флаг | Ценности |
| Support_color | Правда, ложь |
| Support_control | Правда, ложь |
| Поддержка_ последовательность | Правда, ложь |
| Support_transform | Правда, ложь |
| Support_filter | Правда, ложь |
| Support_scroll | Правда, ложь |
| Support_paint | Правда, ложь |
| Support_relative | Правда, ложь |
| Support_concurrency | Правда, ложь |
| Support_easing | Правда, ложь |
| Support_preset | Правда, ложь |
| Support_Engine | Строка: "Все", "JS", "CSS", "Native" / "waapi" |
| Support_animate | Верно, false (переопределяет поддержку_ингин) |
| Support_transition | Верно, false (переопределяет поддержку_ингин) |
| Support_native | Верно, false (переопределяет поддержку_ингин) |
Флаги языка | |
| Ranguage_out | Ecmascript3 Ecmascript5 Ecmascript5_strict Ecmascript6 Ecmascript6_strict Ecmascript_2015 Ecmascript_2017 СТАБИЛЬНЫЙ |
Copyright 2019 NextApps GmbH
Выпущено по лицензии Apache 2.0
