!doctype html
创新互联主营绥江网站建设的网络公司,主营网站建设方案,成都App制作,绥江h5微信小程序开发搭建,绥江网站营销推广欢迎绥江等地区企业咨询
html lang="en"
head
meta charset="UTF-8"
titleDemo/title
style
*{
margin:0;
padding:0;
border:0;
}
.stage{
}
.track-monitor{
background-color:orange;
}
.track-pad{
height:200px;
background-color:green;
}
.track-coordinate{
background-color:purple;
color:white;
height:25px;
line-height:25px;
font-size:12px;
}
.track-coordinate-list{
font-size:12px;
width:100%;
word-break:break-word;
}
/style
script
window.addEventListener('load',function(){
var pad = document.getElementsByClassName('track-pad')[0];
var monitor = document.getElementsByClassName('track-monitor')[0];
var coordinate = document.getElementsByClassName('track-coordinate')[0];
var clist = document.getElementsByClassName('track-coordinate-list')[0];
var reset = document.getElementsByTagName('button')[0];
var fixSize = function(){
monitor.width = window.innerWidth;
};
var context = monitor.getContext('2d');
var cset = [];
window.addEventListener('resize',function(){ fixSize(); });
pad.addEventListener('mousemove',function(e){
context.strokeStyle = 'white';
context.lineTo(e.x,e.y);
context.stroke();
coordinate.innerHTML = e.x+':'+e.y;
cset.push(coordinate.innerHTML);
clist.innerHTML = cset.join(',');
});
reset.addEventListener('click',function(){
fixSize();
cset = [];
clist.innerHTML = '';
coordinate.innerHTML='在绿色的方块中滑动鼠标';
});
fixSize();
});
/script
/head
body
div class="stage"
div class="track-pad"/div
canvas width="100" height="200" class="track-monitor"/canvas
div class="track-coordinate"在绿色的方块中滑动鼠标/div
button重置/button
div class="track-coordinate-list"/div
/div
/body
/html
搞过wpf的动画，对js的不太熟悉，不过想来思路也差不多。
如果轨迹是你自己定的，那么就构建条路径（path或者别的什么），将它设置为元素移动路径
如果是随机的，你就在每一步移动之前用随机数取得下一步的坐标，设置为单步动画的目标点
这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹
body
center
canvas id="cavsElem" width="800" height="560" style="border: 1px solid black; "你的浏览器不支持此涂鸦板/canvas
画笔颜色：input type="color" id="context.color" /
画笔大小:input type="number"id="context.size" max="10" value="1" /
/center
script
(function(){
var canvas=document.getElementById('cavsElem');//获得画布
var context=canvas.getContext('2d');//准备画笔
var a=document.getElementById('context.color');
var b=document.getElementById('context.size');
canvas.onmousedown=function(e){ //鼠标触发onmousedown事件时,获取起始坐标
var x=e.clientX-canvas.getBoundingClientRect().left;
var y=e.clientY-canvas.getBoundingClientRect().top;
context.beginPath();
context.moveTo(x,y);
canvas.onmousemove=function(event){ //触发鼠标移动事件时，获取绘制线条的坐标
var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;
context.lineTo(x,y);//绘制线条
context.strokeStyle=a.value;
context.lineWidth=b.value;
context.stroke();
};
canvas.onmouseup=function(event){ //鼠标被松开时，返回null
canvas.onmousemove=null;
};
};
}());
/script
/body
操场轨迹上下两边为直线，左右为半圆。
选择用纯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
