이전 스포크 JS 애니메이션 타이머 지식, 기능, 인기 애니메이션 라이브러리를 완화 도입이 하나.
친숙한 그림
실제 사용
애니메이션 jQuery를 () + jquery.easing 플러그 사용 :
$(selector).animate(styles,speed,easing,callback)기본 JS를 사용
Zhangxin 쑤의 동급생 기사
여유 함수 지식
완화 기능은 무엇입니까? 나의 이해는 애니메이션 함수 매개 변수 및 수학 공식이 결합 된 것입니다.
easeInQuad에 예를 함수 라이브러리 완화 순환 대조로서도 :
easingFn.easingQuadraticIn = function (t) { return t*t; };분석 결과의 비교
기본 수식은 2의 거듭 제곱은 동일하다
완화 기능 플랫폼에 관계없이 지지부의 독립적이다;
반응 공정 및 애니메이션 값의 변화량 사이의 대응 기능을 완화 구체적로서 다음과 같다 :
GSAP 용이성 줄 예 , 각 추가 그리드 애니메이션 프로세스의 변화량은 효과가 빠르고 느린 내지 증가 된 양의 값을 증가시키는 것이다.
다음과 같이 타이머와 함께 할 것도, 특정 코드의 진화는 없다 :
왼쪽에 의한 이차 알고리즘, 그것을 보여마다 1/5에 해당하는 증가를 처리하지만, 변화의 양이 증가하고, 시위의 권리, 그 타이밍 있지만, (열 번에 다섯 구현 "체크"에서 감소 간격 배) 변화하지만, 경향의 변화량 변화의 대응 량은 동일하고, 동일한 같은 점진적인 프로세스이다.
애니메이션 도서관
할 애니메이션 라이브러리는 기본 네 점 모양이다 : 2, 패키지 변수 처리의 다양한 특성, (3) 공정 제어 1 타이머 (4), 기능 완화.
실제 응용 프로그램이 여전히 간단한 소스에서 읽을 찾을 수있을 때 학습 물론, 자신을 통합 할 수있는 비즈니스 요구를 충족하지 않습니다, 애니메이션 라이브러리를 사용하는 것이 좋습니다, 깊이있는 애니메이션 라이브러리의 특성 이해, 자신의 핵심 기능을 작성하려고, 나는 항목을 추천합니다 Kute.js .
애니메이션 라이브러리 추천 (자신의 강점과 약점과의 차이 다음에 세부 사항)
JQuery와 애니메이션 (플러그 jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js