原生js小球动画代码（原生js小球动画代码大全）

本篇文章给大家谈谈原生js小球动画代码，以及原生js小球动画代码大全对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js实现匀速下落动画怎么实现
• 2、如何用js使小球来回弹动
• 3、如何使用javascript实现小球是沿着操场跑道轨迹运动
• 4、js动画效果代码方法
• 5、使用js画小球沿直线运动

js实现匀速下落动画怎么实现

/*

data:2022-11-17

author:lfp

move运动函数

dom--需要运动的对象

json--{width:100,height:100,left:100,top:100}

callback--回调函数 可调用自己 实现异步动画效果

*/

//主函数

function move(dom,json,callback){

//让每一次动画都是新的开始，防止出现动画一直不停的运行

if(dom.timer)clearInterval(dom.timer);

var i=0;

var start=0;

//在对象中增加timer 便于控制他停止

dom.timer=setInterval(function(){

i++;

//循环每一个目标属性添加动画方法

for(var attr in json){

//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替

var cur=getStyle(dom,attr);

if(i==1)start=cur;

//拿到该属性的目标值

var target=json[attr];

//设置分成10次增加增量 你可以根据需要修改

var speed=(target-start)/10;

console.log(speed+"====="+cur)

//如果没有达到目标值就一直加

if(Math.abs(cur-target)1){

dom.style[attr]=cur+speed+"px";

}else{

//达到目标值了就停止或者其他情况也停止

clearInterval(dom.timer);

//等停止了动画再回调函数进行另外的操作

if(callback)callback.call(dom);

};

};

},45);

};

//配套函数

function getStyle(dom,attr){

var value="";

if(window.getComputedStyle){

value=window.getComputedStyle(dom,false)[attr];

}else{

value=dom.currentStyle[attr];

};

value=parseInt(value);

return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充

};

function $(id){

//return document.getElementById(id);

return document.querySelector("#"+id);

};

如何用js使小球来回弹动

你好，

可以通过判断小球边缘和窗口高度来实现

例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。

来回弹动关键在于 对边缘的判断，和速度方向的判断和计算

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。

选择用纯css分成四段控制动画，最终效果如图：

详细分析：

创建HTML：

HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。

div class="layout"

div class="point"/div

/div

核心css：

去掉了浏览器兼容用的代码。

把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。

最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

}

}

完整代码:

html

head

style 

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0 auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/* Chrome: */

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/* Firefox: */

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/* Opera: */

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

-ms-transform:rotate(360deg);  /* IE 9 */

-moz-transform:rotate(360deg);  /* Firefox */

-webkit-transform:rotate(360deg); /* Chrome */

-o-transform:rotate(360deg);  /* Opera */

}

}

/style

/head

body

div class="layout"

div class="point"/div

/div

/body

/html

js动画效果代码方法

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态

2.fadeln()与fadeOut();

这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性

3.fadeToggle();

此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo() ;

fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值

5.slideDown(); 与 slideUp() ;

slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示

7.animate() ;

这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。

8.stop() ;

停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。

使用js画小球沿直线运动

js: 

html: 

准备属性值：

   本文使用js画直线，运用到css中的一些属性。

绘制的步骤：

    在本例中，绘制直接使用鼠标。点击获得起始点，拖动到终点获得结束点，鼠标松开就绘制图形。

获得起始点：

获得结束点：

绘制直线：

    使用了jquery中的animate()方法。

   js: 

   html: 

小球的属性：

创建小球：

使小球运动：

    将之前的画直线的方法封装成一个固定起点和终点的类。

js: 

html: 

原生js小球动画代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于原生js小球动画代码大全、原生js小球动画代码的信息别忘了在本站进行查找喔。