통용 되 는 등 속 운동 프레임 워 크 만 들 기(실례 설명)
1.여러 물체 의 운동 을 지원 한다.
2,동시에 운동
3,순서 운동
이 세 가지 운동 방식 도 jquery 에서 animate 함수 가 지원 합 니 다.
1.animate 함수 에서 서로 다른 스타일 을 어떻게 구분 합 니까?
위 글 에서 사 이 드 바 효과 에 사용 되 는 animate 함수 가 left 값 으로 바 뀌 었 습 니 다.
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);
}
페이드아웃 효과 에 사용 되 는 animate 함수 가 투명 도 를 바 꿉 니 다.
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);
}
한편,우리 가 포장 한 함수 가 통용 되 려 면 먼저 직면 하 는 문 제 는 바로 이 함수 가 left 값 과 투명도 의 변 화 를 동시에 지원 해 야 한 다 는 것 이다.더욱 통용 되 는 방법 은 모든 스타일 변 화 를 지원 해 야 한다.예 를 들 어 윤 방 기능,그 는 좌우 미끄럼 도 있 고 상하 미끄럼 도 있다.우 리 는 스타일 을 가 져 오고 스타일 을 바 꿀 때 판단 을 하면 됩 니 다.판단 은 2 가지 로 나 누 면 목적 을 달성 할 수 있 습 니 다.다른 스타일(margin,left,top,right,font-size 등)은 모두 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);
}
합 친 animate 는 이전 보다 매개 변수 attr 가 하나 더 생 겼 습 니 다.이 매개 변 수 는 변 화 된 스타일 입 니 다.obj:변 화 된 대상,target:스타일 이 변화 해 야 할 목표 값 입 니 다.speed:스타일 이 매번 변화 하 는 크기 입 니 다.예:
oImg.onmouseover = function () {
animate(this, 'opacity', 100, 10);
}
oImg 은 가 져 온 그림 대상 입 니 다.여기 서 매개 변 수 는 다음 과 같 습 니 다.this:현재 그림 대상
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 div {
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, 'opacity', 100, 10);
}
oImg.onmouseout = function () {
animate(this, 'opacity', 30, -10);
}
oBox.onmouseover = function () {
animate(this, 'left', 0, 10);
}
oBox.onmouseout = function () {
animate(this, 'left', -150, -10);
}
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);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<div id="box">
<div> </div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
상술 한 것 이 바로 완전한 코드 실례 이다.당신 이 이 두 가지 기능 을 각각 테스트 할 때:
그림 으로 이동 해서 빼 주세요.
공유 로 이동 하고 이동 합 니 다.
이렇게 하 는 것 은 문제 가 없다.
만약 당신 이 이렇게 테스트 한다 면:
공유 로 이동 한 후 빠르게 그림 으로 이동 합 니 다.이 럴 때 공유 가 멈 췄 다 는 것 을 알 게 될 것 입 니 다.이것 은 논리 에 맞지 않 습 니 다!이치 상 마 우 스 를 그림 으로 이동 시 키 는 것 은'공 유 된'mouseout(마우스 이동 이벤트)을 촉발 하 는 것 과 같 습 니 다.그러면'공 유 된'이 럴 때 숨 기 는 것 은 멈 추 는 것 이 아 닙 니 다.왜 이러 지?이 두 운동 은 하나의 타 이 머 를 공 유 했 기 때문에 마우스 가 그림 으로 이동 하여 타 이 머 를 켰 을 때'공유'타 이 머 를 멈 추 었 다.그러면 여러 물체 운동 을 할 때 우 리 는 타 이 머 를 나 누 어야 한다.모든 대상 에 타이머 가 있어 야 하 는데 어떻게 해 야 합 니까?매우 간단 합 니 다.간단 한 timer 변 수 를 정의 하지 마 십시오.우 리 는 timer 를 obj 대상 에 추가 하면 모든 대상 이 timer 속성 을 가지 고 타이머 의 분리 효 과 를 얻 을 수 있 습 니 다.
수 정 된 전체 코드 는 다음 과 같 습 니 다.스스로 펼 치 십시오.
<!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 div {
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, 'opacity', 100, 10);
}
oImg.onmouseout = function () {
animate(this, 'opacity', 30, -10);
}
oBox.onmouseover = function () {
animate(this, 'left', 0, 10);
}
oBox.onmouseout = function () {
animate(this, 'left', -150, -10);
}
function animate(obj, attr, target, speed) {
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function () {
if (attr == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, attr));
}
if (cur == target) {
clearInterval(obj.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);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<div id="box">
<div> </div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
이로써 우 리 는 다 물체 운동 과 서로 다른 양식의 수정 을 완성 하 였 다2.animate 함수 가 여러 스타일 을 지원 하 는 동시에 변경 합 니 다.
예 를 들 면:
oBox.onmouseover = function(){
animate( this, { "width" : 500, "height" : 400 }, 10 );
}
oBox 는 div 요소 이 고 animate 각 매개 변수 라 는 뜻 입 니 다.this:현재 div 요소
{width:500,"height":400}:너 비 를 500 으로,높이 를 400 으로,이 두 스타일 은 같은 시간 에 완성 해 야 합 니 다.
10:스타일 이 원래 의 기초 위 에서 10 씩 변 합 니 다(예 를 들 어 width 초기 값 200-->210,220,230...)
완전한 동시 운동 변화 코드:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
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 == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur == target) {
clearInterval(obj.timer);
} else {
if (key == 'opacity') {
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>
<div id="box"></div>
</body>
</html>
이 코드 를 스스로 펼 쳐 보 세 요.이 코드 는 동시에 운동 할 수 있 지만 문제 가 있 습 니 다.div 의 초기 너비 와 높이(width:200,height:200)
변화 보폭 같다(10)
변화 시간 이 같다(30 밀리초 마다 한 번 씩 변 한다)
대상(width:500,height:400)
뭐 공부 해요?두 사람 은 같은 라인 에서 속도 가 같 고 시간 이 같 지만 동시에 다른 목표 에 도달 해 야 한다.하 나 는 500,하 나 는 400)
답 은 분명 하 다.목표 가 가 까 운 것(height:400)이 먼저 도착 한 다음 에 대상 의 타 이 머 를 끄 고 다른 목표 가 더 먼 것(width:500)은 도착 하지 못 할 것 이다.
이 코드 아래 에서 현재 값 과 목표 값 을 출력 할 수 있 습 니 다:
var target = attr[key];
console.log( key, cur, target );
진 결 과 는:위의 그림 에서 알 수 있 듯 이 height 는 이미 400 px 에 이 르 렀 지만 width 는 410 px 에 멈 추 었 습 니 다.왜 400 px 가 아 닙 니까?width=400 일 때(cur==500)는(400==500)성립 되 지 않 기 때문에 else 문 구 를 실 행 했 습 니 다.width=cur+10=400+10=410,그리고 height 가 400 px 에 도달 하여 타 이 머 를 멈 추 었 기 때문에 width 는 410 px 에 멈 추 었 습 니 다.
그럼 우 리 는 이 문 제 를 어떻게 해결 합 니까?
사실 하기 도 쉽 습 니 다.바로 height=400 일 때 타 이 머 를 끄 지 마 세 요.width=500 일 때 타 이 머 를 닫 아야 합 니 다.같은 시간 에 동시에 목표 에 도달 하 는 효 과 를 완성 하지 않 았 습 니까?
수 정 된 코드 는 다음 과 같 습 니 다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
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 == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
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>
<div id="box"></div>
</body>
</html>
변 수 를 설명 합 니 다.매번 한 번 씩(width,height)스타일 이 바 뀌 면 bFlag=true 입 니 다.for 순환 에서 목표 에 도달 하지 못 한 것 이 있 으 면 bFlag 의 값 은 false 입 니 다.그러면 타 이 머 를 닫 지 않 습 니 다.둘 다 목표 에 도달 해서 야 타 이 머 를 닫 습 니 다.3.순서 운동
만약 스타일 이 변 한다 면 순서대로 하 는 것 은 동시에 변화 하 는 것 이 아니다.예 를 들 어:
oBox.onmouseover = function(){
// :
animate( this, { 'width' : 500 }, 10, function(){
animate( this, { 'height' : 500 }, 10 );
} );
}
width 를 500 px 로 바 꿀 때 반전 함 수 를 전달 한 다음 에 반전 함수 안의 운동 을 수행 합 니 다.수 정 된 전체 코드:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> - by ghostwu</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
oBox.onmouseover = function(){
// :
animate( this, { 'width' : 500 }, 10, function(){
animate( this, { 'height' : 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 == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
var target = attr[key];
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
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>
<div id="box"></div>
</body>
</html>
이상 의 이 편 은 통용 되 는 등 속 운동 틀(실례 설명)을 만 드 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
패 키 징 운동 프레임 워 크 실전 좌우 와 상하 로 미 끄 러 지 는 초점 윤 방 도(인 스 턴 스)완충 운동 은 보통 두 가지 흔히 볼 수 있 는 표현 이 있다.예 를 들 어 하나의 div 를 0 운동 에서 500 까지 하 게 하 는 것 이다.하 나 는 사건 이 발생 할 때 속도 가 매우 빠 르 고 하 나 는 사...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.