简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  범용 균일 모션 프레임워크를 만드는 방법

범용 균일 모션 프레임워크를 만드는 방법

小云云
小云云원래의
2018-01-15 14:19:181151검색

이 글은 주로 범용 균일 모션 프레임워크 생성에 대한 글을 제공합니다(예제 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

이 글은 균일한 동작(사이드바, 페이드 인 및 아웃)을 기반으로 한 예제에 대한 설명의 연속입니다. 계속해서 이 글의 마지막 부분에서 2개의 작은 예를 만들었습니다: 투명도 변경을 위한 사이드바 및 페이드 인 및 아웃 효과, 이 기사에서는 위의 애니메이션 기능을 더욱 다양하고 강력하게 만들기 위해 계속해서 변환합니다.

1, 여러 개체의 움직임 지원

2, 동시에 이동

3. 순차 이동

이 세 가지 이동 방법은 jquery

1의 애니메이션 기능에서도 지원됩니다.

위에서 사이드바 효과에 사용된 애니메이트 함수는 왼쪽 값을 변경합니다


function animate(obj, target, speed) {
 clearInterval(timer);
 timer = setInterval(function () {
 if (obj.offsetLeft == target) {
  clearInterval(timer);
 } else {
  obj.style.left = obj.offsetLeft + speed + 'px';
 }
 }, 30);
}

페이드인 및 페이드아웃 효과에 사용된 애니메이트 함수는 투명도를 변경합니다


function animate(obj, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   cur = css( obj, 'opacity') * 100;
   if( cur == target ){
   clearInterval( timer );
   }else {
   cur += speed;
   obj.style.opacity = cur / 100;
   obj.style.filter = "alpha(opacity:" + cur + ")";
   }
  }, 30);
  }

그리고 우리가 캡슐화해야 하는 함수가 보편화되려면 이 함수가 왼쪽 값과 투명도의 변경을 동시에 지원해야 한다는 것입니다. 보다 일반적인 접근 방식은 캐러셀 함수와 같은 모든 스타일 변경을 지원해야 한다는 것입니다. 좌우 슬라이딩과 상하 슬라이딩이 있습니다.

다른 스타일(여백, 왼쪽, 위쪽, 오른쪽, 글꼴 크기 등)은 스타일을 가져오고 스타일을 변경할 때 판단하면 됩니다. 모두 px이고 투명도를 위한 px 단위가 없습니다


function animate(obj, attr, target, speed) {
 clearInterval(timer);
 var cur = 0;
 timer = setInterval(function () {
 if (attr == 'opacity') {
  cur = css(obj, 'opacity') * 100;
 } else {
  cur = parseInt(css(obj, attr));
 }

 if (cur == target) {
  clearInterval(timer);
 } else {
  if (attr == 'opacity') {
  obj.style.opacity = ( cur + speed ) / 100;
  obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
  } else {
  obj.style[attr] = cur + speed + "px";
  }
 }
 }, 30);
}

병합된 애니메이션에는 이전보다 매개변수 attr이 하나 더 있습니다. 이 매개변수는 변경된 스타일, obj: 변경된 개체, target: 스타일이 적용되는 대상 값입니다. speed: 각 스타일 변경의 크기

예: 


oImg.onmouseover = function () {
　　animate(this, 'opacity', 100, 10);
}

oImg는 여기서 얻은 이미지 객체입니다.

this: 현재 이미지 object

opacity: 변경된 스타일은 투명도입니다.

100: 그림 위에 마우스를 올리면 투명도가 100이 됩니다

10: 원래 값을 기준으로 매번 투명도가 10


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>合并的运动 - by ghostwu</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box p {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box"),
  timer = null;

  oImg.onmouseover = function () {
  animate(this, &#39;opacity&#39;, 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, &#39;opacity&#39;, 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, &#39;left&#39;, 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, &#39;left&#39;, -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   if (attr == &#39;opacity&#39;) {
   cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(timer);
   } else {
   if (attr == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box">
 <p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

씩 증가합니다. 위는 전체 코드 예제입니다.

이 두 기능을 별도로 테스트할 때:

사진으로 이동한 다음 나가기

공유로 이동한 다음 나가기

문제 없습니다

이렇게 테스트하면:

공유로 이동 , 그런 다음 빠르게 사진으로 이동합니다. 이때 공유가 중지된 것을 알 수 있습니다. 이는 논리적이지 않습니다. 논리적으로 말하면 마우스를 사진으로 이동하는 것은 "공유 대상"(마우스 아웃)을 트리거하는 것과 같습니다. 이벤트), 이때 '공유 대상'은 중지되는 것이 아니라 숨겨져야 합니다. 왜 이런 일이 발생합니까? 이 두 스포츠는 타이머를 공유하기 때문에 마우스가 사진 위로 이동하고 타이머가 켜지면 "공유 대상" 타이머가 중지됩니다. 따라서 다중 객체 모션을 수행하려면 타이머를 분할해야 합니다. 각 객체에는 타이머가 있어야 합니다. 매우 간단합니다. 간단한 타이머 변수를 정의하지 마세요. 그러면 각 객체에 타이머 속성이 있어 수정 후의 전체 코드는 다음과 같습니다. , 직접 해보세요 확장: 

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box p {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box");

  oImg.onmouseover = function () {
  animate(this, &#39;opacity&#39;, 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, &#39;opacity&#39;, 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, &#39;left&#39;, 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, &#39;left&#39;, -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   if (attr == &#39;opacity&#39;) {
   cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(obj.timer);
   } else {
   if (attr == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box">
 <p>分享到</p>
</p>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

이 시점에서 다중 객체 모션 및 다양한 스타일의 수정이 완료되었습니다

두 번째, 애니메이션 기능이 동시에 변경되는 여러 스타일을 지원하도록 하세요 예: 

oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}

oBox animate의 각 매개변수의 의미:

this: 현재 p 요소

{width : 500, "height" : 400 } : 너비를 변경합니다. 이 두 스타일은 동일해야 합니다. 완료 시간,

10: 스타일은 원래 기준으로 매번 10씩 변경됩니다(예: 너비 200-->210, 220의 초기 값) , 230....)

동시 모션 변경 코드 완료: 

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 p {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
//  animate( this, { "width" : 500, "height" : 500 }, 10 );
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   for ( var key in attr ) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur == target) {
    clearInterval(obj.timer);
   } else {
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <p id="box"></p>
</body>
</html>

이 코드를 직접 확장해 보세요. 이 코드는 동시에 이동할 수 있지만 문제가 있습니다.

의 초기 너비와 높이입니다. p(폭:200, 높이:200)

변경 단계 크기는 동일(10)

변경 시간은 동일합니다(30밀리초마다 변경)

대상(폭:500, 높이:400)

Can 무슨 문제라도 있는 것 같아? (두 사람이 같은 출발선에 있고 같은 속도, 같은 시간에 있지만 동시에 다른 목표에 도달해야 합니다. 한 사람은 500이고 다른 한 사람은 400입니다.)

답은 뻔합니다. 가장 가까운 목표(높이: 400)가 있는 사람이 먼저 도달한 다음 개체의 타이머를 끄면 더 멀리 있는 다른 목표(너비: 500)는 확실히 도달하지 못할 것입니다

현재를 출력할 수 있습니다. 이 코드 아래의 값과 대상 값:

var target = attr[key];
console.log( key, cur, target );

Output 결과는 다음과 같습니다.

从上图可以看出，height已经达到了400px，但是width停在了410px,为什么不是400px ? 因为width = 400的时候， 就是( cur == 500 ) 相当于( 400 == 500 ) 不成立，所以执行了else语句，width = cur + 10 = 400 + 10 = 410，然后height到达400px停止了定时器，所以width停在了410px.

那么我们怎么解决这个问题呢？

其实也好办，就是height = 400的时候 不要把定时器关了，应该等width = 500的时候再关闭定时器，不就在同一时间，完成了同时到达目标的效果吗？

修改后的代码如下：


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 p {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for ( var key in attr ) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
   if ( bFlag ) {
   clearInterval( obj.timer );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <p id="box"></p>
</body>
</html>

声明一个变量，每次变化完一次( width, height )样式 把bFlag = true， 只要在for循环中有一个没有到达目标，bFlag的值都是false，这样就不会关闭定时器。当两个都到达目标，才关闭定时器.

三、顺序运动

如样式变化，按顺序来，不是同时变化， 如：


oBox.onmouseover = function(){
//回调函数： 把函数当做参数传递给另一个函数
　　animate( this, { &#39;width&#39; : 500 }, 10, function(){
　　　　animate( this, { &#39;height&#39; : 500 }, 10 );
　　} );
}

当把width变成500px的时候，如果传递了回调函数， 再接着执行回调函数里面的运动

修改后的完整代码：


<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>通用的匀速运动框架 - by ghostwu</title>
 <style>
 p {
  width: 200px;
  height: 200px;
  background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  //回调函数： 把函数当做参数传递给另一个函数
  animate( this, { &#39;width&#39; : 500 }, 10, function(){
   animate( this, { &#39;height&#39; : 500 }, 10 );
  } );
  }

  function animate(obj, attr, speed, fn ) {

  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for (var key in attr) {
   if (key == &#39;opacity&#39;) {
    cur = css(obj, &#39;opacity&#39;) * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == &#39;opacity&#39;) {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }

   if (bFlag) {
   clearInterval(obj.timer);
   fn && fn.call( obj );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<p id="box"></p>
</body>
</html>

相关推荐：

基于js匀速运动的实例讲解

用js指定步长实现单方向匀速运动

浅谈Javascript如何实现匀速运动_javascript技巧

위 내용은 범용 균일 모션 프레임워크를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.다음 기사：js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.

관련 기사

더보기