JS动画效果_技术笔记

xiaowan321 2019-08-20

var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
缓冲动画

截图
0赞 · 0采集
xiaowan321 2019-08-20

Math.floor() 向下取整；
Math.ceil() 向上取整；

截图
0赞 · 0采集
little慕慕 2019-08-08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = (dis - oDiv.offsetLeft)/20;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>

0赞 · 0采集
qq_心安有个你_0 2019-07-27

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetLeft==target){
clearIntral(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

0赞 · 0采集
甜橙可爱多 2019-04-22

Math.floor(num)向下取整
Math.ceil(num)向上取整
0.5向上取整为1，向下取整为0
-0.5向上取整为0，向下取整为-1

0赞 · 0采集
慕函数6103035 2018-11-09

offsetLeft会越来越大，与目标差值越来越下，speed越来越小。

0赞 · 0采集
阿君 2018-10-30

老师这个例子很好。用剩余路程的改变来作为变化速度的改变。很好的解法。学习了，将来类似的情况就用这个解法。

截图
0赞 · 0采集
是个啰嗦的人 2018-10-04

https://github.com/cbat01/js-Animation-effect
做运动时要做向上与向下取整
speed = speed >0? Math.ceil(speed):Math.floor(speed);

0赞 · 0采集
ParseDark 2018-08-26
1. 缓冲运动的关键在于，速度随当前状态与目标状态之间的差值呈线性关系，但是速度并不是线性的，而是一个曲线（类比火车停靠，火车启动）
2. 对于在JS内修改了CSS的数值，一定要对数值进行一个处理（CSS的属性value不支持小数点）。
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
0赞 · 0采集
慕粉2308425049 2018-07-17

Math.floor(num);向下取整
Math.ceil(num);向上取整
var speed = (iTarget-ele.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);//凡是运动，要添加向下向上取整，以防出现错误
ele.style.left = ele.offsetLeft + speed + 'px';

0赞 · 1采集
刀不磨要生锈 2018-04-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部变量，只在此函数内有效
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解决“speed”的叠加问题
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合条件运动停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

3赞 · 3采集
GYNexus 2018-03-23
var timer = null; function startMove(iTarget) { clearInterval(timer); timer = setInterval(function(){ var speed = 0; var oDiv = document.getElementById("oDiv"); speed = (iTarget-oDiv.offsetLeft)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft!=iTarget){ oDiv.style.left = oDiv.offsetLeft + speed +"px"; } },30) } window.onload = function() { var oDiv = document.getElementById("oDiv"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function () { startMove(-200); } }
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//速度如果没有取整，会导致无法到达目标，一则占用资源
0赞 · 0采集
Rolla 2018-03-06

speed=speed>0?Math.ceil(speed):Math.floor(speed);

0赞 · 0采集
Yeah___ 2017-12-01

math.ceil向下取整达到0,math.floor向上取整

0赞 · 0采集
T002967 2017-11-10

运动动画需要做Math.ceil和Math.floor取整

0赞 · 0采集
小白_0001 2017-11-05

speed=speed>0?Math.ceil(speed):Math.floor(speed);

0赞 · 0采集
慕仙5237505 2017-11-01

xia:<script type="text/javascript"> window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(0); } odiv.onmouseout=function(){ move(-200); } } var timer=null; function move(target){ clearInterval(timer); odiv=document.getElementById("div1"); timer = setInterval(function(){ var speed=(target-odiv.offsetLeft)/20; //缓冲运动 speed = speed>0?Math.ceil(speed):Math.floor(speed); //运行结束时是小数，进行取值判断 if(odiv.offsetLeft==target){ clearInterval(timer); }else{ odiv.style.left =odiv.offsetLeft + speed+"px"; //变大 } },30) } </script> <body> <div id="div1"><span id="share">分享</span></div> </body> </html>

截图
0赞 · 0采集
慕仙5237505 2017-11-01

3ke :<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>缓冲运动</title> </head> <style type="text/css"> body{padding:0; margin:0;} #div1{ width:200px; height:200px; background:#f00; position:relative; top:0; left:-200px; } #div1 span{ width:20px; height:70px; background:#0f0; position:absolute; top:75px; left:200px; } </style> <script type="text/javascript"> window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(0); } odiv.onmouseout=function(){ move(-200); } } var timer=null;

截图
0赞 · 0采集
慕仙5237505 2017-10-31

不匀速运动

截图
0赞 · 0采集
慕仙5237505 2017-10-31

不匀速运动

截图
0赞 · 0采集
别动我的猫 2017-10-15

缓冲： var speed=( - )/20 speed=speed>0?Math.ceil(speed):Math.floor(speed); 速度为正向上取整，速度为负向下取整原因：由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。

0赞 · 0采集
IT深水坑 2017-10-12

js速度动画讲的是定时器的作用，相同函数可以合并成一个函数的方法，优化、改进函数的方法，阻止定时器反复递归的方法。js透明度动画是继速度动画后增加了一个浏览器兼容的方法。缓冲动画的重点在于目标值-当前值后除以一个系数，运动变匀速为缓冲，缓冲目的达到。但是任何除法算式之后可能会产生小数，所以还需要对速度进行判断，为正Math.ceil(x)，为负Math.floor(x)三元判断式。speed > 0 ? Math.ceil(speed ) : Math.floor(speed )

0赞 · 0采集
qq_Workmachine_0 2017-08-22

变速运动

截图
0赞 · 0采集
qq_与陌Dance_0 2017-08-17

<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer); var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { speed=(target-oDiv.offsetLeft)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft == target) clearInterval(timer); else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>

0赞 · 1采集
qq_与陌Dance_0 2017-08-17

缓冲运动中：向上取整Math.ceil(),向下取整Math.floor() 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此时speed速度为0.75。而浏览器是不允许出现小数的，会把0.75去掉，那么就速度为0 不动了。那么div的left就变成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。所以向右移动速度为正就将变成小数的速度向上取整为1 向左移动速度为负就将变成负小数的速度向下取整取整原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，当速度大于0的时候，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。所以要用Math.ceil向上取整。同理，当速度<0时，要用Math.ceil()取整。

0赞 · 1采集
碎碎念o_o4253196 2017-08-16

// 设置timer var moveFlag = null; /** * 定义移动函数 * moveTarget 移动的目标位置 * moveObject 需要移动的对象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移动速度等于目标减去实时的位移，放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //从负数到0向上取整，从0到负数向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移动操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }

0赞 · 0采集
abc芳 2017-07-23

缓冲运动中：向上取整Math.ceil(),向下取整Math.floor() 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此时speed速度为0.75。而浏览器是不允许出现小数的，会把0.75去掉，那么就速度为0 不动了。那么div的left就变成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。所以向右移动速度为正就将变成小数的速度向上取整为1 向左移动速度为负就将变成负小数的速度向下取整取整原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，当速度大于0的时候，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。所以要用Math.ceil向上取整。同理，当速度<0时，要用Math.ceil()取整。

2赞 · 0采集
OSerLiong 2017-06-16

// 设置timer var moveFlag = null; /** * 定义移动函数 * moveTarget 移动的目标位置 * moveObject 需要移动的对象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移动速度等于目标减去实时的位移，放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //从负数到0向上取整，从0到负数向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移动操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }

1赞 · 2采集
听风吹牛 2017-06-03

缓冲运动中：向上取整Math.ceil(),向下取整Math.floor() 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此时speed速度为0.75。而浏览器是不允许出现小数的，会把0.75去掉，那么就速度为0 不动了。那么div的left就变成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。所以向右移动速度为正就将变成小数的速度向上取整为1 向左移动速度为负就将变成负小数的速度向下取整取整原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，当速度大于0的时候，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。所以要用Math.ceil向上取整。同理，当速度<0时，要用Math.ceil()取整。

0赞 · 0采集
白小九 2017-05-10

JS运动一定要记得判断一下speed，防止出现小数点

截图
0赞 · 0采集

数据加载中...