I figured out how to do a callback function for this type jquery animate method
$("#div1").animate({top: "-=100"}, 2000, function(){alert("hi")});
But I cant seem to figure out how to make a simple alert callback function with this animate() function.
$('#div1').animate({top: "-800"}, {duration: 3000}).animate({left: "-700"},
{duration: 3000, queue: false});
Try this
$('#div1')
.animate({top: "-800"}, {duration: 3000})
.animate({left: "-700"}, {duration: 3000, queue: false, complete: function() {console.log('done');}});
in this case, the the callback function must be part of the options object, like complete: function() { // code here }
Related
I have a problem with runOnJS in my swipe function.
All the time Im gets error:
java.lang.RuntimeException: Tried to synchronously call function {w} from a different thread.
Im gets the error in panGesture function when its called finishAnimation.
Code is here:
https://pastebin.com/YaQs4bN6
You're calling "finishAnimation" from the onEnd callback. That could be a problem, since finishAnimation isn't a worklet.
So you have two options:
finishAnimation can be marked with the "worklet" keyword
const finishAnimation = (swipe_down) => {
"worklet";
// This logger can't be here anymore since it's a JS function
// Logger.bool(swipe_down, { swipe_down });
if (swipe_down) {
offset.value = withTiming(height.value, { duration: 100 }, () =>
runOnJS(props.onSwipeComplete)()
);
} else {
offset.value = withTiming(0, { duration: 200 });
}
};
finishAnimation can be called async on the JS Thread:
runOnJS(finishAnimation)(
e.velocityY > swipeOutVelocity || offset.value > calculateThreshold()
);
Hopefully it's going to work.
As you are using Reanimated 2. you can add the Worklet directive to onSwipeComplete then you can run this function in both UI and JavaScript` threads.
More about worklet here - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/worklets
I have a fade animation in my componentDidUpdate function :
if (prevState.fadeStarting !== this.state.fadeStarting){
const fadestart = new Animated.Value(1);
this.setState(
{fadeStarting: false,animFade:fadestart},
() => {
Animated.timing(
this.state.animFade, {
toValue: 0.0,
duration: 100000000,
}
).start(this.endFade())
}
)
}
I assumed that the endFade method would only be called after the duration expired, but the endFade method is called instantly. Is there any reason that this animation would end early?
Could you mean start(this.endFade) instead?
You mean to pass the callback function, not its result (which is evaluated immediately).
I am trying to figure out when the Animated.spring event has completed so I can update some state.
I have tried this, but finish throws an undefined error here;
Animated.spring(
this.state.pan,
{ toValue: { x: 0, y: -500 } }
).start().finish(
this.setState({
carousel: false, hasNotification: false
})
);
Any other methods for dealing with this?
Thanks
According to the documentation
start takes a completion callback that will be called when the animation is done. If the animation is done because it finished running normally, the completion callback will be invoked with {finished: true}, but if the animation is done because stop was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
So I think this should work:
Animated.spring(this.state.pan, { toValue: { x: 0, y: -500 } }).start(()=>{
this.setState({
carousel: false, hasNotification: false
})
});
You can pass an optional callback:
Animated.spring(
this.state.pan,
{ toValue: { x: 0, y: -500 } }
).start(this.stopAnimation.bind(this))
stopAnimation()
{
this.setState({
carousel: false, hasNotification: false
})
}
I have this script for countdown I wanted it to start as soon as the page loads (ideally i wanted it to run continuously since it is repeating in intervals).
when I call any function such as [startCountdown()] or [ countdown.start($('#countdown_clock').val());] I keep getting the same error [Uncaught ReferenceError: countdown is not defined]
here is the whole function
window.onload = function mainCountdown() {
var countdown = Tock({
countdown: true,
interval: 250,
callback: function () {
// console.log(countdown.lap() / 1000);
$('#countdown_clock').val(countdown.msToTime(countdown.lap()));
// countdown.start($('#countdown_clock').val());
},
complete: function () {
// console.log('end');
// alert("Time's up!");
repeatCountdown();
console.log('alarm');
}
});
$('#startCountdown').on('click', function () {
countdown.start($('#countdown_clock').val());
});
$('#pauseCountdown').on('click', function () {
countdown.pause();
});
$('#stopCountdown').on('click', function () {
countdown.stop();
});
$('#resetCountdown').on('click', function () {
countdown.stop();
$('#countdown_clock').val('00:10');
});
function repeatCountdown() {
countdown.stop();
$('#countdown_clock').val('00:10');
countdown.start($('#countdown_clock').val());
}
function startCountdown(){
countdown.start($('#countdown_clock').val());
}
}
How can I start the countdown without any button events.
Thank you in advance
You seem to have a few syntax issues that might be causing the problem. First, I'd call the window load event like this:
$(window).load(function () {
// functions, etc here
});
Then, inside the window load event, you can create your timer like this:
var countdown = new Tock(...
You were missing the 'var' and 'new' keywords. You might want to revisit the Tock documentation to make sure everything else was correct, too.
is it possible to remove a Listener from an Ext.Panel after the call?
I have a tap-Listener, which I want to remove after calling the first time. I tried many ways to remove the Listener but it's still calling:
registerListeners: function()
{
// this = Ext.Controller
// this.view = Ext.Panel
this.view.on('tap', this.onTap, this, {element: 'body'});
},
unregisterListeners: function(evt, el, o)
{
console.log("Removing Event...");
this.view.el.un('tap', this.onTap, this); // Don't work, on the next tap its still calling
},
onTap: function(evt, el, o)
{
Ext.ControllerManager.get('mycontroller').unregisterListeners();
}
I'm really confused?!? :( Any suggestions?
Yes, you can set the single option in the on/addListener call.
myButton.on('click', function(){
/* do stuff */
}, this, { single : true });
// In your case:
this.view.on('tap', this.onTap, this, {element: 'body', single: true});
Check the docs for addListener on http://dev.sencha.com/deploy/touch/docs/?class=Ext.Component