I'm using the vue-fireworks component (https://github.com/dampion/Vue-fireworks) to display an HTML5 Canvas animation of fireworks. It starts when the component is mounted which is fine. But I can't figure out how to make it stop. I need to stop the fireworks after a button click. I'd prefer that no more fire off and any that are onscreen when the button is clicked are allowed to continue to their conclusion.
Are you able to modify the source code of the Fireworks component?
I can see that it has a data prop of auto that is set to true.
If you could change that to a straight forward prop, then by changing that value to false it would stop adding more fireworks and let the other animations finish.
<Firework :boxHeight="'100%'" :boxWidth="'100%'" :auto="false"/>
Haven't tested myself, just an assumption reading through the code. Hope it helps.
Related
I was trying to implement viewport. The thing I was doing is that I render in one viewport, than I call SDL_RenderPresent to update screen and then again I implemented viewport. The whole process was being controlled by key pressing, meaning by tapping c it used to render first viewport and then next one. But calling SDL_RenderPresent after everytime rendering viewport was clearing up screen. Why is this happening? And can someone tell me that if SDL_Renderer works like a pen/brush with what we can draw things? If not, then how does it work?
I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.
Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.
Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.
I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).
It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.
Here's the problem: I have a React-Native/Redux app. I need to make sure I can lock the screen (display a modal, really) after X minutes of app inactivity (theoretically someone may have their screen "always on", so I can't rely on the screen turning itself off).
My proposed solution: I want to detect when any touch event happens. I don't want to interfere with them or do anything about it other than reset a setTimeout. But I just want to know when the screen is touched at all.
Displaying the modal itself isn't an issue and is already working. I also have it display the modal if the app leaves the foreground for any reason. I just need the timeout.
I've tried using a TouchableWthoutFeedback that wraps the whole UI and that sorta works, but it doesn't receive any event when a Touchable is farther down the component tree and handles the event. But I've also only used onPressIn and I'm unsure if anything else on it will work as needed. I've looked briefly at PanResponder but that looks a bit more complex than I might need? Not sure on that one, yet.
I'm open to other suggestions, but the only other thing I can think of is having literally every other action in the app (even ones I haven't created yet) send an dispatch up the redux flagpole, and that seems very heavy-handed and prone to error.
is this feasible? What are my options if it's not?
I found the solution. It's to add a onStartShouldSetResponderCapture callback as a prop on a containing View. I can return false in this callback but still notice all the touch events that come through. The Capture portion is important because it gives you access to the event before a "real" touchable can get to it.
Then, in the callback, I just clear and re-create the timer.
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
I have a button and when the user touches down and holds a popup appears. However, when the user releases his thumb before the pop animation finishes I'd like the animation to stop where it is and autoreverse to the initial position. How can I accomplish this?
Currently I'm simply using UIViews -animateWithDuration:animations:completion:. Do I have to set the animations explicitly in this case?
I've already tried reading the current state from the presentationLayer properties, but that somehow didn't work.
You can start the second animation using the UIViewAnimationOptionBeginFromCurrentState option. This will stop the first animation if it's still running.