raphael.js 画时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="raphael.js" charset="utf-8"></script>
<script>
window.onload=function (){
let paper=Raphael(0, 0, 800, 600);
let cx=400,cy=300;
function createPath(r, ang, color){
let path=paper.path();
path.attr({'stroke-width': 20, 'stroke': color});
calc(ang, true);
function calc(ang, isfirst=false){
let arr=[];
arr.push(`M ${cx} ${cy-r}`);
let x=cx+Math.sin(ang*Math.PI/180)*r;
let y=cy-Math.cos(ang*Math.PI/180)*r;
arr.push(`A ${r} ${r} 0 ${ang>180?1:0} 1 ${x} ${y}`);
if(isfirst){
path.attr('path', arr.join(' '));
}else{
if(ang==0){
path.attr('path', arr.join(' '));
}else{
path.animate({path: arr.join(' ')}, 500, 'bounce');
}
}
}
path.calc=calc;
return path;
}
let paths=[];
function tick(){
let oDate=new Date();
if(paths.length==0){
paths=[
createPath(200, 360*oDate.getHours()/12, 'red'),
createPath(150, 360*oDate.getMinutes()/60, 'green'),
createPath(100, 360*oDate.getSeconds()/60, 'yellow')
];
}else{
paths[0].calc(360*oDate.getHours()/12);
paths[1].calc(360*oDate.getMinutes()/60);
paths[2].calc(360*oDate.getSeconds()/60);
}
}
tick();
setInterval(tick, 1000);
};
</script>
</head>
<body>
</body>
</html>
raphael.js transform\animate
1. path.attr('transform','r30t20s2');//
r ==rotate
t ==translate
s ==scale
2. path.animate({'transform':'s2,1r30'},2000,'bounce');//动画效果
网友评论