Code Monkey home page Code Monkey logo

Comments (8)

Kureev avatar Kureev commented on July 3, 2024

I'd like to implement react-motion for that. Just waiting it to be a bit more stable and tested.

from react-native-side-menu.

grabbou avatar grabbou commented on July 3, 2024

Hm, what about Animated?

from react-native-side-menu.

Kureev avatar Kureev commented on July 3, 2024

@grabbou Animated? If you're talking about AnimatedExperimental, then you should check it out facebook/react-native#796

from react-native-side-menu.

grabbou avatar grabbou commented on July 3, 2024

No, I am talking about Animated - https://facebook.github.io/react-native/docs/animations.html#animated they presented that library during ReactEurope and looks like a quite powerful tool to do native animations (it looks a lot like CoreAnimations in terms of how you group different bits, but haven't dig into the details yet) 💃

from react-native-side-menu.

Kureev avatar Kureev commented on July 3, 2024

Now I'm already using it and you can pass animation prop to component. Am I missing something? What's the idea you want me to implement? Something like support queues?

from react-native-side-menu.

grabbou avatar grabbou commented on July 3, 2024

Nah you are using LayoutAnimation, just saying Animated is worth investigating as a good alternative to react-motion (esp. given the fact Animated might be more performant as I am pretty sure they have some really good bindings for that)

from react-native-side-menu.

Kureev avatar Kureev commented on July 3, 2024

That's true. So, you want to animate opening/closing of the side menu. What is your propose for API? something like

const queue = [
  Animated.decay(position, {   // coast to a stop
    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
    deceleration: 0.997,
  }),
  Animated.parallel([          // after decay, in parallel:
    Animated.spring(position, {
      toValue: {x: 0, y: 0}    // return to start
    }),
    Animated.timing(twirl, {   // and twirl
      toValue: 360,
    }),
  ]),
];
// ...
<SideMenu animationQueue={queue}/>

right?
And in the background it may be used like this:

updatePosition() {
  // this.sideMenu.setNativeProps({ left: this.left, });
  Animated.queue(this.prop.animationQueue).start();
}

where this.state.left = Animated.Value(0);?

from react-native-side-menu.

Kureev avatar Kureev commented on July 3, 2024

Should be solved in 0.12.1

from react-native-side-menu.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.