养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure实现圆点沿椭圆轨迹移动

时间:2024-11-01 16:35:40

Axure实现圆点沿椭圆轨迹移动,实圬杂钴怖现效果如图。本质是根据时间计算出圆点的横纵坐标,主要在于解决两邗锒凳审个问题,一是如何让圆点随时间自动移动,二是让圆点移动在椭圆的轨道上。第一个问题可利用文本框实现数值递增来实现,设置圆点横坐标为文本框的随值;第二个问题可根据横坐标通过椭圆公式来计算出纵坐标来实现,并且需要一个全局变量来控制圆形移动的方向

Axure实现圆点沿椭圆轨迹移动

工具/原料

Axure

方法/步骤

1、拖拽一个文本框,文本框变化时,设置文本递增,这样就得到了一组变化的数值,可以作为移动圆点的横坐标m。

Axure实现圆点沿椭圆轨迹移动

2、拖拽一个圆形形状,还是在文本框上设置用例,文本改变时,移动圆形到绝对位置,x为文本框的递增值,y暂时先设置为0,就得到了一个随时间移动的圆形。

Axure实现圆点沿椭圆轨迹移动

3、如何让圆形按椭圆的轨迹移动,就要利用到荏桊泪特椭圆公式,其中a,b分别为长短轴长,中心点为(h,k),主轴平行于x轴。通过椭圆形元件的长、宽、横纵坐标、y以及圆形元件的长(宽)、横坐标计算除y以外鹚兢尖睁的所有参数,根据该公式计算y,然后再换算成圆形的纵坐标。

Axure实现圆点沿椭圆轨迹移动

4、拖拽一个椭圆形到页面中,作为轨道,根据上述公式计算出移动圆形的纵坐标,这里比较复杂,但是只要厘清变量和函数的关系,不难写出。

Axure实现圆点沿椭圆轨迹移动

5、现在的问题还剩下如何让椭圆“拐回头”。这个其实是公式当中的±影响的。我们可以引入一个全局变量flag来实现±。当圆形元件移动时,通过判断中心点在椭圆的宽度范围内时,移动圆形的横坐标就递增,不然就递减。

Axure实现圆点沿椭圆轨迹移动

© 一点知识