将缓动曲线应用于变换以模拟摩擦答案

【问题标题】：Apply Easing curve to Transform to simulate friction将缓动曲线应用于变换以模拟摩擦
【发布时间】：2015-03-15 04:51:10
【问题描述】：

我正在使用 meteor Famous-views 包，并有一个可在 X 中拖动的表面，使用注册会话 var (dragPosition) 的GenericSync

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

这个咖啡脚本不起作用，但我认为显示了我想要做的事情。我理解为什么它不起作用，因为缓动曲线方法不知道它在哪里，但是如何提供该数据并返回应用了曲线的 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

【问题讨论】：

标签： meteor coffeescript famo.us

【解决方案1】：

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

在下面的代码中，我通过除以它的限制 (window.innerWidth) 来规范化 X 位置。将其乘以原始位置给了我应用缓动曲线的“新”位置。

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）

【讨论】：