[added] Swipeable interaction
ClosedPublic

Authored by appsforartists on Sep 11 2017, 10:04 PM.

Details

Summary

This is a first draft of the swipe away interaction. It can be previewed here:

https://material-motion-demos.firebaseapp.com/swipe-away/

The user can drag an item to either side of the viewport. This will dismiss the item. The user will encounter resistance up to a threshold. If the user releases before the threshold is met, the item will spring back to its origin.

Diff Detail

Repository
R13 material-motion/material-motion-js
Lint
Lint OK
Unit
No Unit Test Coverage
Restricted Application added a reviewer: O2: Material Motion. · View Herald TranscriptSep 11 2017, 10:04 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
appsforartists planned changes to this revision.Sep 11 2017, 10:05 PM
Restricted Application failed to build Restricted Buildable!Sep 11 2017, 10:35 PM

This is close enough for now - improvements can be added in later diffs

Restricted Application failed to build Restricted Buildable!Sep 12 2017, 10:59 PM

I fixed the wobble#5, which makes it safe to set draggedX$ to destination$.

Setting draggedX$ directly to destination$ also fixes a bug where dragging back to the origin-side of the threshold while the spring was active would get the item stuck at the resistance threshold (since thresholdMet$.rewriteTo() fails from that side of the threshold).

Restricted Application completed building Restricted Buildable.Sep 13 2017, 9:27 PM
appsforartists edited the summary of this revision. (Show Details)Sep 19 2017, 7:12 PM
featherless accepted this revision.Sep 22 2017, 9:08 AM
featherless added a subscriber: featherless.

Additional functionality to add:

  • tossing back to the left should cancel the operation.
  • if velocity is below a certain threshold, then position should be used to determine whether the action was completed or canceled.
This revision is now accepted and ready to land.Sep 22 2017, 9:08 AM

u

packages/core/src/interactions/Swipeable.ts
62

I'm not sure I understand what resistanceBasis means without looking at the comments/code.

Would resistanceRadius be more accurate?

Velocity doesn't matter at all now, but it eventually should. It already cancels if you move to the origin-side of the threshold before releasing.

packages/core/src/interactions/Swipeable.ts
62

I thought we originally called it that and decided basis was better, but that may have been a different variable (http://codereview.cc/D3272).

I'm open to resistanceRadius if you think it's more clear - just want to make sure it is actually more clear and not subconscious nostalgia for what we called it that in a previous revision. 😃 We currently have radiusUntilResistance, which is the amount of slop before resistance kicks in. resistanceBasis is how far the user must drag to hit maximum resistance - it's the numerator in the basis/factor calculation that determines resistance.

In my mind, basis makes that relationship more clear, but I've been looking at it so long that I may have lost objectivity.

This revision was automatically updated to reflect the committed changes.