• Changed Files
  • packages/core/src/interactions/Tossable.ts

[added] resistance to Tossable
ClosedPublic

Authored by appsforartists on Jul 25 2017, 10:54 PM.

Diff Detail

Repository
R13 material-motion/material-motion-js
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
Restricted Application added a reviewer: O2: Material Motion. · View Herald TranscriptJul 25 2017, 10:54 PM
Restricted Application added a project: Material Motion. · View Herald Transcript
Restricted Application added a reviewer: O3: Material JavaScript platform reviewers. · View Herald Transcript
Restricted Application added a reviewer: Material Motion. · View Herald Transcript
Restricted Application completed building Restricted Buildable.Jul 25 2017, 10:57 PM
featherless accepted this revision.Jul 31 2017, 2:35 PM
featherless added a subscriber: featherless.

There's a good deal to be iterated on here, but this is a great start. Nice work.

  • How might someone express resistance in a specific side of an interaction? E.g. Resistance dragging up but not down.
  • How is velocity affected by the resistance?
packages/core/src/interactions/Tossable.ts
62

resistanceFactor? Amount makes it seem like it should be a measure in points.

86

maxResistanceDistance? resistanceRadius makes me think this is measured from the origin, but it's technically measured from resistanceless.

This revision is now accepted and ready to land.Jul 31 2017, 2:35 PM

Good questions.

How might someone express resistance in a specific side of an interaction? E.g. Resistance dragging up but not down.

With this implementation, you can apply resistance either radially or linearly (e.g. on an axis-locked gesture). I can't imagine a real case where you'd want to apply radial resistance in some directions but not others. If such a case came up, that would warrant its own thinking.

For linear resistance, you could move the origin and the resistancelessRadius to ensure that only one side of the target had resistance. (For instance, if you were designing the Inbox swipe, you could put the origin on the right edge of the card and have resistancelessRadius be the width of the card. Then, you could freely move the card to the right, but encounter resistance when going left.)

Do you think that's too hacky - do you want to see a more robust/elegant solution?

How is velocity affected by the resistance?

Since the resistance calculations happen upstream of velocity, it should be correct. (That is, if you imagine a situation where resistance wasn't implemented, but the user slowed their drag as if their was, the velocity would be the same as it is here.) Let me know if you see a hole in my thinking here.

This comment was removed by featherless.

Do you think that's too hacky - do you want to see a more robust/elegant solution?

Nah that's fine, just may be non-obvious at first glance so may be good to document.

appsforartists added a comment.EditedJul 31 2017, 3:06 PM

👍

I definitely think this deserves a catalog of common examples, including swipeable rows with resistance.

appsforartists marked 2 inline comments as done.Jul 31 2017, 7:30 PM

Updated names and added docs

Restricted Application completed building Restricted Buildable.Jul 31 2017, 7:30 PM
appsforartists edited the summary of this revision. (Show Details)Jul 31 2017, 7:31 PM
Restricted Application completed building Restricted Buildable.Jul 31 2017, 7:33 PM
This revision was automatically updated to reflect the committed changes.