使用js画小球沿直线运动

JavaScript011

使用js画小球沿直线运动,第1张

js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.js

html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html

准备属性值：

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

绘制的步骤：

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

获得起始点：

获得结束点：

绘制直线：

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

   js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js

   html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html

小球的属性：

创建小球：

使小球运动：

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

js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js

html:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html

你是指下面这种小球吗？

这个是可以用jquery做的  它是一个jquery圆环统计插件circliful 来完成的

方法如下：

使用方法

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="js/jquery.circliful.min.js"></script>

如果需要 fontawesome icons图片，请引入相关的CSS文件

将一个元素添加到页面中，并添加一个惟一的id值，并在data属性写上你需要的值，代码如下：

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

写入JS初始化插件

$( document ).ready(function() {

$('#myStat').circliful()

})

参数

dimension / 元素的高度与宽度 / 默认值 200px X 200px

text / 圆环内显示的文本

info /圆环内text文本下方的文字信息 ，可以为空

width / 圆环的大小 / 默认值 15px

fontsize /文本的字体大小 / 默认 15px

percent / 百分比，可以是1到100间的任意数值

fgcolor / 圆环的前景色 / 默认值 #556b2f

bgcolor / 圆环的背景色 / 默认值 #eee

fill / 整个圆环的背景色 ，可以为空

type / 全环或是半环，设计 data-type="half" 显示成半圆环 / 默认值 circle

total / 总量，百分比，比如你有 750MB 空间，  350MB 是使用的. 你就可以这样设置 data-total="750" 和 data-part="350" ，圆环将会显示成百分比 36,85%

part

border / 圆环的边框.

icon / Fontawesome icon

iconsize / icon的大小

iconcolor / icon的颜色

animationstep /动画的步阶, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

startdegree / 开始前景动的位置 / 默认值 0

bordersize / 边框的宽度

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

选择用纯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>