Now as you can see on each click I trigger the animation but just one circle
drawCircle(ctx, x, y, changeInRadii, changeInOpacity)
My goal is to implement this with vdux and add multiple circles. The best way (I thought) is to save all the "ripple circles" in the redux local state. So onClick I need to add a ripple effect.
const addRipple = createAction('ADD_RIPPLE')
const removeRipple = createAction('REMOVE_RIPPLE')
const initialState = () => ({
ripples: []
})
const reducer = combineActions({
ripples: handleAction({
[addRipple]: (state, action) => ([ ...state, action.payload ])
[removeRipple]: (state, action) => ...
})
})
After the animation finishes I also need to remove the ripple effect again from the array. So I need a way to dispatch an action.
// in the animate function like above
if (changeInRadii <= scaleRatio ) requestAnimationFrame(loop)
// change to
if (changeInRadii <= scaleRatio ) {
requestAnimationFrame(loop)
} else {
// dispatch to remove?
dispatch(local(removeRipple()))
}
EDIT2: This kind of depends on what you need to actually do in your event handlers. I see that you're saving the value of canvas inside your render closure. What do you intend to do with it there?
I actually get the 2d context and setting the width dynamically. The context needs to be set in the animation loop.
const width = canvas.width = canvas.offsetWidth
const height = canvas.height = canvas.offsetHeight
const ctx = canvas.getContext('2d')
There a couple of things that I wanted to achieve and solve with vdux
- The
requestAnimationFrame
should stop if no circles are currently animating
- There should always ever be one
requestAnimationFrame
running per component
- Elegant way to manage the state of the current animations
So thats where I got stuck. If theres <0 ripples added, the requestanimationframe should be running. Then I need to keep pushing in ripple effects and remove then if they are done (750ms passed). How do you solve this with virtex-local
? Again, there are different puzzles which don't fit together to me with this model. I hope this is enough to get the gist of what im trying to achieve and what's the problem here.
Running example of the imperative code:
https://jsfiddle.net/mhg0Lg11/