fat
v0.6.8
원시 애니메이션 속도와 관련하여 지방은 모든 단일 웹 애니메이션 라이브러리보다 성능이 우수하며 장면, 시퀀스, 변환, 색칠, 제어 및 완화와 같은 유연한 애니메이션 기능을 제공합니다.
설치 안내서 • API 참조 • 예제 • 사용자 정의 빌드 • 벤치 마크 순위
최신 정보 (안정적인 릴리스) :
| 짓다 | 파일 | cdn |
| 지방 .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 | 맞춤형 빌드 |
모든 기능 :
| 특징 | 지방 .min.js | fat.compact.js | Fat.light.js |
| 생기 | 엑스 | 엑스 | 엑스 |
| 장면 (그룹) | 엑스 | 엑스 | 엑스 |
| 완화 컬렉션 (Custom Bezier) | 엑스 | 엑스 | - |
| 제어 (타임 라인) | 엑스 | - | - |
| 시퀀스 | 엑스 | - | - |
| 키 프레임 | 엑스 | - | - |
| 사전 설정 (효과) | 엑스 | - | - |
| 변환 (2d/3d) | 엑스 | 엑스 | - |
| 필터 | 엑스 | - | - |
| 그림 물감 | 엑스 | 엑스 | - |
| 사용자 정의 속성/렌더러 | 엑스 | 엑스 | 엑스 |
| 상대적 값 | 엑스 | - | - |
| 스크롤 | 엑스 | - | - |
| 페인트 | 엑스 | - | - |
| 동시성 (엄격한 모드) | 엑스 | - | - |
| 렌더링 엔진 | JS, CSS3, WAAPI | JS | JS |
| 파일 크기 (GZIP) | 7.0 KB | 4.5 KB | 1.9 KB |
플래그 디버그 및 프로파일 러는 비 생산 사용을 위해 Fat.js 에서도 제공됩니다.
또한 사용자 정의 빌드를 만드는 것은 매우 간단합니다.
도서관 비교 : 벤치 마크 "튀는 공"
"애니메이션"(2000 튀는 공)
| 계급 | 도서관 이름 | 도서관 버전 | 라이브러리 크기 | 메모리 힙 * | 메모리 할당 ** | 초당 업데이트 | 초당 프레임 |
| 1 | 지방 | 0.6.6 | 1.9 KB | 0.85MB | 0.15MB | 103954 | 51.5 |
| 2 | GSAP | 2.0.2 | 25.8 KB | 28.32 MB | 8.1 MB | 87249 | 43.1 |
| 3 | 트윈 JS | 1.0.2 | 8.3 KB | 3.16 MB | 3.1 MB | 69647 | 34.4 |
| 4 | HTML5 (WAAPI) | - | - | 0.91 MB | 0.75MB | - | 32.2 |
| 5 | Tinyanimate | 0.4.0 | 1.5 KB | 1.93 MB | 1.98MB | 28801 | 29 |
| 6 | mootools | 1.6.0 | 31.2 KB | 3.14 MB | 3.42 MB | 26919 | 25.2 |
| 7 | CSS3 (전환) | - | - | 0 MB | 0 MB | - | 22.3 |
| 8 | 속도 | 2.0.5 | 16.6 KB | 8.33 MB | 7.98 MB | 16820 | 6.3 |
| 9 | 애니메이션 | 2.2.0 | 5.9 KB | 7.14 MB | 8.2 MB | 9877 | 2.8 |
| 10 | anim.js | - | 1.9 KB | 7.08 MB | 9.49 MB | 6994 | 2.8 |
| 11 | 도조 | 1.14.2 | 53.0 KB | 9.1 MB | 6.5MB | 10607 | 2.3 |
| 12 | 모르페우스 | 0.7.2 | 2.7 KB | 4 MB | 2.97 MB | 8543 | 2.1 |
| 13 | jQuery | 3.3.1 | 30.0 KB | 25.14 MB | 25.16 MB | 7206 | 1.3 |
| 14 | Bajs | 1.0 | 1.2 KB | 1.25MB | 0.91 MB | - | 0.8 |
| 15 | Justanimate | 2.5.1 | 7.3 KB | 109.5MB | 61.18 MB | 5087 | 0.6 |
| 16 | 유아 | 3.18.1 | 24.4 KB | 159.59 MB | 88.35 MB | 2182 | 0.5 |
| 17 | 제프토 | 1.2.0 | 11.0 KB | 40.14 MB | 18.49 MB | - | 0.3 |
"변환"(2000 튀는 공)
| 계급 | 도서관 이름 | 도서관 버전 | 초당 업데이트 | 초당 프레임 |
| 1 | 지방 | 0.6.6 | 91960 | 46.1 |
| 2 | 트윈 JS | 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 | Bajs | 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 | 트윈 JS | 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 | mootools | 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 | Bajs | 1.0 | - | 0.7 |
브라우저 : 크롬 (데스크탑), 테스트 기간 : 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" ) ;AMD
var Fat = require ( "./fat.min.js" ) ; 네임 스페이스 "Fat"도 기본 장면 (글로벌 장면)입니다.
글로벌 방법 / 장면 방법 :
제어 방법 :
| 옵션 | 유형 | 기본 | 설명 |
| 시작 | 부울 | 진실 | 애니메이션 호출이 수행되면 자동 재생을 활성화/비활성화합니다 |
| fps | 숫자 | 60 | 초당 프레임 |
| 옵션 | 유형 | 기본 | 설명 |
| 지속 | 숫자 | 400 | 애니메이션 (MS)의 지속 시간. |
| 쉬움 | 문자열 | 기능 | "선의" | 사전 정의 된 완화 방법을 선택하거나 사용자 정의 완화 기능을 전달하십시오. |
| 지연 | 숫자 | 0 | 애니메이션 지연 (MS). |
| 콜백 | 기능 | 널 | 애니메이션이 완료 될 때 호출 할 기능. |
| 단계 | 기능 (진행, 가치) | 널 | 각 진드기에서 호출되는 함수 (진행 상황 : 0과 1 사이의 현재 진행 상태, 값 : 장치를 포함한 현재 값, 사용자 정의 속성을 사용할 때 유용함). |
| 고리 | 숫자 | 0 | 루프 시퀀스 또는 키 프레임 수. 무한 루프의 경우 -1 로 설정하십시오. |
| 이니 | 부울 | 거짓 | 다음 애니메이션 루프를 시작할 때 계산 된 스타일을 강요합니다. 스타일이 같은 스타일의 속성 (애니메이션 루프)에서 새 애니메이션을 시작하기 직전에 애니메이션 콜백 내에서 변경 될 때 중요합니다. |
| 힘 | 부울 | 거짓 | 힘 스타일이 변경됩니다 (CSS 키워드와 동일합니다. "! 중요"). |
| 엄격한 | 부울 | 거짓 | 동일한 객체의 스타일 속성에 대해 다른 애니메이션을 비난하고 유지하지 마십시오. |
| 엔진 | 끈 | "JS" | " JS ", " CSS ", " Native "라는 3 개의 렌더 엔진 중 하나를 선택하십시오. |
지방. animate (selector [] | elements [], Styles [] {}, 옵션 {}, 콜백)
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"
} ) ;속기
huehue-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)" ) ; 내장 완화 :
정적 (사전 준비) 대 동적 완화
완화 함수를 정의하는 두 가지 방법이 있습니다. 완화가 정적 곡선 인 경우 (EaseIn, 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 : value, d : duration
맞춤형 정적 완화를 적용하십시오.
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "linear" } ) ;입방 베 지어 사용 :
Fat . animate ( "#mydiv" , { left : "100px" } , { ease : "cubic(0, 1, 0, 1)" } ) ;Bezier에 대한 속기 배열 표기법이 권장됩니다.
... , { 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 [] {}, 옵션 {})
참고 : 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 ] , ...From/To Transition 값이 전혀 필요하지 않으면 또 다른 시나리오가 다음과 같습니다.
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 ( ) ;새로운 장면을 대량으로 만들지 말고 기본적으로이를 생성하지 마십시오. 많은 양의 병렬 장면으로 인해 성능 단점이 발생합니다.
지방은 내부적으로 기본 글로벌 장면을 가리므로 지방 에서 모든 장면 방법을 사용할 수 있습니다.
단일 스타일 업데이트 :
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)이 각 스타일에 대해 From-to-to Declaration 쌍을 전달해야합니다. 그렇지 않으면 역방향 방향에서 반복되면 FROM 값이 손실됩니다.
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 ) ;
} ) ;지연으로 작업을 예약하고 페인트 ID를 유지하십시오.
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%" } ) ;
} ) ;이것을 애니메이션 루프라고하며 콜백은 동일한 객체 스타일 속성에 새 애니메이션을 만듭니다. 기술적으로 콜백은 첫 번째 애니메이션의 마지막 프레임에서 실행됩니다. 따라서 여전히이 부동산에 애니메이션을 실행하고 있으며 다음 애니메이션 루프에 의해 상속됩니다.
콜백 중에는 애니메이션이 될 동일한 스타일 속성의 외부 변경이 애니메이션 루프 상속에 의해 섀도 잉됩니다.
스타일 변경이 외부에서 발생하지 않았을 때 (예 : 다른 도구로) 세트 방법을 사용하여 최상의 성능을 얻습니다.
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 Animation은 이전 애니메이션을 상속 받으므로 이전 애니메이션이 더 이상 존재하지 않습니다. 따라서 위의 콘솔의 예에 따라 "Short"로그를 기록합니다.
Duped Animations를 강제하려면 엄격한 옵션을 추가해야합니다.
// 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" ) ;
} ) ;이제 콘솔은 400ms 이후에 "짧은"로그인하고 2000ms 후에 "긴"로그인합니다. 동일한 속성에 두 가지 다른 값이 없지만 항상 가장 초기에 시작된 애니메이션은 실제로 우선 순위가 지정됩니다.
다음 예를 고려하십시오.
# mydiv { top : 0 px !important } Fat . animate ( "#mydiv" , { top : "100%" } ) ;위의 CSS 스타일 선언에는 키워드가 중요하며 정상적인 스타일 변경을 방지하고 있습니다.
이를 해결하려면 힘 옵션을 추가해야합니다.
Fat . animate ( "#mydiv" , { top : "100%" } , { force : true } ) ; 이것들은 실험적인 기능입니다. 모든 엔진은 독립형이며 좋아하는 선택만으로 사용자 정의 빌드를 만들 수 있습니다.
| 엔진 | JS | CSS | 토종의 |
| 렌더러 | 자바 스크립트 (기본값) | 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 ) ;
}
} ) ; 생산 빌드에서 디버그를 사용하지 마십시오.
문제가 발생하면 Fat.js 위에서 디버그 플래그를 True 로 임시로 설정할 수 있습니다.
DEBUG = true ;이를 통해 여러 프로세스의 콘솔 로깅이 가능합니다. 브라우저 콘솔을 열면이 정보가 보이도록하십시오.
생산 빌드에서 프로파일 러를 사용하지 마십시오.
장면의 성능 통계를 수집하려면 Fat.js : Profiler 플래그를 True 로 임시로 설정해야합니다.
PROFILER = true ;이를 통해 여러 프로세스의 프로파일 링이 가능합니다.
모든 프로파일 배열은 다음과 같습니다.
window . stats ;브라우저 콘솔을 열고이 라인을 입력하여 통계를 얻을 수도 있습니다.
배열의 인덱스는 장면 에 해당합니다.
특정 장면에서 통계를 얻으십시오.
scene . stats ;반환 통계 페이로드는 여러 범주로 나뉩니다. 이러한 각 범주는 자체 통계 값을 제공합니다.
프로파일 러 통계 속성
| 재산 | 설명 |
| 시간 | 프로세스가 취하는 시간 (MS)의 합계 (낮은 점) |
| 세다 | 프로세스가 얼마나 자주 호출되었는지 |
| OPS | 초당 평균 작업 (높음이 높음) |
| 나노 | 작업/통화 당 평균 비용 (NS) (낮은 점) |
노드 패키지 관리자 (NPM)를 포함하여 Node.js가 필요합니다.
종속성 설치 :
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_Sequence | 사실, 거짓 |
| support_transform | 사실, 거짓 |
| support_filter | 사실, 거짓 |
| support_scroll | 사실, 거짓 |
| support_paint | 사실, 거짓 |
| support_relarive | 사실, 거짓 |
| support_concurrency | 사실, 거짓 |
| support_easing | 사실, 거짓 |
| support_preset | 사실, 거짓 |
| support_engine | 문자열 : "All", "JS", "CSS", "Native" / "Waapi" |
| support_animate | true, false (support_Engine 재정 |
| support_transition | true, false (support_Engine 재정 |
| support_native | true, false (support_Engine 재정 |
언어 아웃 깃발 | |
| Language_out | ecmascript3 ecmascript5 ecmascript5_strict ecmascript6 ecmascript6_strict ECMAScript_2015 ECMAScript_2017 안정적인 |
Copyright 2019 NextApps Gmbh
Apache 2.0 라이센스에 따라 출시되었습니다
