constraintlayout icon indicating copy to clipboard operation
constraintlayout copied to clipboard

[Compose] Multiple transitions onSwipe

Open jeckso opened this issue 1 year ago • 4 comments

Is it possible to define multiple default transitions? I have a card that requires swipe gestures both to the right and left, each with distinct transitions. However, I currently can only apply a single default transition. I'm using androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha10

{
  ConstraintSets: {
    rest: {
      topCard: {
        width: "spread",
        height: "spread",
        top: ['parent', 'top',50],
        start: ['parent', 'start',50],
        bottom: ['parent', 'bottom',50],
        end: ['parent', 'end',50],
      }
    },
    pass: {
      topCard: {
        width: '70%',
        height: 'spread',
        start: ['parent', 'start', 50],
        end: ['parent', 'end',200],
        top: ['parent', 'top',20],
        bottom: ['parent', 'bottom',80]
      }
    },
    like: {
      topCard: {
        width: '70%',
        height: 'spread',
        start: ['parent', 'start', 200],
        end: ['parent', 'end',50],
        top: ['parent', 'top',20],
        bottom: ['parent', 'bottom',80]
      }
    },
    offScreenLike: {
      topCard: {
        width: '70%',
        height: 'spread',
        start: ['parent', 'start', 0],
        end: ['parent', 'end',50],
        top: ['parent', 'top',20],
        bottom: ['parent', 'bottom',80]
      }
    },
    offScreenPass: {
      topCard: {
        width: '70%',
        height: 'spread',
        start: ['parent', 'start', 50],
        end: ['parent', 'end',500],
        top: ['parent', 'top',20],
        bottom: ['parent', 'bottom',80]
      }
    }
  },
  Transitions: {
    default: {
      from: 'rest',
      to: 'like',
      duration: 300,
      onSwipe: {
        direction: 'start',
        touchUp: 'autocomplete',
        anchor: 'topCard',
        side: 'start'
      }
    },
    pass: {
      from: 'rest',
      to: 'pass',
      duration: 300,
      onSwipe: {
        direction: 'end',
        touchUp: 'autocomplete',
        anchor: 'topCard',
        side: 'end'
      }
    },
    animateToEnd: {
      from: 'like',
      to: 'offScreenLike',
      duration: 150
    },
    animateToEndPass: {
      from: 'pass',
      to: 'offScreenPass',
      duration: 150
    }
  }
}

jeckso avatar Jul 18 '23 16:07 jeckso