Question

我正在使用meteor famous-views包，并且使用注册会话var {GenericSync）

的dragPosition在X中绘制可拖动的表面

目前，翻译是1：1线性对应，但我希望在给定[0,0]的起始位置和限制（现在为Math.round window.innerWidth/2）时应用缓动曲线，例如。 500

这个coffeescript不起作用，但我认为显示了我想做的事情。我理解为什么它不起作用，因为缓动曲线方法不知道它在哪里但是如何提供该数据并吐出一个已应用曲线的Famous.Transform.translate值？

Template.test5.helpers
  'dragTransform': ->
    position = Session.get 'dragPosition'
    absPosX = Math.abs position[0]
    limX = Math.round (window.innerWidth * 0.5)
    if absPosX < limX
      position[0] = position[0]
    else
      position[0] = Math.sign(position[0]) * limX
    transX = Famous.Transform.translate(position[0],position[1],0),
      curve: Famous.Easing.inCirc
    Famous.Transform.multiply transX

Answer 1

鉴于Famous.Easing曲线只是在域[0,1]上定义的函数并映射到范围[0,1]，您可以使用它来重新映射值。

在下面的代码中，我通过除以它的限制（window.innerWidth）来标准化X位置。将其与原始位置相乘给了我新的＆＃39;适用宽松曲线的位置。

Template.test5.helpers
  'dragTransform': ->
    position = Session.get 'dragPosition'
    absPosX = Math.abs position[0]
    limX = Math.round (window.innerWidth * 0.5)
    if absPosX < limX
      position[0] = position[0]
    else
      position[0] = Math.sign(position[0]) * limX
    console.log Famous.Transform
    scalar = Famous.Easing.inCirc (absPosX/limX)
    Famous.Transform.translate(position[0]*scalar,position[1],0)

注意

此代码基于一个可拖动的对象，该对象位于窗口的中心，无法拖过它的范围。（这就是我将限制设置为window.innerWidth * 0.5）
的原因

将Easing曲线应用于Transform以模拟摩擦

1 个答案: