JavaScript 애니메이션 개체는 가속, 감속, 감속, 감속 구현 code_javascript 기술을 지원합니다.

통화 인터페이스:

코드 복사 코드는 다음과 같습니다.

/**
* @param elem {HTMLElement} 애니메이션을 실행하는 HTML 요소
* @param params {JSON} 애니메이션 실행 중 수정해야 하는 HTML 속성
* @param 기간 {Number} 선택, 애니메이션 실행 시간 , 밀리초 단위
* @param easing {String} 선택 사항, 애니메이션 실행 방법, EaseIn, Ease Out EaseOut
* @param callback {Function} 선택 사항, 애니메이션 실행 완료 시 콜백 함수
* @ 반품
*/
effect.animate(elem, params, Duration, easing, callback)

이를 사용하면 제품의 페이드 아웃 속도를 늦추고 페이드 인 속도를 높이는 전환 효과를 만들 수 있습니다. 20줄 미만의 코드로 구성된 이미지 시연 효과

코드 복사 다음과 같습니다:

//보조 객체, DOM 요소 속성 읽기/쓰기
var attribute = {
get: function(elem, attr){
var val; >if(elem.currentStyle){
if(attr == = "불투명도") {
val = elem.filters.alpha[attr];
}else {
val = elem.currentStyle [attr];
}
}
else {
val = getComputeStyle(elem)[attr]
if(attr === "opacity") {
val = 100 * val;
}
}
return val ;
},
set: function(elem, attr, val){
if(attr=='opacity'){
elem.style.filter = 'alpha(opacity=' (val ) ')';
elem.style.opacity = (val)/100;
else{
elem. style[attr] = val 'px';
}
}
}
/*
* 설명: 트윈 애니메이션 알고리즘.
* @param Number t: 애니메이션이 실행된 시간(실제로 실행된 횟수/프레임)
* @param Number b: 시작 위치
* @param Number c: 종료 위치
* @param 숫자 d: 시작 위치에서 종료 위치까지 경과 시간(실제로 실행된 횟수/프레임 수)
*/
var tween = {
//Ease in
easyIn: 함수 (t, b, c, d){
return c * (t/=d) * t b
},
//ease Out
easeOut: 함수(t, b ,c,d){
return -c * (t/=d) * (t-2) b
}
}
//애니메이션 객체
var 효과 = {
애니메이션: 함수(요소, 매개변수, 기간, 완화, 콜백){
var dt = new Date().getTime(),
b = 0,
c = 0,
d = 기간 || 500,
fps = 1000/60;
varchanges = []
for(var attr in params){
b =parseFloat(attribute.get(elem, attr ));
c = params[attr] - b;
changes.push({
attr: attr,
b: b,
c: c
});
}
easing = easing || "easeOut";
callback = 콜백 || new 함수
setTimeout(function(){
var t = new Date().getTime() - dt;
var b, c, attr;
for(var i=0; ib = 변경사항[i].b
c; [ i].c;
attr = 변경[i].attr;
attribute.set(elem, attr, tween[easing](t, b, c, d)); < ;= t){
attribute.set(elem, attr, params[attr])
callback()
return;
}
setTimeout(arguments. 수신자 , fps)
}, fps)
}
}//by rentj1@163.com