I'm learning React+Redux and I don't understand the proper way of doing the animations. Lets speak by example:
For instance, I have a list and I would like to remove items on click. That's super easy if I have no animation effects there: dispatch REMOVE_ITEM action on click, reducer removes the item from the store and react re-renders html.
Let's add an animation of deleting the line item on click. So, when user clicks on an item I want to run a fancy effect of line item removal and... how? I can think of several ways how to do it:
1) On click I dispatch REMOVE_ITEM action, then reducer mark an item as goingToBeDeleted in Store, then react renders that element with a class of .fancy-dissolve-animation and I run a timer to dispatch the second action REMOVE_ITEM_COMPLETED. I don't like this idea, because it's still unclear how to add JS animations here (for example, with TweenMax) and I run a JS timer to re-render when CSS animation ends. Doesn't sound good.
2) I dispatch ITEM_REMOVE_PROGRESS actions with an interval of ~30ms, and store holds some "value" which represents the current state of animation. I don't like it too, as it would require me to copy the store ~120 times for ~2 seconds of animation (say, I want smooth 60 fps animation) and that's simply a waste of memory.
3) Make an animation and dispatch REMOVE_ITEM only after animation finishes. That's the most appropriate way I can think of, but still I'd like to have things changed in store right after user makes the action. For example, animation may take longer than few seconds and REMOVE_ITEM might sync with a backend – there's no reason to wait animation finish to make a backend API call.
Thanks for reading – any suggestions?
React has a great solution to this problem in the ReactCSSTransitionGroup helper class (see https://facebook.github.io/react/docs/animation.html). With this option, React takes care of it for you, by keeping the DOM state for the child as it was at the last render. You simply wrap your items in a ReactCSSTransitionGroup object. This keeps track of its children, and when it is rendered with a child removed, instead of rendering without the child, it renders with the child, but adds a CSS class to the child (which you can use to trigger a CSS animation, or you can just use CSS transitions for simplicity). Then, after a timeout (configured as a prop passed to ReactCSSTransitionGroup), it will re-render again, with the child removed from the DOM.
To use ReactCSSTransitionGroup, you'll need to npm install react-addons-css-transition-group, and then require/import 'react-addons-css-transition-group'. The animation docs give more detailed information.
One thing to remember - make sure the children have unique, unchanging keys. Just using the index as the key will make it behave incorrectly.
Instant actions are problematic in redux which saves state, so if we send action and it will change store then this change in store is available in next states, so We can have situation where animation is showing over and over because in store such parameter was set.
My solution for redux instant actions is to add some id like ( Action example code ):
{
type:"SOME_ANIMATION",
id: new Date().getTime() //we get timestamp of animation init
}
Next in component which runs animations save last animation id and if its match don't do animation. I use component state so for example ( Component code):
componentDidUpdate (){
if (this.lastAnimationId===this.props.animation.id)
return; //the same animation id so do not do anything
//here setState or do animation because it is new one
this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation
}
Thanks id we can have only one action without actions which are reversing the state. Reversing actions after timeout can cause problems because if other action ( which is connected with component ) will be send before reverse action then animation can start again.
Minuses of proposed by me approach are that animation data exists in state, but exists also animation id which give us information about it. So we can say that store saves last dispatched animation.
Related
TL;DR: In a Laravel + InertiaJS + Vue 3 developed application, how can I achieve to have a transition between "pages" loaded within a persistent layout <main> section - for example, have that section animate (say, fade out) before loading the next page, then animate (fade) that new page in - when using standard Inertia routing for navigation? I have managed to do it on entering/showing the page, but have found no way to animate before navigation happens.
LONG(ish): The Way I'm trying to do it
Let's assume there is an application (developed with Laravel + InertiaJS + Vue 3).
I have an element in the markup of an Inertia persistent layout that is conditionally shown if a value is true (v-if="shouldAnimate") that is initially set to false when declared, and when onMounted fires, it sets that value to true which in turn triggers the animation to run (doesn't really matter how the animation works, but just in case, I have options to use either GSAP or anime.js).
Up to this point, all is good: every time I navigate to a page (using Inertia-adequate methods such as the Link component) the animation triggers and I am a happy guy.
BUT: I would very much like to be able to play another animation (the reverse of the previous one) before, say, navigation to the next page occurs. I have tried almost everything I can think of and have not been successful. Here's what got the closest to what I need:
I tried hooking into the InertiaJS event Inertia.on('before', ...): effectively, the event fires up right before navigation (checked with some good-old console log), so I tried firing up the animation at this point, only to find out that the Inertia event looks like it is destroying the page immediately before the animation has had time to play; no problem: I'll just event.preventDefault() it, run the animation and THEN, using a setTimeout timed to the length of the animation (300ms) I'll resume navigation, say, by using Inertia.visit.
Doesn't work. Somehow, the default behaviour is prevented (stops the navigation), the animation plays back, but when it comes to the "resume navigation part" I have had mixed results depending on what I use:
Code looks roughly like this:
let removeListener = Inertia.on('before', (event) => {
event.preventDefault()
// Play animation here
setTimeout(() => {
// SOME INERTIA ACTION DESCRIBED BELOW
}, 300)
})
Independently of whether I use Inertia.get(event.detail.visit.url) or Inertia.visit(event.detail.visit.url) what happens is the animation runs its course, and then the timer runs out and this whole code RUNS AGAIN AND AGAIN in intervals equal to the timer. I also tried to do this using the complete event of the animation to trigger the navigation but it behaves the same.
I know this is related to me being an ignorant about how both Inertia and events work, and I am sure there is a proper (correct? right?) way to achieve what I need, but either I have failed in using the correct terms to look for it, or I am approaching this the wrong way. Hopefully this information is enough to explain my issue.
Any help or pointer would be GREATLY appreciated, so thanks in advance.
I need to implement a behavior:
when element clicked - one thing happens
but when it's clicked and held for more than one second, something else happens (e.g element becomes draggable) and then the first event never fires
I think I know how to catch click&hold type of events, but how to distinguish between first and second?
Can you show me how to do that using this jsbin. I already made the "click, hold & drag" part, except that it is still firing the 'click' event after dragging the element and it shouldn't.
again: element clicked - one event, click and hold - element is draggable (even after mouse up) and when clicked again it's back to normal (undraggable) state.
I am not looking for a trivial solution, it has to be built using Rx.Observable or at least Bacon's streamEvent object
Thank you
I think you were pretty close with your solution, but probably it is not possible to elegantly achieve what you want while using the browser's built-in click event.
HERE is my attempt to tackle your problem.
The main idea is to define your own click streams like so:
var clicks = downs.flatMapLatest(function(){
return ups.takeUntil(Rx.Observable.timer(250));
});
var longDownsStart = downs.flatMapLatest(function(){
return Rx.Observable.timer(1000).takeUntil(ups);
});
In case of clicks we wait max 250 ms after a mouse down for a mouse-up; in case of the latter we generate the event only if there was no mouse-up within 1000 ms.
There might be some corner cases in which the code does not work as intended.
Here is my proposed solution (with Bacon.js).
I have a NSBrowser that needs to display data that comes from a REST API. Sometimes this API takes a while to return results, so it would be nice to handle the network traffic in the background (lazy fetching). Sometimes a subtree needs to be refresh to reflect server side changes.
I've tried two different approaches:
Using NSBrowserDelegate. When [browserDelegate browser:child:ofItem:] or similar function ends up requesting data that is not yet loaded, I return 0 count and kick off background processing. When the data becomes available I have the columns reloaded (not very efficient, messes with the user's selection as new data comes in).
Using NSTreeController. I got this to work well using a blocking/synchronous approach. However, whenever I update the model, NSBrowser resets the tree and moves the selection up to the parent. I've tried [obj mutableArrayValueForKey] approach. I've tried the [treecontroller insertObject:atArrangedObjectIndexPath:] approach. I've toggled "preserve selections" flag. I've toggled "select on insert". No matter what I do, NSBrowser doesn't want to cleanly update only the relevant subtree.
Bottom line: what is the best practice for asynchronously loading data into an NSBrowser?
I have in my model an object, that when modified requires a large number of other objects to recompute values based on those changes.
The way this is currently set up, is that this one object can only be modified in one place. This is a sheet with a Cancel and an OK button. Once the user commits the change, the sheet shows a progress bar and starts processing the objects affected by the change. The presentation and dismissal of the sheet are wrapped in a NSUndoManager group. The user may undo all changes in one pass after dismissing the sheet.
What bothers me is that I keep thinking that all this should happen at the business level. Rather than at the controller level. I.e. I should be able to modify my business object any place in the UI and code and have it trigger the necessary computations.
So I would set up KVO to watch my object and trigger the long running operation when needed. Once I go down that path, I start hitting walls.
How do I coalesce changes? My object has several attributes. I don't want to start a computation when the first attribute is changed and the second is likely to change next. Basically I need an edit sheet and some control point to commit all changes at once.
How do I add a UI to this long running operation? I could have an NSOperationQueue attached to the NSManagedObjectContext and have my window controller observe that. When the queue is not empty, I would pop up a sheet with a progress bar monitoring the current operation.
How can I implement Undo/Redo support? If I delay recomputation to an operation running after the fact, I cannot imagine how to undo the initial change and the propagated once at the same time. I can only imagine undoing the original change and having that trigger another reevaluation of all other object.
In short:
What is the best practice for such dependancies?
Is the propagation a job for the model layer or the control layer?
I believe I came up with a solution:
the center-piece model object watches itself for changes
on change, it creates or amends a ToDo object
the controller watches for new ToDo objects
the controller dequeues the ToDo, presents a progress-bar and performs the operation
Say you're building a Tetris game. As any proper programmer, you have your view logic on one side, and your business logic on the other side; probably a full-on MVC going on.
When the model sends its update(), the view redraws itself, as expected.
But then... if you wanted to add, say, an animation to vanish a line, how would you implement that in the view?
Make any assumptions you want---excepting that "Everything is properly encapsulated".
Personally, I would separate draw the screen as often as possible, even if there was no update of the block position. So I would have a loop somewhere with an "update" and a "render" part. Update plays the ball to the logic which does or does not any update of positions and/or block removal. Render plays the ball to the graphics part, which draws the blocks where they should be.
Now if there are lines to erase, the logic knows and can mark those lines to be removed. I assume here, that every piece consists of 4 single blocks and any of these blocks is a single object. Now when this block has the "die"-flag set, you may take some render-parts to vanish the block (let's say, 500ms to explode). After this time, the object may be disposed and the block a line above falls down. Why 500ms? Well, you should definitely use time-based movement as this keeps the game speed the same on different computers.
Btw, there are already so called game engines which provide such an update-render-loop. For example XNA, if you go the .NET line. You may also code your own engine but beware, it's not an easy task and it's very time consuming. I did this once and don't expect it to be an engine like the Source Engine ;-)
Most games execute a loop that constantly redraws the view of the game as fast as possible, rather than waiting for a change in the model state and then refreshing the view.
If you like the model view pattern, then it might work well for the view to continue to draw some types of objects after they are removed from the model, fading them out over a few milliseconds.
Another approach would be to combine class MVC with something like differential execution - the 'view' is a model of what is presented, but the drawing code compares the stream of events the 'view' creates with the stream from the previous rendering. So if in one stream there's a line, and the next there isn't, the drawing code can animate the difference. This allows the drawing to be abstracted away from the view . Frequently the 'view' in MVC is a collection of widgets, rather than being something which draws the display directly, so you end up with nested MVC hierarchies anyway: the application is MVC ( data model, view objects, app controller ), where the view object has a collection of widgets each of which is MVC ( widget state (eg button pressed ), look and feel/toolkit binding, mapping of toolkit events -> widget state ).
I've often wondered this myself.
My own thoughts have been along this line:
1) The view is given the state of the blocks (shape, yada-yada), but with extra "transitional" data:
2) The fact that a line must be removed is encoded in the state, NOT computed in the view.
3) The view knows how to draw transitions now:
No change: state is the same for this particular block
Change from "falling" to "locked": state is "locked in" (by a dropping block)
Change from "locked" to "remove": state is "removed" (by a line completion)
Change from "falling" to "remove": state is "removed", but old state was "falling"
Its interesting to think of a game as an MVC. Thats a perspective I've never taken (for some odd reason), but definitely an intriguing one that makes a lot of sense. Assuming you do implement your Tetris game with an MVC, I think there are two things you might want to take into account in regards to communication between your controller and your view: There is state, and there are events.
Your controller is obviously the central point of interaction for the user. When they issue keyboard commands, your controller will interpret them, and make the appropriate state adjustments. However, sometimes the game will enter a state that coincides with a particular event...such as filling a line with blocks that should now be removed.
Scoregraphic has given you a great foundation. Your view should operate on a fixed cycle to maintain consistent speed across computers. But in addition to updating the screen to render new state, it should also have a queue of events that it can perform animations in response to. In the case of filling lines in Tetris, your controller could issue strongly typed event objects that derive from some kind of base event type into the view event queue, which could then be used by the view to perform the appropriate animated responses.