The documentation of React Native describes LayoutAnimation like so:
Automatically animates views to their new positions when the next
layout happens.
I don't understand why this API is needed when the Animation API already can do this.
Why / when should I use the LayoutAnimation API?
I read about it here, and it says that:
LayoutAnimation works by identifying views by their unique key,
computing their expected position, and relying on the underlying
native framework (CoreAnimation on iOS) to animate the change. Frame
changes are animated as long as the view keeps the same key between
state changes. Opacity and Scale are the only additional properties
supported, but it is possible to add a few more such as
backgroundColor and transformations.
ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast.
As said here:
Use the Animated API and handle all the movements ( which in this case
are simple to be fair ) between the two modes in a relatively
complicated way by having one view move off screen when the other
comes in and vica versa. ( I would explain how but this article is not
about Animated ).
Use the LayoutAnimation API to essentially configure how changes in
the layout are to be handled.
LayoutAnimation handles the way layout changes are handled every time the screen ( or part of it ) is re-rendered. What this means is that every time you call setState in your code and that results in your views changing position LayoutAnimation can be used to animate the way your views move to their new positions. For example in the Login/Logout scenario I have a simple function that toggles a flag that decides whether to show the login view or not.
Related
I have an application that is made using WPF, i have multiple pages and a form that contains a frame, and i load the pages on a frame, and each page has back and next buttons.
what i want to do is to animate the navigation of the pages on the frame in a way when i press Next, the current page slides to the left and the following page slides also to the left and replacing the the current page, and when i press back the current page slides to the right and the previous page slides to the right replacing the current page.
how to do that?
I may be proven wrong here but I don't believe WPF exposes a way to implement this easily. There are methods for overriding existing transition animations in UWP.
For WPF you can handle this one of two ways...
Start the animation of the page sliding out. When the animation is
complete let it fire an event that will then call frame to change
pages.
Have the page offset by default and perform the animation to slide it
in to it's original spot.
or....
Capture the Navigating event of the frame, monitor NavigationMode, call the animations, make the navigation wait or mark e.Handled == true and recall it after with a flag that says it can continue.
Do the same for transitioning in.
Here's the problem; you won't have both pages on the screen at the same time and you'll have to write some fancy transitioning code to make all this work correctly. I would go as far as introducing custom controls with interfaces or DependencyProperties that have the transitioning functions embedded etc.
That said; I have had this problem in the past and to be fair I just gave up on the Frame control and pages and did it all manually. In the end it felt faster, easier to maintain, and I was able to achieve any effect I wanted.
So if you want my honest answer just don't use Frame and do it all manually... (This is speaking for WPF only. UWP has other features and more reasons to use the built in navigation than WPF does.)
Well, I believe the simplest solution would be to drop using Frames and implement your own navigation mechanism using something along the lines of the TransitioningContentControl (so you don't have to implement the transitions from scratch).
Basically, you'd have an list of your controls, an TransitionContentControl and two buttons (back and forward). So all you'd have to do is handle the clicks on the buttons and set the Transition accordingly (eg. when back button is pressed set it to Left and load the previous page).
I want to create a list of switches (or custom controls that handle horizontal pointer movements).
That is easily done by putting those components in a Container using BoxLayout.y as LayoutManager.
But because the components (the horizontally movable Switch or custom components) take a lot of room in the list it is very difficult to scroll the list. This is because all the pointer events are handled by the nested components and none get through to the surrounding Container - the one with the BoxLayout.y.
The natural thing I tried to do was to call the respective pointer...-Methods of the parent Container - which turned out to be a stupid idea - it led to a StackOverflowError.
What I really would like to do was handle the pointer events in both the child and the parent Components for a certain threshold distance on order to determine whether the user wants to scroll horizontally or vertically.
I noticed that with nested BoxLayout.x-Containers nested in a BoxLayout.y-Container this works out of the box. But I haven't been able to grasp how to achieve that with a custom control - and it does not work the the CN1-Switch-Components either.
The question is: How do do this in a reasonable manner? Is it even possible? Or would that require gesture detection which is not (yet) part of Codename One?
This is the default behavior of Codename One. Scrolling takes over and there are biases based on the X/Y axis you use. All of that is built in. As I recall you changed a lot of default behaviors in Codename One, I suggest trying a clean project and seeing how it works e.g. with something like this: https://www.codenameone.com/blog/button-lists.html
I'm creating a MS Paint replica. After a week of messing around with React states, I wanted to go with Redux. The problem I think of is: How can I pair a reducer which must be pure, with a canvas context which basically has its own state (what is drawn on it)? I see two options here:
Do I need to recreate canvas context every time the state changes? If so, I do think this is really redundant practice.
Or can I just carry the context between states and use its methods to draw in reducers as I'd usually do? But this makes my reducers impure as I understand.
Thank you.
I'm assuming the canvas context can't be easily serialized and it's not the "source of truth" in terms of application state (rather an object created by the native browser api). Therefore I'd only use redux to have undo/time travel functionality. Your reducer would only hold a history of drawing actions. Replaying those on an empty canvas should restore the state of the app.
The canvas represents the UI of your application, and shouldn't be kept in the store itself. Since a canvas retains whatever pixels have already been drawn, what you probably need to do is re-execute your drawing logic whenever the store has been updated.
There's a pair of posts out there that demonstrate how to use a Redux store to drive drawing on a canvas as the UI:
A Functional Canvas Approach with Redux, Part 1
A Functional Canvas Approach with Redux, Part 2
I've chosen to store ImageData (getting it via context getImageData method) in Redux store. This keeps the store serializable and immutable. I face some troubles with performance though, because getImageData and putImageData are very slow, so I need to update ImageData in my store as rarely as possible.
I am having a problem with list/scroll views in big screens.
In the application there is a scroll component who queries for more rows when its end is reached. However, when the screen has big enough resolution, the initial query is not enough to generate the scroll bar, and thus, the event is never triggered.
The team agrees that because of the instability of the Dimensions module in React Native, a better solution would involve already implemented abstractions instead of getting the screen's dimension with the mentioned module.
What could be a good solution to the problem? I hope I was clear.
Thanks in advance.
My solution was to query when the 'layout' event was fired. I did this through the 'onLayout' and 'onContentSizeChange' props. They store the heights of the list and the component, which made me able to compare both and query for more data.
Imagine a karaoke player / keyframe animation system / etc. written in qooxdoo. A Player object will have a property to reflect current position. The property will be bound to some GUI control, say slider, so that the user can jump to an arbitrary position. In the same time, position will be gradually updated by the playback mechanism when playing.
The problem is, different logic should be applied in these two cases.
1) If the "position" property is set from outside (for example, the user has clicked a slider), some complex logic applies: we should recompute active verse/line/syllable/pair of keyframes (possibly using binary search) and activate it;
2) If the property has been updated by an iteration of playback mechanism, the logic is very simple: we should only check if the boundary of the next object has been crossed, and advance to it.
In both cases the standard logic (instance check and firing change event) should be invoked. I've been thinking about either bypassing complex "apply" method by setting $$user_position variable directly, or analyzing current call stack and taking different paths depending on that, but both methods seem to be dirty hacks. That's why I'll be thankful for any recommendations on how to implement the said in qooxdoo the Right™ Way®.
I think a common pattern for such a situation is not to burden the property itself with too much functionality (meaning: its apply method). Rather, keep the property rather simple and use it just to record the current position. Then devise methods like 'goto' and 'next' that both update the position property, albeit with different algorithms, as you wrote.