免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

标题: 椭圆上一点P的运动轨迹 [打印本页]

作者: 网雨霏霏    时间: 2020-1-27 22:20     标题: 椭圆上一点P的运动轨迹

问题出处:
http://tieba.baidu.com/p/6460656878


为防止帖子失效,现原搬原贴如下:
这个动画怎么做,不是逐侦动画,小球沿椭圆运动,并和椭圆两个焦点画线段!
只要椭圆,不需要坐标,不需要干预!就要一个小球沿引导层运动,连续,不是跳跃,并在小球与椭圆焦点之间实时画线!
[attach]1503[/attach]



=================
下面是做出来的成果【flash格式,需要浏览器安装有flash插件才可见】:[flashroadswf=http://flashroad.joinbbs.net/attachment.php?aid=MTUwNHxjYmQ5MGVmYXwxNzExNzA1ODQ5fDBhMDc3em5pV0YwcDMwT1I3enhxNENLZzE1d2hKblV0Q3BlTTlTVFNLT1dVaUpn&request=yes&_f=.swf,550]400[/flashroadswf]
作者: 网雨霏霏    时间: 2020-1-27 22:22

我用的是AS3源码:
  1. /*唯一可以手动修改的数据有:
  2. myx  在12行
  3. myy   在13行
  4. a    在16行
  5. b   在17行
  6. 注意:a的值必须大于b!
  7. */



  8. //椭圆左上角的坐标点【AS专用】
  9. var myx:Number = 140;
  10. var myy:Number = 80;

  11. //定义各种参数,字母是按照数学上的照搬的
  12. var a:Number = 150;//椭圆的宽度的一半
  13. var b:Number = 95;//椭圆的长度的一半
  14. //焦点与圆心之间的距离设为c,则c的大小满足特定的关系式:c方=a方-b方:
  15. var c:Number = Math.sqrt(Math.pow(a,2) - Math.pow(b,2));
  16. //trace(c);


  17. var f1x:Number;//椭圆的左焦点的x坐标
  18. var f2x:Number;//椭圆的右焦点的x坐标
  19. var f12y:Number;//椭圆的左、右焦点的y坐标




  20. //绘制椭圆:
  21. var ty:Shape=new Shape();//定义椭圆
  22. ty.graphics.lineStyle(0,0x000000);
  23. //c.graphics.beginFill(0x0000ff);
  24. ty.graphics.drawEllipse(myx,myy,2*a,2*b);
  25. ty.graphics.endFill();
  26. addChild(ty);//显示椭圆


  27. //找出椭圆的两个焦点↓↓↓
  28. f1x = myx + a - c;//左焦点x坐标
  29. f2x = myx + a + c;//右焦点x坐标
  30. f12y = myy + b;//左、右焦点y坐标
  31. //trace(f1x,f2x,f12y);


  32. //绘制这两个焦点
  33. var jd:Shape=new Shape();//定义焦点
  34. jd.graphics.lineStyle(0,0x000000);
  35. jd.graphics.drawCircle(f1x,f12y,1);
  36. jd.graphics.drawCircle(f2x,f12y,1);
  37. addChild(jd);



  38. //找出数学上的圆点O的坐标
  39. var ox:Number = myx + a;
  40. var oy:Number = myy + b;

  41. //设:椭圆的圆周上有一个动点P,现在根据其x坐标求得y坐标
  42. var px:Number = myx;//x坐标由enterframe控制,其最小值为myx
  43. var py:Number = myy;//y坐标最小值为myy  y坐标根据椭圆的方程求得: x方/a方+y方/b方=1
  44. /*
  45. px有 取值范围限定: myx≤px≤myx+2a
  46. py有 取值范围限定: myy≤py≤myy+2b
  47. */

  48. var leftline:Shape=new Shape();//描线的左边线的容器
  49. var rightline:Shape=new Shape();//描线的右边线的容器
  50. leftline.graphics.lineStyle(1,0x0000FF);
  51. rightline.graphics.lineStyle(1,0xFF0000);
  52. addChild(leftline);
  53. addChild(rightline);
  54. var canshu:Number = 1;//用于控制点P的走向,如果向右走,canshu为1,反之参数为-1


  55. //描线:
  56. this.addEventListener(Event.ENTER_FRAME,miaoxian);
  57. function miaoxian(evt:Event)
  58. {
  59.         leftline.graphics.clear();
  60.         rightline.graphics.clear();
  61.         if (px==myx)
  62.         {
  63.                 canshu=1;
  64.         }
  65.         else if (px==myx+2*a)
  66.         {
  67.                 canshu=-1;
  68.         }
  69.         px +=  canshu;
  70.         py=oy-canshu*b*Math.sqrt(1-Math.pow((px-ox)/a,2));
  71.         //接下来描线:

  72.         leftline=new Shape();
  73.         rightline=new Shape();
  74.         leftline.graphics.lineStyle(1,0x0000FF);
  75.         rightline.graphics.lineStyle(1,0xFF0000);
  76.         leftline.graphics.moveTo(f1x,f12y);
  77.         leftline.graphics.lineTo(px,py);
  78.         rightline.graphics.moveTo(px,py);
  79.         rightline.graphics.lineTo(f2x,f12y);
  80.         addChild(leftline);
  81.         addChild(rightline);
  82. }
复制

作者: 网雨霏霏    时间: 2020-1-27 22:37

如果嫌太慢,就将第90行的代码修改为:
px +=  canshu*5;
数字越大,就越快。这里设置为5,就是5倍的播放速度

不过,实际测试的时候发现,这个数字不能随心所欲的任意修改,当它等于某些特定值的时候,动画会出问题
我测试出如下几个数值: 7、8、9、11、13、14

如果你修改了一些参数,这里的出问题的数字也会改变。需要你调试一下
作者: flashroad    时间: 2020-7-10 10:05

神马鬼......





欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/) Powered by Discuz! 7.2