Animate on callback
See original GitHub issueI am playing around with this package and I came with an issue that animations do not get started on callback.
I think I am doing this wrong entirely, but here’s the idea of what I am trying to achieve and I am seeking for help or ideas how to solve this.
I have n number of points along y axis. I get them by measuring views with .measure function provided by react-native. When my draggable box gets dragged to some dropzone I want it to snap to the center of that dropzone.
code for my y translation
this._transY = cond(
eq(this.state, State.ACTIVE),
[
set(this.transY, addY),
set(this.prevDragY, this.dragY),
this.transY
],
[
cond(eq(this.state, State.END), call([addX, absY], this.onDrop)),
set(this.prevDragY, 0),
this.transY
]
);
my onDrop callback
onDrop([x, y]) {
let id = null;
// just identifying on which dropzone draggable was dropped
for(let i = 0; i < this.props.dropzones.length; i++) {
let item = this.props.dropzones[i];
if( y < item.yPage+item.height && y > item.yPage) {
id = i;
break;
}
}
if(id !== null) {
console.log(this.props.dropzones[id]);
// this if gets called
// I identify my dropzone correctly and I have correct coordinates for it here
// but this block never gets executed and my draggable never animates
this._transY = block(
[
debug('active', this._transY),
//these sets might not be correct, please don't mind them
set(this.transY, add(this.transY, sub(this.props.dropzones[id].yPage, add(this.prevDragY, this.dragY)))),
set(this.prevDragY, add(this.transY, sub(this.props.dropzones[id].yPage, add(this.prevDragY, this.dragY)))),
this.transY,
]);
}
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
.animate() | jQuery API Documentation
Animate all paragraphs and execute a callback function when the animation is complete. The first argument is an object of CSS properties, the...
Read more >jquery - animate's callback function (complete) executed at start?
I get both alerts before the animation starts!? I want the complete function to start after the animation has ended. Any thoughts?
Read more >withAnimation completion callback with animatable modifiers
A custom AnimatableModifier implementation allows us to get a callback once an animation of a specific property completes. This is in most cases ......
Read more >Window.requestAnimationFrame() - Web APIs | MDN
The function to call when it's time to update your animation for the next repaint. The callback function is passed one single argument,...
Read more >#12: Callback Functions | CSS-Tricks - CSS-Tricks
They are typically an additional parameter that we pass to the method. In the case of animation, we pass a function as the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for the quick reply .
Actually
this.modal
was undefined , cause runSpring was already defined out of the class ( my bad).Your suggestion above worked , prior to this : I was not using the declarative power of the react-native-reanimated. so thanks again.
and also you are right about Interpolation , That is the correct way.
@Kida007 No problem, my pleasure.