이번에는 JS 모션 버퍼링 효과의 캡슐화 기능을 사용하는 방법을 보여드리겠습니다. JS 모션 버퍼링 효과의 캡슐화 기능을 사용할 때 주의사항은 무엇인가요?
저는 모션 함수를 많이 작성했는데 나중에 이를 캡슐화하는 방법을 찾았습니다. (모션 버퍼링).
/* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ function bufferMove(obj, oTarget, fn,ratio = 8) { clearInterval(obj.iTimer); obj.iTimer = setInterval(function () { // 此处设定开关bBtn,假设所有的属性均已运动完毕true var bBtn = true; for(var sAttr in oTarget){ // 获取当前值,此处兼容透明度的变化 if(sAttr === 'opacity') { var iCur = parseFloat(getStyle(obj, sAttr) * 100); } else { var iCur = parseInt(getStyle(obj, sAttr)); } // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等 var iSpeed = (oTarget[sAttr] - iCur) / ratio; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 计算下一次的值 var iNext = iCur + iSpeed; // 赋值给对应样式 if(sAttr ==='opacity') { obj.style.opacity = iNext / 100; obj.style.filter = 'alpha(opacity=' + iNext +')'; } else { obj.style[sAttr] = iNext + 'px'; } // 清除定时器,当前的位置和终点值是否相等,相等则说明结束 if(iNext !== oTarget[sAttr]) { bBtn = false; } } // 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn() if(bBtn) { clearInterval(obj.iTimer); if(fn){ fn(); } } }, 50); }
위의 캡슐화된 함수는 다음과 같이 단일 속성 및 다중 스타일 동작에도 사용할 수 있습니다.
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
그렇습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
WeChat 애플릿의 순환 진행률 표시줄을 만드는 방법
위 내용은 JS 모션 버퍼 효과의 캡슐화 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!