react-native repeat animation
I searched how to implement a repeated animation ,and I found this.
//this.state.animatedStartValue = 0;
function cycleAnimation() {
Animated.sequence([
Animated.timing(this.state.animatedStartValue, {
toValue: 1,
duration: 500,
delay: 1000
}),
Animated.timing(this.state.animatedStartValue, {
toValue: 0,
duration: 500
})
]).start(event => {
if (event.finished) {
cycleAnimation();
}
});
}
It do works ,but when I use it in my project, I found that this solution will conflict with InteractionManager.runAfterInteractions, which is usually used to do something after animation.
I can use setTimeOut and so on to avoid this, but I want to ask ,is there any better solution to repeat animation , or to avoid this conflict?
use param {isInteraction: false }can avoid this problem.
//this.state.animatedStartValue = 0;
function cycleAnimation() {
Animated.sequence([
Animated.timing(this.state.animatedStartValue, {
toValue: 1,
duration: 500,
delay: 1000,
isInteraction: false,
}),
Animated.timing(this.state.animatedStartValue, {
toValue: 0,
duration: 500
})
]).start(event => {
if (event.finished) {
cycleAnimation();
}
});
}
React-native introduce new Animated API, I want to make a loop animation such as a bubble scale up then scale down and repeat that progress.
However I can not figure it out. I've tried write some code like below
class TestProject extends React.Component {
constructor(): void {
super();
this.state = {
bounceValue: new Animated.Value(0),
v: 1,
};
}
componentDidMount() {
this.state.bounceValue.setValue(1.5);
let animation = Animated.timing(this.state.bounceValue, {
toValue: this.state.v,
});
setInterval(() => {
animation.stop();
if (this.state.flag) {
this.state.v = 0.5;
this.state.bounceValue.setValue(0.5);
}
else {
this.state.v = 1.5;
this.state.bounceValue.setValue(1.5);
}
animation.start();
}, 5000);
}
render(): ReactElement {
return (
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={{uri: 'http://image142-c.poco.cn/best_pocoers/20130517/91062013051716553599334223.jpg'}}
/>
<Animated.Text
style={[
styles.test,
{transform: [
{scale: this.state.bounceValue},
],}
]
}>
haha
</Animated.Text>
</View>
);
}
}
but not works very well.
Any suggestion will be appreciate.
There's now loop animation available:
Animated.loop(
Animated.sequence([
Animated.timing(this.state.animatedStartValue, {
toValue: 1,
duration: 500,
delay: 1000
}),
Animated.timing(this.state.animatedStartValue, {
toValue: 0,
duration: 500
})
]),
{
iterations: 4
}
).start()
I use the sequence method to pass an array of animations to cycle and then repeat the function.
//this.state.animatedStartValue = 0;
function cycleAnimation() {
Animated.sequence([
Animated.timing(this.state.animatedStartValue, {
toValue: 1,
duration: 500,
delay: 1000
}),
Animated.timing(this.state.animatedStartValue, {
toValue: 0,
duration: 500
})
]).start(() => {
cycleAnimation();
});
}
If I'm toggling that animation on it's own it will fade in/out, however I layer it on top of a base to mimic an active state or hotspot-style button
<TouchableOpacity>
<Animated.Image
source={activeImageSource}
style={this.state.animatedStartValue}}
/>
<Image source={nonActiveImageSource}
/>
</TouchableOpacity>
React Native Sequence Documentation
improved version of #bcomerford answer
//this.state.animatedStartValue = 0;
function cycleAnimation() {
Animated.sequence([
Animated.timing(this.state.animatedStartValue, {
toValue: 1,
duration: 500,
delay: 1000
}),
Animated.timing(this.state.animatedStartValue, {
toValue: 0,
duration: 500
})
]).start(event => {
if (event.finished) {
cycleAnimation();
}
});
}
Try something like this:
componentDidMount() {
this.bootAnimation();
}
bootAnimation() {
this.animation = Animated.loop(
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000
})
).start();
}
It seems that 'looping' is not supported by the Animated api for now.
I managed to do that by start the animation again when it finished.
startAnimation() {
Animated.timing(this._animatedValue, {
toValue: 100,
duration: 1000,
}).start(() => {
this.startAnimation();
});
}
Looking forward to a better solution...
You can set another animation then call the animation again:
An example I did to fade text in and out:
textAnimate: function() {
Animated.timing(
this.state.textOpacity,
{
toValue: 0.3,
duration: 500,
}
).start(() => {
Animated.timing(
this.state.textOpacity,
{
toValue: 1,
duration: 500,
}
).start(() => {
this.textAnimate();
});
});
},
componentDidMount: function() {
this.state.textOpacity.setValue(1)
this.textAnimate();
},
Not sure if it's hacky, but I use this:
Animated.spring(this.state.rotation, {
toValue: 5,
stiffness: 220, // the higher value, the faster the animation
damping: 0.000001, // never stop wiggle wiggle wiggle
}).start();
It's creating spring animation that will never (technically, for a very very very long time) stop waving.
For most of my cases it was enough. Also it has great performance as it does not require any JS tread action ever during animation.
If eventually you'd like to stop it gracefully:
Animated.spring(this.state.rotation, {
toValue: 0,
stiffness: 220, // the higher value, the faster the animation
damping: 10, // never stop wiggle wiggle wiggle
}).start();
And it'll nicely 'slow down' until it stops.
Here's another example for an infinite animation using hooks and iterations set to "infinity". Avoids the use of the recursion in previous answers which sometimes led to funky behaviour during e2e testing for us.
const rotation = React.useRef(new Animated.Value(0)).current;
function runAnimation() {
return Animated.loop(
Animated.timing(rotation, {
toValue: 1,
duration: 1200,
easing: Easing.linear,
useNativeDriver: true,
}),
{resetBeforeIteration: true, iterations: Number.MAX_SAFE_INTEGER},
);
}
React.useEffect(() => {
const animation = runAnimation();
return () => animation.stop();
}, []);
Was wondering if you guys can point me in the right direction, my brain's a bit fried at the moment from pulling an all-nighter.
I'm trying to achieve what should be a relatively easy task using the Waypoints plugin that adds a class to a div when in view that switches it to full opacity. When the user continues to scroll down (or up), that class is faded out by removing the class which is then applied to the next div in view.
I found a site that achieves the desired effect I'm looking for here:
http://www.araujoestate.com/pages/the-land.html
I believe the answer lies in the "Above" and "Below" callbacks?
Thanks for any input on this one.
UPDATED
I developed the following JSFiddle:
http://jsfiddle.net/nbgdzspy/2/
I'm producing the desired effect I was looking for, but was wondering if there's a more cleaner way to approach the code... Seems rather clunky.
$('#test1').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test2").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
$('#test2').waypoint(function(direction) {
if (direction === 'down') {
$("#test1").removeClass("waypoint-here");
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test3").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
I think I found a rather simple solution to my problem above... Amazing what some fresh air can do.
Here's the code I plan on implementing:
$(function() {
$('.waypoint').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
$(this).prev().removeClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$(this).next().removeClass("waypoint-here");
}
}, {
offset: '0'
});
});
You can see it in action here:
http://jsfiddle.net/nbgdzspy/6/
I have a very simple Crafty.js script working in Chrome.
in my component file I have this component:
Crafty.c('PlayerCharacter', {
init: function() {
var playerRef = this;
playerRef.bind("KeyDown", function(e)
{
if (playerRef.isDown('LEFT_ARROW')) {
playerRef.x=playerRef.x-16;
myPlayer.sendMessage("LEFT");
} else if (playerRef.isDown('RIGHT_ARROW')) {
playerRef.x=playerRef.x+16;
myPlayer.sendMessage("RIGHT");
} else if (playerRef.isDown('UP_ARROW')) {
playerRef.y=playerRef.y-16;
myPlayer.sendMessage("UP");
} else if (playerRef.isDown('DOWN_ARROW')) {
playerRef.y=playerRef.y+16;
myPlayer.sendMessage("DOWN");
}
});
},
});
And then in my start function of the game, I have :
Crafty.e("2D, DOM, Color, Keyboard, Mouse, PlayerCharacter")
.attr({x: 20*16, y: 20*16, w: 16, h: 16})
.color('rgb(255,0,0)');
As mentioned the Player Character displays and moves as expected in Chrome, however in Firefox it simply displays initially and does not move. There are no errors generated.
If anyone has any ideas or ideas on how to debug this (currently using Firebug, with limited success).
BTW: the following alternate code also works in Chrome and not in Firefox
Crafty.c('Actor', {
init: function() {
this.requires('2D, Canvas, Grid');
},
});
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Fourway, Color')
.fourway(4)
.color('rgb(20, 75, 40)');
}
});
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });