Apply Easing curve to Transform to simulate friction

Question

I'm using the meteor famous-views package and have a surface that is draggable in X using a GenericSync that registers a session var (dragPosition)

At the moment the translation is a 1:1 linear correspondence but I would like it to have an easing curve applied given a start position of [0,0] and limit (for now Math.round window.innerWidth/2) eg. 500

This coffeescript doesn't work but I think shows what I want to do. I understand why it doesn't work as the easing curve method has no understanding of where it is but how do provide that data and spit back a Famous.Transform.translate value that has the curve applied?

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

rjmoggach · Answer 1 · 2015-03-14T20:51:10.000

Given the Famous.Easing curves are simply functions that are defined on the domain [0, 1] and map to the range [0,1] you can use this to remap the values.

In the code below I've normalized the X position by dividing by it's limit (window.innerWidth). Multiplying this by the original position gave me the 'new' position with easing curve applied.

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)

Note

This code is based on a draggable object that is centered in the window and can't be dragged past it's extents. (that's why i've set the limit to window.innerWidth * 0.5)

Apply Easing curve to Transform to simulate friction

1 Answers1