suppose I have an array of data which in this context is store names. I need to animate them in a way like first one store enters about 10px from above to the box with scale of 0.5 and after a short delay it continues the get a bit of center and get bigger sanctimoniously (parallel) and after another delay it goes down of the box and desperate. like below:
so far I achieve this. and what I need is the next store to come after this one and wait for getting bigger, something like below:
the little above waits for the big one to drop and then start the same animation.
here is my code so far:
const TrackOrder = () => {
const [listData, setListData] = useState([
{
id: 1,
storeName: 'papa jones besiktas',
},
{
id: 2,
storeName: 'levent store',
},
{
id: 3,
storeName: 'sariyer store',
},
]);
const {colors} = useTheme();
// let fadeAni = useRef(new Animated.Value(0.2)).current;
let bounceLittleItem = useRef(new Animated.Value(-80)).current;
let bounceBigItem = useRef(new Animated.Value(-100)).current;
let scaleUp = useRef(new Animated.Value(0.5)).current;
const styles = useMemo(
() =>
StyleSheet.create({
mainContainer: {
backgroundColor: colors.CONTRAST_PRIMARY,
height: 100,
borderRadius: 30,
marginHorizontal: `${(100 - GUTTERS.SCREEN_WIDTH_IN_NUMBER) / 2}%`,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'center',
paddingHorizontal: 15,
marginTop: 25,
overflow: 'hidden',
},
orderContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
storeImage: {
width: 45,
height: 45,
backgroundColor: 'yellow',
borderRadius: 40,
marginRight: 20,
},
orderStatusText: {
color: '#fff',
fontFamily: 'BalooPaaji2-SemiBold',
},
storeContainer: {
backgroundColor: '#fff',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 20,
},
storeOneBeforeLastImage: {
width: 25,
height: 25,
backgroundColor: 'yellow',
borderRadius: 40,
// marginRight: 20,
opacity: 0.5,
},
}),
[colors],
);
useEffect(() => {
const inter = setInterval(() => {
let copyArr = [...listData];
let last = copyArr.pop();
copyArr.unshift(last);
setListData(copyArr);
}, 6000);
return () => clearInterval(inter);
}, [listData]);
useEffect(() => {
Animated.timing(bounceBigItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
});
}, [bounceBigItem]);
const runAnimation = useCallback(() => {
Animated.sequence([
Animated.timing(bounceLittleItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
}),
Animated.parallel([
Animated.timing(bounceLittleItem, {
toValue: 20,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(scaleUp, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
]),
Animated.delay(2000),
Animated.timing(bounceLittleItem, {
toValue: 100,
duration: 1000,
useNativeDriver: true,
}),
]).start(() => {
bounceLittleItem.setValue(-80);
scaleUp.setValue(0.5);
runAnimation();
});
}, [bounceLittleItem, scaleUp]);
useEffect(() => runAnimation(), [runAnimation]);
const renderViewItem = useMemo(() => {
if (listData?.length === 0) return;
return listData.map((el, i) => {
return (
<Animated.View
key={el.id}
style={[
styles.orderContainer,
i === 0
? {
transform: [{translateY: bounceLittleItem}, {scale: scaleUp}],
}
: {
transform: [{translateY: bounceBigItem}, {scale: 0.5}],
},
]}
>
<View style={[styles.storeImage]} />
<Text style={styles.orderStatusText}>{el.storeName}</Text>
</Animated.View>
);
});
}, [bounceBigItem, bounceLittleItem, listData, scaleUp, styles.orderContainer, styles.orderStatusText, styles.storeImage]);
return <View style={styles.mainContainer}>{renderViewItem}</View>;
};
so, how can I achieve my desired animation which once again is first come down and as soon as getting bigger next store come down and step on first store footprints? if you have any idea I really appreciate.
I devised a solution that works by firing the animation for every item and applying a delay according to the item's position in the list (index). The changes consist in piling up all items at the top with position: absolute, and each one comes down with a delay. Additionally, I used Animated.loop function since it seems to work more consistently.
import React, {useRef, useEffect, useCallback} from 'react';
import {StyleSheet, View, Text, Animated} from 'react-native';
const Item = ({children, index, len}) => {
let bounceLittleItem = useRef(new Animated.Value(-80)).current;
let scaleUp = useRef(new Animated.Value(0.5)).current;
const runAnimation = useCallback(
delay => {
Animated.sequence([
Animated.delay(delay),
Animated.loop(
Animated.sequence([
Animated.timing(bounceLittleItem, {
toValue: -30,
duration: 2000,
useNativeDriver: true,
}),
Animated.parallel([
Animated.timing(bounceLittleItem, {
toValue: 20,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(scaleUp, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
]),
Animated.delay(1000),
Animated.timing(bounceLittleItem, {
toValue: 100,
duration: 1000,
useNativeDriver: true,
}),
Animated.delay((2 * len - 5) * 1000),
]),
),
]).start();
},
[bounceLittleItem, scaleUp, len],
);
useEffect(() => {
console.log(`running animation ${index}`);
runAnimation(index * 2000);
}, [index, runAnimation]);
return (
<Animated.View
style={[
styles.orderContainer,
{
transform: [{translateY: bounceLittleItem}, {scale: scaleUp}],
},
]}>
{children}
</Animated.View>
);
};
const App = () => {
const listData = [
{
id: 1,
storeName: 'papa jones besiktas',
},
{
id: 2,
storeName: 'levent store',
},
{
id: 3,
storeName: 'sariyer store',
},
];
return (
<View style={styles.mainContainer}>
{listData.map(({id, storeName}, index) => (
<Item key={id} index={index} len={listData.length}>
<View style={[styles.storeImage]} />
<Text style={styles.orderStatusText}>{storeName}</Text>
</Item>
))}
</View>
);
};
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: 'black',
height: 100,
borderRadius: 30,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'center',
paddingHorizontal: 15,
marginTop: 25,
overflow: 'hidden',
},
orderContainer: {
width: '100%',
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
storeImage: {
width: 45,
height: 45,
backgroundColor: 'yellow',
borderRadius: 40,
marginRight: 20,
},
orderStatusText: {
color: '#fff',
fontFamily: 'BalooPaaji2-SemiBold',
},
storeContainer: {
backgroundColor: '#fff',
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 20,
},
storeOneBeforeLastImage: {
width: 25,
height: 25,
backgroundColor: 'yellow',
borderRadius: 40,
// marginRight: 20,
opacity: 0.5,
},
});
export default App;
https://snack.expo.dev/#diedu89/animation-loop
Be aware values are tailored to the duration of the animations and how close you want to run them in "parallel". I came up with the formula (2 * len - 5) for the delay of the next loop by tabulating a set of points and using an online tool to get it
For instance, with a timeline looking like this for the animation during 5000 ms and each one fired with a 2000 difference
start
finish
0
5000
2000
7000
4000
9000
6000
11000
8000
13000
I could determine that for a array with length of 3 I'd need 1000 of delay, for 4 3000, for 5 5000, and so on
length
delay
3
1000
4
3000
5
5000
6
7000
7
9000
Openlayers Draw Interaction
Above is the link to the Openlayers interaction that I'm using. I want to use this interaction to limit users to only draw a north aligned bounding box. Out of the box that's not how the Draw interaction functions. Is there a way to enforce the drawing to be that of a north aligned bounding box? Or is there a means of making the draw interaction behave as the Extent Interaction?
Openlayers Extent Interaction
I'm using the latest version of Openlayers and here is my draw interaction configuration:
const styles = [
new Style({
stroke: new Stroke({
color: '#017e01',
width: 2.25,
}),
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
}),
];
const source = new VectorSource();
const vector = new VectorLayer({
projection: 'ESPG4326',
source,
style: new Style({
fill: new Fill({
color: 'rgba(36, 37, 42, .25)',
}),
stroke: new Stroke({
color: '#017e01',
width: 2,
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: '#017e01',
}),
}),
}),
});
const draw = new Draw({
style: styles,
source,
condition: olEvents.shiftKeyOnly,
type: 'Polygon',
});
I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off.
If I leave it as a default it looks like this:
However I want it to be on the left side and the legend to be next to it.
When I change the position of the chart area:
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
It then looks like this:
For whatever reason it thinks there isn't enough space and it cuts the legend text which is really annoying.
Here is the code I am using:
const pieOptions = {
title: '',
pieHole: 0.6,
slices: [
{
color: '#00A3E0',
},
{
color: '#F2A900',
},
{
color: '#43B02A',
},
{
color: '#DF4661',
},
{
color: '#003865',
},
{
color: '#A15A95',
},
{
color: '#FF6A13',
},
],
legend: {
position: 'right',
alignment: 'end',
textStyle: {
color: '#666',
fontSize: 12,
},
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
fontName: 'inherit',
fontSize: 12,
}
Can anyone advise?
Also if this is not fixable, can you please recommend a chart which supports that and custom colours please?
Thank you in advance!
I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.
I'm not able to align the text to center.
HTML code
<zingchart id="ring" zc-json="data" ></zingchart>
zingchart json data
$scope.data = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "ring",
backgroundColor: "#fff",
legend: {
layout: "x5",
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v $"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
"font-color":"black",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "Total Billed",
values: $scope.billedHours,
backgroundColor: "#97c563",
}, {
text: "Total Budget",
values: $scope.projectRevenue,
backgroundColor: "#f7d347",
}]
};
I'm using this Libary for the very first time, tried different options but nothing happend.
need help from experts, please suggest something.
thanks in advance.
I tried this in my project and this should do the trick, just replace your legend property with this.
If I am right you can also use layout: "center"
legend: {
layout: "2x2", //this should center it on mid
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
To align the legend center you can use the attribute align:center. We have extensive documentation at the following links:
Legend Tutorial
Legend JSON Docs
var myConfig = {
type: 'pie',
plot: {
layout: 'auto'
},
legend: {
layout: "x5",
align: 'center',
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
series: [
{
values: [35]
},
{
values: [25]
},
{
values: [15]
},
{
values: [45]
},
{
values: [75]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>