我正在获取json数据，例如 - ＆gt;
$json = '[
{
"vt": "10",
"at": "0",
"cor": [
[47,85,1,0,1,2],
[181,86,1,1,1,3],
[99,197,1,0,1,4],
[116,183,1,2,1,6],
[83,51,1,3,1,7],
[180,90,1,4,1,9],
[88,110,1,5,1,11],
[83,54,1,6,1,15],
[83,55,1,6,1,15],
[83,56,1,6,1,15],
[83,57,1,6,1,15],
[83,58,1,6,1,15],
[83,59,1,6,1,15],
[83,60,1,6,1,15],
[83,61,1,6,1,15],
[83,62,1,6,1,15],
[83,63,1,6,1,15],
[83,64,1,6,1,15],
[83,65,1,6,1,15],
[83,66,1,6,1,15],
[83,67,1,6,1,15],
[83,68,1,6,1,15],
[83,69,1,6,1,15],
[83,70,1,6,1,15],
[83,150,1,6,1,15],
[83,310,1,6,1,15]
],
"an": "MainActivity"
}
]';
其中cor部分包含如下： “cor”[x坐标，y坐标，方向，手势，响应，时间]
现在我为所有那些手势制作动画6 x，ycordinate ...我怎么能用jquery animate做到这一点？
我试图像这样制作动画，但它不起作用 - ＆gt;
$json=json_decode($json,true);
$coordinate=$json[0]['cor'];
foreach ($coordinate as $key ) {
$x=$key[0];
$y=$key[1];
$ges=$key[3];
$t=$key[5];
$data['x']=$x;
$data['y']=$y;
$data['ges']=$ges;
$data['t']=$t;
$alldata[]=$data;
}
$lastdata = json_encode($alldata);
?>
<html>
<head>
<title>gyroscope</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.circle {
-moz-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
}
.finger
{
position: absolute;
top: 0px;
left: 0px;
background: #fb4c4c;
border: 2px solid #FF0000;
display: none;
opacity: 0.6
}
.swipeup{
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 0; height:0;
border-bottom: 50px solid #FF0000;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
opacity: 0.6;}
.swipeleft{
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 0; height: 0;
border-right: 50px solid #FF0000;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
opacity: 0.6;}
.swipedown{
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 0; height: 0;
border-top: 50px solid #FF0000;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
opacity: 0.6;}
.swiperight{
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 0; height: 0;
border-left: 50px solid #FF0000;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
opacity: 0.6;}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
var responsedata = '<?php echo $lastdata; ?>';
alldata = JSON.parse(responsedata);
console.log(alldata);
//get mouse position inside div
$("#vediocontainer").bind("mousemove",function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
$("#result").html("x:" + relativeX + ", y:" + relativeY);
});
var tap = '<div id="finger1" class="tap finger circle" style="display: none; width: 30px; height: 30px; left: 153px; top: 215px; opacity: 0.6;"></div>';
var swipeup='<div id="swipeup" class="swipeup">';
var swipedown='<div id="swipedown" class="swipedown">';
var swipeleft='<div id="swipeleft" class="swipeleft">';
var swiperight='<div id="swiperight" class="swiperight">';
$(tap).prependTo($("#vediocontainer"));
$(swipeup).prependTo($("#vediocontainer"));
$(swipedown).prependTo($("#vediocontainer"));
$(swipeleft).prependTo($("#vediocontainer"));
$(swiperight).prependTo($("#vediocontainer"));
var vid,time,prevtime = 0;
x=0,y=0,ges="",t=0;
$('#screenvideo').on('canplay', function()
{
vid = $('#screenvideo').get(0);
});
$('#screenvideo').on('timeupdate', function(){
time = Math.floor(vid.currentTime);
$.each(alldata, function(indexInArray) {
x = alldata[indexInArray].x;
y = alldata[indexInArray].y;
ges= alldata[indexInArray].ges;
t = alldata[indexInArray].t;
if(time == t && time !=prevtime)
{
if(ges == 0)
{
$(".tap").css("left",(x - 15) + "px");
$(".tap").css("top", (y - 15) + "px");
$(".tap").attr("id", "event"+t);
$('#event'+t).show(100,'', function(){
$(this).fadeOut('slow');
});
}
else if(ges ==1)
{
$(".tap").css("left",(x - 15) + "px");
$(".tap").css("top", (y - 15) + "px");
$(".tap").attr("id", "event"+t);
$('#event'+t).show(100,'', function(){
$(this).fadeOut(200);
$(this).show(100);
$(this).fadeOut('slow');
});
}
else if(ges==2)
{
$(".swipeup").css("left",(x - 15) + "px");
$(".swipeup").css("top", (y - 15) + "px");
$(".swipeup").attr("id", "swipeup"+t);
$('#swipeup'+t).show(100,'', function(){
$(this).fadeOut('slow');
});
}
else if(ges==3)
{
$(".swipedown").css("left",(x - 15) + "px");
$(".swipedown").css("top", (y - 15) + "px");
$(".swipedown").attr("id", "swipedown"+t);
$('#swipedown'+t).show(100,'', function(){
$(this).fadeOut('slow');
});
}
else if(ges==4)
{
$(".swipeleft").css("left",(x - 15) + "px");
$(".swipeleft").css("top", (y - 15) + "px");
$(".swipeleft").attr("id", "swipeleft"+t);
$('#swipeleft'+t).show(100,'', function(){
$(this).fadeOut('slow');
});
}
else if(ges==5)
{
$(".swiperight").css("left",(x - 15) + "px");
$(".swiperight").css("top", (y - 15) + "px");
$(".swiperight").attr("id", "swiperight"+t);
$('#swiperight'+t).show(100,'', function(){
$(this).fadeOut('slow');
});
}
else if(ges==6)
{
function loop()
{
$(".tap").css("left",(x - 15) + "px");
$(".tap").css("top", (y - 15) + "px");
$(".tap").attr("id", "event"+t);
$('#event'+t).animate(function()
{
$(this).fadeOut('slow');
});
}
loop();
}
prevtime = time;
}
});
});
});
</script>
<body style="margin: 0 !important;">
<div style="width:320px; height:480px; position:relative; margin:0px auto">
<div id="vediocontainer" style="width:250px; height:388px;">
<video id="screenvideo" preload="auto" src="screen.mp4" controls="controls" width="250px">
<source type="video/mp4" src="screen.mp4">
</video>
</div>
<div id="result"></div>
</div>
</body>
</html>