我想沿着特定路径制作对象的动画 [英] I want to do animation of an object along a particular path
本文介绍了我想沿着特定路径制作对象的动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我必须移动路径上的小矩形.在画布内单击后矩形会移动.
我无法为其设置动画,因为对象只是跳转到所需的点.
请在
<html lang="zh-cn"><头><风格>身体{背景颜色:象牙色;}画布{边框:1px纯红色;}</风格><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><脚本>$(函数(){var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//设置起始值无功 fps = 60;无功百分比=0无功方向=1;//开始动画动画();函数动画(){//设置动画位置(0-100)百分比+=方向;如果(百分比<0){百分比= 0;方向=1;};如果(百分比> 100){百分比= 100;方向=-1;};绘制(百分比);//请求另一帧设置超时(功能(){请求动画帧(动画);}, 1000/fps);}//根据sliderValue绘制当前帧函数绘制(滑块值){//重绘路径ctx.clearRect(0,0,canvas.width,canvas.height);ctx.lineWidth = 5;ctx.beginPath();ctx.moveTo(100, 20);ctx.lineTo(200, 160);ctx.strokeStyle = '红色';ctx.stroke();ctx.beginPath();ctx.moveTo(200, 160);ctx.quadraticCurveTo(230, 200, 250, 120);ctx.strokeStyle = '绿色';ctx.stroke();ctx.beginPath();ctx.moveTo(250,120);ctx.bezierCurveTo(290, -40, 300, 200, 400, 150);ctx.strokeStyle = '蓝色';ctx.stroke();ctx.beginPath();ctx.moveTo(400, 150);ctx.lineTo(500, 90);ctx.strokeStyle = '黄金';ctx.stroke();//绘制跟踪矩形变量 xy;如果(滑块值<25){var百分比=sliderValue/24;xy=getLineXYatPercent({x:100,y:20},{x:200,y:160},percent);}否则如果(滑块值<50){var百分比=(sliderValue-25)/24xy=getQuadraticBezierXYatPercent({x:200,y:160},{x:230,y:200},{x:250,y:120},percent);}否则如果(滑块值<75){var百分比=(sliderValue-50)/24xy=getCubicBezierXYatPercent({x:250,y:120},{x:290,y:-40},{x:300,y:200},{x:400,y:150},percent);}别的 {var百分比=(sliderValue-75)/25xy=getLineXYatPercent({x:400,y:150},{x:500,y:90},percent);}drawRect(xy,"红色");}//在 xy 处绘制跟踪矩形函数 drawRect(点,颜色){ctx.fillStyle="青色";ctx.strokeStyle="灰色";ctx.lineWidth=3;ctx.beginPath();ctx.rect(point.x-13,point.y-8,25,15);ctx.fill();ctx.stroke();}//在 xy 处绘制跟踪点函数 drawDot(点,颜色){ctx.fillStyle=颜色;ctx.strokeStyle="黑色";ctx.lineWidth=3;ctx.beginPath();ctx.arc(point.x,point.y,8,0,Math.PI*2,false);ctx.closePath();ctx.fill();ctx.stroke();}//行:百分比是 0-1函数 getLineXYatPercent(startPt,endPt,percent) {var dx = endPt.x-startPt.x;var dy = endPt.y-startPt.y;var X = startPt.x + dx*percent;var Y = startPt.y + dy*percent;返回({x:X,y:Y});}//二次贝塞尔曲线:百分比是 0-1函数 getQuadraticBezierXYatPercent(startPt,controlPt,endPt,percent) {var x = Math.pow(1-percent,2) * startPt.x + 2 * (1-percent) * percent * controlPt.x + Math.pow(percent,2) * endPt.x;var y = Math.pow(1-percent,2) * startPt.y + 2 * (1-percent) * percent * controlPt.y + Math.pow(percent,2) * endPt.y;返回({x:x,y:y});}//三次贝塞尔百分比是0-1函数 getCubicBezierXYatPercent(startPt,controlPt1,controlPt2,endPt,percent){var x=CubicN(percent,startPt.x,controlPt1.x,controlPt2.x,endPt.x);var y=CubicN(percent,startPt.y,controlPt1.y,controlPt2.y,endPt.y);返回({x:x,y:y});}//百分比距离处的三次辅助公式函数 CubicN(pct, a,b,c,d) {var t2 = pct * pct;无功 t3 = t2 * pct;返回 a + (-a * 3 + pct * (3 * a - a * pct)) * pct+ (3 * b + pct * (-6 * b + b * 3 * pct)) * pct+ (c * 3 - c * 3 * pct) * t2+ d * t3;}});//结束 $(function(){});头部><身体><canvas id="canvas" width=600 height=300></canvas>