JS를 활용한 등가속도, 등감속 동작 구현을 위한 코드 공유

巴扎黑
풀어 주다: 2017-09-05 09:45:16
원래의
2206명이 탐색했습니다.

이 글은 JS에서 균일한 가속과 균일한 감속을 구현하는 방법을 주로 소개하며, 페이지 요소 스타일을 동적으로 조작하기 위해 시간 함수와 수학적 연산을 결합한 자바스크립트의 관련 구현 기술을 포함합니다.

이 글을 참조하세요. 균일 가속 및 균일 감속 방법의 예를 통해 JS 구현을 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:


/*
 * 动画帧函数
 *
 * */
  var requestFrame=function(){
  var prefixList=['webkit','moz','ms'];
  var func;
  for(var i=0;i<prefixList.length;i++){
    func=window[prefixList[i]+"RequestAnimationFrame"];
    if(func){
      return function(callback){
        func(callback);
      }
    }
  }
  return function(callback){
    setTimeout(callback,67);
  }
}();
/*
 * 匀加速运动
 *
 * */
function animate_easeIn(element,from,to,duration,callback){
  var time=+new Date;
  var distance=to-from;
  var a=2*distance/(duration*duration); //加速度a=2x/t^2(包含方向)
    var func=function(){
    var time2,offsetDis,durTime;
    time2=+new Date;
    durTime=time2-time; //运动的时间间隔
    offsetDis=Math.ceil(a*durTime*durTime/2);//X=a*t^2/2
        if(duration<durTime){
      element.css(&#39;left&#39;,to+&#39;px&#39;);
      callback();
    }else{
      element.css(&#39;left&#39;,from+offsetDis+&#39;px&#39;);
      requestFrame(func);
    }
  }
  func();
}
/*
 * 匀减速运动
 *
 * */
function animate_easeOut(element,from,to,duration,callback){
  var time=+new Date;
  var distance=Math.abs(to-from);
  var a=2*distance/(duration*duration); //x=a*t^2/2 求出加速度
  var v0=Math.sqrt(distance*2*a); // 根据公式:2as=v^2求出初速度
    var func=function(){
    var time2,offsetDis,durTime,pos;
    time2=+new Date;
    durTime=time2-time;
    offsetDis=Math.ceil(v0*durTime-a*durTime*durTime/2); //根据s=v0*t+1/2*a*t^2求出位移x
    if(duration<durTime){
      element.css(&#39;left&#39;,to+&#39;px&#39;);
      callback();
    }else{
      pos=from>to? from-offsetDis : from+offsetDis;
      element.css(&#39;left&#39;,pos+&#39;px&#39;);
      requestFrame(func);
    }
    }
    func();
}
로그인 후 복사

위 내용은 JS를 활용한 등가속도, 등감속 동작 구현을 위한 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿