communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > javascript 45种缓动效果非常酷_javascript技巧

javascript 45种缓动效果非常酷_javascript技巧

WBOY

Libérer： 2016-05-16 18:05:18

original

1152 Les gens l'ont consulté

参数	类型	说明
el	element	必需，为页面元素
begin	number	必需，开始的位置
change	number	必需，要移动的距离
duration	number	可选，缓动效果持续时间，默认是500ms。建议取300~1000ms。
field	string	必需，要发生变化的样式属性。请在top，left，bottom,right，width与height中选择。
ftp	number	可选，每秒进行多少帧动画，默认50帧，保证流畅播放。一些参考资料，日本动画1秒36帧，中国卡通24帧，赛车游戏60帧。
ease	function	必需，缓动公式，参数为0~1之间的数。可参考我下面给出的45条公式。
onStart	function	可选，在开始时执行。
onEnd	function	可选，在结束时执行。

prototype流派的缓动公式，只需一个参数（增至45种）

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=8"> 
<style type="text/css"> 
.taxiway{ 
width:800px; 
height:100px; 
background:#E8E8FF; 
} 
.move{ 
width:100px; 
height:100px; 
background:#a9ea00; 
} 
#panel { 
float:left; 
width:810px 
} 
#panel div{ 
float:left; 
width:88px; 
border:1px solid #333; 
height:20px; 
font-size:11px; 
} 
div.transition { 
margin-top: 30px; 
width: 200px; 
height: 200px; 
position: relative; 
margin-bottom:10px; 
} 
div.transition div { 
position: absolute; 
height: 1px; 
width: 1px; 
background: #000; 
} 
div.transition span { 
display: block; 
position: absolute; 
border-bottom: 1px solid #dadada; 
font-size: 10px; 
color: #888; 
width: 200px; 
left: 0px; 
} 
div.transition div#indicator { 
position:absolute; 
background-color:#a9ea00; 
height: 200px; 
top: 0px; 
left: 0px; 
} 
div.transition div#marker { 
background-color: #f00; 
height: 6px; 
width: 6px; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
left: 0px; 
margin-bottom: -3px; 
margin-left: -3px; 
} 
div.transition div#label { 
background: transparent; 
color: #ABD474; 
font-size: 20px; 
height: 20px; 
width: 200px; 
text-align: center; 
top: 80px; 
left: 0px; 
z-index: -1; 
} 
</style> 
<script type="text/javascript"> 
var getCoords = function(el){ 
var box = el.getBoundingClientRect(), 
doc = el.ownerDocument, 
body = doc.body, 
html = doc.documentElement, 
clientTop = html.clientTop || body.clientTop || 0, 
clientLeft = html.clientLeft || body.clientLeft || 0, 
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop, 
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft 
return { 'top': top, 'left': left }; 
}; 
var getStyle = function(el, style){ 
if(!+"\v1"){ 
style = style.replace(/\-(\w)/g, function(all, letter){ 
return letter.toUpperCase(); 
}); 
var value = el.currentStyle[style]; 
(value == "auto")&&(value = "0px" ); 
return value; 
}else{ 
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 
} 
} 
var tween = { 
easeInQuad: function(pos){ 
return Math.pow(pos, 2); 
}, 
easeOutQuad: function(pos){ 
return -(Math.pow((pos-1), 2) -1); 
}, 
easeInOutQuad: function(pos){ 
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); 
return -0.5 * ((pos-=2)*pos - 2); 
}, 
easeInCubic: function(pos){ 
return Math.pow(pos, 3); 
}, 
easeOutCubic: function(pos){ 
return (Math.pow((pos-1), 3) +1); 
}, 
easeInOutCubic: function(pos){ 
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); 
return 0.5 * (Math.pow((pos-2),3) + 2); 
}, 
easeInQuart: function(pos){ 
return Math.pow(pos, 4); 
}, 
easeOutQuart: function(pos){ 
return -(Math.pow((pos-1), 4) -1) 
}, 
easeInOutQuart: function(pos){ 
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); 
return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); 
}, 
easeInQuint: function(pos){ 
return Math.pow(pos, 5); 
}, 
easeOutQuint: function(pos){ 
return (Math.pow((pos-1), 5) +1); 
}, 
easeInOutQuint: function(pos){ 
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); 
return 0.5 * (Math.pow((pos-2),5) + 2); 
}, 
easeInSine: function(pos){ 
return -Math.cos(pos * (Math.PI/2)) + 1; 
}, 
easeOutSine: function(pos){ 
return Math.sin(pos * (Math.PI/2)); 
}, 
easeInOutSine: function(pos){ 
return (-.5 * (Math.cos(Math.PI*pos) -1)); 
}, 
easeInExpo: function(pos){ 
return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); 
}, 
easeOutExpo: function(pos){ 
return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; 
}, 
easeInOutExpo: function(pos){ 
if(pos==0) return 0; 
if(pos==1) return 1; 
if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); 
return 0.5 * (-Math.pow(2, -10 * --pos) + 2); 
}, 
easeInCirc: function(pos){ 
return -(Math.sqrt(1 - (pos*pos)) - 1); 
}, 
easeOutCirc: function(pos){ 
return Math.sqrt(1 - Math.pow((pos-1), 2)) 
}, 
easeInOutCirc: function(pos){ 
if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); 
return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); 
}, 
easeOutBounce: function(pos){ 
if ((pos) < (1/2.75)) { 
return (7.5625*pos*pos); 
} else if (pos < (2/2.75)) { 
return (7.5625*(pos-=(1.5/2.75))*pos + .75); 
} else if (pos < (2.5/2.75)) { 
return (7.5625*(pos-=(2.25/2.75))*pos + .9375); 
} else { 
return (7.5625*(pos-=(2.625/2.75))*pos + .984375); 
} 
}, 
easeInBack: function(pos){ 
var s = 1.70158; 
return (pos)*pos*((s+1)*pos - s); 
}, 
easeOutBack: function(pos){ 
var s = 1.70158; 
return (pos=pos-1)*pos*((s+1)*pos + s) + 1; 
}, 
easeInOutBack: function(pos){ 
var s = 1.70158; 
if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); 
return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); 
}, 
elastic: function(pos) { 
return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; 
}, 
swingFromTo: function(pos) { 
var s = 1.70158; 
return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 
0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2); 
}, 
swingFrom: function(pos) { 
var s = 1.70158; 
return pos*pos*((s+1)*pos - s); 
}, 
swingTo: function(pos) { 
var s = 1.70158; 
return (pos-=1)*pos*((s+1)*pos + s) + 1; 
}, 
bounce: function(pos) { 
if (pos < (1/2.75)) { 
return (7.5625*pos*pos); 
} else if (pos < (2/2.75)) { 
return (7.5625*(pos-=(1.5/2.75))*pos + .75); 
} else if (pos < (2.5/2.75)) { 
return (7.5625*(pos-=(2.25/2.75))*pos + .9375); 
} else { 
return (7.5625*(pos-=(2.625/2.75))*pos + .984375); 
} 
}, 
bouncePast: function(pos) { 
if (pos < (1/2.75)) { 
return (7.5625*pos*pos); 
} else if (pos < (2/2.75)) { 
return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); 
} else if (pos < (2.5/2.75)) { 
return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); 
} else { 
return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); 
} 
}, 
easeFromTo: function(pos) { 
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); 
return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); 
}, 
easeFrom: function(pos) { 
return Math.pow(pos,4); 
}, 
easeTo: function(pos) { 
return Math.pow(pos,0.25); 
}, 
linear: function(pos) { 
return pos 
}, 
sinusoidal: function(pos) { 
return (-Math.cos(pos*Math.PI)/2) + 0.5; 
}, 
reverse: function(pos) { 
return 1 - pos; 
}, 
mirror: function(pos, transition) { 
transition = transition || tween.sinusoidal; 
if(pos<0.5) 
return transition(pos*2); 
else 
return transition(1-(pos-0.5)*2); 
}, 
flicker: function(pos) { 
var pos = pos + (Math.random()-0.5)/5; 
return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos); 
}, 
wobble: function(pos) { 
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; 
}, 
pulse: function(pos, pulses) { 
return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; 
}, 
blink: function(pos, blinks) { 
return Math.round(pos*(blinks||5)) % 2; 
}, 
spring: function(pos) { 
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); 
}, 
none: function(pos){ 
return 0 
}, 
full: function(pos){ 
return 1 
} 
} 
var _ = function(id){ 
return document.getElementById(id); 
} 
var transition = function(el){ 
el.style.position = "absolute"; 
var options = arguments[1] || {}, 
begin = options.begin,//开始位置 
change = options.change,//变化量 
duration = options.duration || 500,//缓动效果持续时间 
field = options.field,//必须指定，基本上对top,left,width,height这个属性进行设置 
ftp = options.ftp || 50, 
onEnd = options.onEnd || function(){}, 
ease = options.ease,//要使用的缓动公式 
end = begin + change,//结束位置 
startTime = new Date().getTime();//开始执行的时间 
(function(){ 
setTimeout(function(){ 
var newTime = new Date().getTime(),//当前帧开始的时间 
timestamp = newTime - startTime,//逝去时间 
delta = ease(timestamp / duration); 
el.style[field] = Math.ceil(begin + delta * change) + "px" 
if(duration <= timestamp){ 
el.style[field] = end + "px"; 
onEnd(); 
}else{ 
setTimeout(arguments.callee,1000/ftp); 
} 
},1000/ftp) 
})() 
} 
if (typeof Array.prototype['max'] == 'undefined') { 
Array.prototype.map = function(fn, thisObj) { 
var scope = thisObj || window; 
var a = []; 
for ( var i=0, j=this.length; i < j; ++i ) { 
a.push(fn.call(scope, this[i], i, this)); 
} 
return a; 
}; 
Array.prototype.max = function(){ 
return Math.max.apply({},this) 
} 
Array.prototype.min = function(){ 
return Math.min.apply({},this) 
} 
} 
var range = function(start,end){ 
var _range = [] 
for(var i = start,l=end-start;i<l;i++){ 
_range.push(i) 
} 
return _range 
} 
var draw = function(ease){ 
var demo = _("transition"); 
demo.innerHTML = "";//还原！ 
//***********绘制控制台******************** 
var values = range(0,200).map(function(v){ 
return tween[ease](v/200) * 200; 
}), 
max = Math.max(200, values.max()), 
min = Math.min(0, values.min()); 
if (min==max) { 
min = 0; 
max = 200; 
} 
var factor = 200/(max-min), 
grid = '<span style="bottom:'+Math.round((0-min)*factor)+'px">0'+ 
'<span style="bottom:'+Math.round((200-min)*factor)+'px">1', 
graph = range(0,200).map(function(v){ 
return '<div style="left:'+v+'px;bottom:'+Math.round((values[v]-min)*factor)+'px;height:1px"></script>

'; }).join('') + '

'; demo.innerHTML = grid + graph; var indicator = _("indicator"), marker = _("marker"), label = _("label"), demoTransition = function(pos){ var value = tween[ease](pos); indicator.style.display = "block"; marker.style.display = "block"; marker.style.left = Math.round(pos*200)+'px'; marker.style.bottom = Math.round((value*200-min)*factor)+'px'; label.innerHTML = Math.round(pos*200)+'px'; return value; } transition(indicator,{field:"left",begin:parseFloat(getCoords(demo).left),change:200, ease:demoTransition}) } window.onload = function(){ var panelHTML = function(){ var builder = []; var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' '); var ease = _temp.map(function(v){ return 'easeIn'+v; }); ease = ease.concat(_temp.map(function(v){ return 'easeOut'+v; })); ease = ease.concat(_temp.map(function(v){ return 'easeInOut'+v; })); ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' ')); ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' ')) for(var i =0,l=ease.length;i"); builder.push(ease[i]); builder.push(""); } return builder.join(''); } var panel = document.createElement("div"); panel.id = "panel" panel.innerHTML = panelHTML(); _("transition").parentNode.insertBefore(panel,_("transition").nextSibling); } 缓动BY司徒正美

请点击下表的格子

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Étiquettes associées：

缓动效果

source：php.cn

Article précédent：jQuery 对Select的操作备忘记录_jquery Article suivant：javascript开发技术大全第4章直接量与字符集_基础知识

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...

Depuis 2024-04-06 21:58:04

0

1

800

Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...

Depuis 2024-04-06 20:05:30

0

1

544

Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...

Depuis 2024-04-06 17:12:23

0

1

336

La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...

Depuis 2024-04-06 16:54:10

0

1

410

Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...

Depuis 2024-04-06 16:29:50

0

2

490

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal