繁體
|
簡體
Sclub交友聊天~加入聊天室當版主
(檢舉)
分享
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
标题:
椭圆上一点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源码:
/*唯一可以手动修改的数据有:
myx 在12行
myy 在13行
a 在16行
b 在17行
注意:a的值必须大于b!
*/
//椭圆左上角的坐标点【AS专用】
var myx:Number = 140;
var myy:Number = 80;
//定义各种参数,字母是按照数学上的照搬的
var a:Number = 150;//椭圆的宽度的一半
var b:Number = 95;//椭圆的长度的一半
//焦点与圆心之间的距离设为c,则c的大小满足特定的关系式:c方=a方-b方:
var c:Number = Math.sqrt(Math.pow(a,2) - Math.pow(b,2));
//trace(c);
var f1x:Number;//椭圆的左焦点的x坐标
var f2x:Number;//椭圆的右焦点的x坐标
var f12y:Number;//椭圆的左、右焦点的y坐标
//绘制椭圆:
var ty:Shape=new Shape();//定义椭圆
ty.graphics.lineStyle(0,0x000000);
//c.graphics.beginFill(0x0000ff);
ty.graphics.drawEllipse(myx,myy,2*a,2*b);
ty.graphics.endFill();
addChild(ty);//显示椭圆
//找出椭圆的两个焦点↓↓↓
f1x = myx + a - c;//左焦点x坐标
f2x = myx + a + c;//右焦点x坐标
f12y = myy + b;//左、右焦点y坐标
//trace(f1x,f2x,f12y);
//绘制这两个焦点
var jd:Shape=new Shape();//定义焦点
jd.graphics.lineStyle(0,0x000000);
jd.graphics.drawCircle(f1x,f12y,1);
jd.graphics.drawCircle(f2x,f12y,1);
addChild(jd);
//找出数学上的圆点O的坐标
var ox:Number = myx + a;
var oy:Number = myy + b;
//设:椭圆的圆周上有一个动点P,现在根据其x坐标求得y坐标
var px:Number = myx;//x坐标由enterframe控制,其最小值为myx
var py:Number = myy;//y坐标最小值为myy y坐标根据椭圆的方程求得: x方/a方+y方/b方=1
/*
px有 取值范围限定: myx≤px≤myx+2a
py有 取值范围限定: myy≤py≤myy+2b
*/
var leftline:Shape=new Shape();//描线的左边线的容器
var rightline:Shape=new Shape();//描线的右边线的容器
leftline.graphics.lineStyle(1,0x0000FF);
rightline.graphics.lineStyle(1,0xFF0000);
addChild(leftline);
addChild(rightline);
var canshu:Number = 1;//用于控制点P的走向,如果向右走,canshu为1,反之参数为-1
//描线:
this.addEventListener(Event.ENTER_FRAME,miaoxian);
function miaoxian(evt:Event)
{
leftline.graphics.clear();
rightline.graphics.clear();
if (px==myx)
{
canshu=1;
}
else if (px==myx+2*a)
{
canshu=-1;
}
px += canshu;
py=oy-canshu*b*Math.sqrt(1-Math.pow((px-ox)/a,2));
//接下来描线:
leftline=new Shape();
rightline=new Shape();
leftline.graphics.lineStyle(1,0x0000FF);
rightline.graphics.lineStyle(1,0xFF0000);
leftline.graphics.moveTo(f1x,f12y);
leftline.graphics.lineTo(px,py);
rightline.graphics.moveTo(px,py);
rightline.graphics.lineTo(f2x,f12y);
addChild(leftline);
addChild(rightline);
}
复制
作者:
网雨霏霏
时间:
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