Famo.us Js-将实体(粒子)设置到位置的动画
Famo.us Js - Animate Body (Particle) to Position
我有一个Circle
(在整个问题中我将称之为Particle
),其中添加了Modifier
,然后添加了将事件管道传输到Generic Sync
(触摸/单击)的Surface
。sync
事件允许我更改Particle
在start
、update
和end
事件上的位置,以便我可以在边界框内拖动它。
我的应用程序中有一条规则,如果粒子在同步的start
和end
事件上的位置之间的距离低于某个阈值,则粒子需要设置动画回到start
位置
例如:粒子在同步start
上从[0,0]开始,然后移动到[10100100]。两点之间的距离(约141.42)超过了我的阈值50…
如何施加力/速度/??将Particle
动画化回[0,0]
注意:我知道Modifiers
可以很容易地做到这一点,但我正努力严格使用物理引擎
编辑:我找到了一个解决方案,包括使用可转换并设置一个运行间隔,以不断更新粒子的位置,然后将可转换设置为我想要的最终位置,并在可转换的回调中清除间隔。
var retreatTrans = new Transitionable(myParticle.getPosition());
// Set a temporary interval to update the position
// as we change the transitionable (below)
var retreatInterval = setInterval(function () {
myParticle.setPosition(retreatTrans.get());
});
// Set transitionable to our desired retreatPosition
retreatTrans.set([0,0], {duration: 100}, function () {
// Clear our interval
clearInterval(retreatInterval);
});
如果我正确理解你的问题,你想从原点拖动particle/circle/rectangle
,然后在触摸端让particle/circle/rectangle
移回原点。
使用物理引擎实现这一点的方法之一是通过Spring
。如果你看一下Scrollview
,它在内部使用弹簧在你到达边缘时"反弹"回来。我稍后会看看是否可以快速实现来演示这一点。
相关文章:
- 设置画布渲染器的x和y位置
- 是否可以使用flexbox显示模型设置元素的滚动位置
- Javascript或浏览器以不同的方式设置位置
- d3 sankey图-如何设置y位置
- 用three.js和CSG设置位置
- 有人知道在固定大小的弹出矩形上设置x/y位置的简单方法吗
- jquery谷歌地图无法设置位置
- 根据先前的参数设置位置 $routeChangeError 使用角度 JS
- Jquery Gritter设置位置
- 获取元素偏移量在设置位置之前返回相同的值:绝对值
- Usings传单js从变量中设置位置
- 使用svg.js设置位置动画的正确方法是什么
- 基于浏览器区域设置/位置的自动日期格式
- 当位于bootstrap选项卡内时,变形不会设置位置
- 当我在window.open中设置位置no时,地址栏的详细信息不会被隐藏
- 使用UI-Router和AngularJs设置位置更改后的消息
- 设置位置,如果不可见的图片不存在
- Draw2D设置位置
- 如何在Firefox、IE的SoundJS中正确设置位置
- jQuery.offset()设置位置:绝对.我需要位置:固定