AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust animations to number of items

Browse Source
This commit is contained in:
Tom Raithel
2017-03-01 21:40:59 +01:00
parent 6d4f1d0c09
commit a92aeac253
5 changed files with 129 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/animation.js
View File

@@ -72,7 +72,7 @@ export const createAnimationRunner = (animations, subscriber) => {
const animationsDuration = getMaxAnimationsDuration(animations);
const animate = (name, animation, stateName, getDelay) => {
const animate = (name, animation) => {
if (animation instanceof Array) {
animation.map((a, index) => {
window.requestAnimationFrame(() => {
@@ -81,12 +81,12 @@ export const createAnimationRunner = (animations, subscriber) => {
...state,
[name]: [
...(state[name].slice(0, index)),
a[stateName],
a.stateB,
...(state[name].slice(index + 1, state[name].length)),
],
};
subscriber();
}, getDelay(a))
}, a.delay);
});
});
} else {
@@ -94,10 +94,10 @@ export const createAnimationRunner = (animations, subscriber) => {
window.setTimeout(() => {
state = {
...state,
[name]: animation[stateName],
[name]: animation.stateB,
};
subscriber();
}, getDelay(animation))
}, animation.delay);
});
}
}
@@ -108,27 +108,11 @@ export const createAnimationRunner = (animations, subscriber) => {
},
run() {
Object.entries(animations).forEach(([name, animation]) => {
animate(name, animation, 'stateB', a => a.delay)
})
},
runReverse() {
Object.entries(animations).reverse().forEach(([name, animation]) => {
animate(name, animation, 'stateA', a => animationsDuration - a.delay)
})
animate(name, animation)
});
},
awaitAnimationComplete(callback) {
window.setTimeout(callback, animationsDuration);
},
}
}
// prepare(callback) {
// callback(stateA);
// },
// run(callback) {
// window,requestAnimationFrame(() => {
// window.setTimeout(() => {
// callback(stateB);
// }, delay)
// });
// },

188
js/components/PageItem.js
View File

@@ -6,87 +6,9 @@ import Link from './Link';
import Fadeable from './Fadeable';
import { createAnimation, createAnimationRunner } from '../animation';
import { translate } from '../../common/config';
import { groupByQuadrants } from '../../common/model';
const items = [1, 2]; // TODO use real items
const animationsIn = {
background: createAnimation({
transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
}, {
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
transform: 'translateX(0)',
},
0
),
navHeader: createAnimation({
transform: 'translateX(-40px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
300
),
text: createAnimation({
transform: 'translateY(-20px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateY(0px)',
opacity: '1',
},
600
),
items: items.map((item, i) => (createAnimation({
transform: 'translateX(-40px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
400 + 100 * i
)))
};
const animationsOut = {
background: createAnimation(
animationsIn.background.stateB,
animationsIn.background.stateA,
0
),
navHeader: createAnimation(
animationsIn.navHeader.stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
0
),
text: createAnimation(
animationsIn.text.stateB,
{
transform: 'translateY(20px)',
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
opacity: '0',
},
0
),
items: items.map((item, i) => (createAnimation(
animationsIn.items[i].stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
100 + 100 * i
)))
};
const setAnimations = (state, animations) => ({
...state,
animations,
@@ -96,8 +18,87 @@ class PageItem extends React.Component {
constructor(props) {
super(props);
const itemsInRing = this.getItemsInRing(props);
this.animationsIn = {
background: createAnimation({
transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
}, {
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
transform: 'translateX(0)',
},
0
),
navHeader: createAnimation({
transform: 'translateX(-40px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
300
),
text: createAnimation({
transform: 'translateY(-20px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateY(0px)',
opacity: '1',
},
600
),
items: props.items.map((item, i) => (createAnimation({
transform: 'translateX(-40px)',
opacity: '0',
}, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1',
},
400 + 100 * i
)))
};
this.animationsOut = {
background: createAnimation(
this.animationsIn.background.stateB,
this.animationsIn.background.stateA,
0
),
navHeader: createAnimation(
this.animationsIn.navHeader.stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
0
),
text: createAnimation(
this.animationsIn.text.stateB,
{
transform: 'translateY(20px)',
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
opacity: '0',
},
0
),
items: itemsInRing.map((item, i) => (createAnimation(
this.animationsIn.items[i].stateB,
{
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(40px)',
opacity: '0',
},
100 + 100 * i
)))
};
if (props.leaving) { // entering from an other page
this.state = setAnimations({}, createAnimationRunner(animationsIn).getState());
this.state = setAnimations({}, createAnimationRunner(this.animationsIn).getState());
} else { // Hard refresh
this.state = {};
}
@@ -105,12 +106,12 @@ class PageItem extends React.Component {
componentWillReceiveProps({ leaving }) {
if (!this.props.leaving && leaving) { // page will be left
this.animationRunner = createAnimationRunner(animationsOut, this.handleAnimationsUpdate);
this.animationRunner = createAnimationRunner(this.animationsOut, this.handleAnimationsUpdate);
this.animationRunner.run();
this.animationRunner.awaitAnimationComplete(this.props.onLeave);
}
if (this.props.leaving && !leaving) { // page is entered
this.animationRunner = createAnimationRunner(animationsIn, this.handleAnimationsUpdate);
this.animationRunner = createAnimationRunner(this.animationsIn, this.handleAnimationsUpdate);
this.animationRunner.run();
}
}
@@ -132,21 +133,28 @@ class PageItem extends React.Component {
return this.state.animations[name];
};
getItem = (props) => {
const [quadrantName, itemName] = props.pageName.split('/');
const item = props.items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
return item;
}
getItemsInRing = (props) => {
const item = this.getItem(props);
const itemsInRing = groupByQuadrants(props.items)[item.quadrant][item.ring];
return itemsInRing;
};
render() {
const { leaving, onLeave, pageName, items } = this.props;
const [quadrantName, itemName] = pageName.split('/');
const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring];
// console.log(this.getAnimationState('items'));
const item = this.getItem(this.props);
const itemsInRing = this.getItemsInRing(this.props);
return (
<div>
<div className="item-page">
<div className="item-page__nav">
<div className="item-page__nav__inner">
<div className="item-page__header" style={this.getAnimationState('navHeader')}>
<h3 className="headline">Languages &amp; Frameworks</h3>
<h3 className="headline">{translate(item.quadrant)}</h3>
</div>
<ItemList

20
js/components/Router.js
View File

@@ -37,11 +37,21 @@ class Router extends React.Component {
}
componentWillReceiveProps({ pageName }) {
this.setState({
...this.state,
nextPageName: pageName,
leaving: true,
});
const leaving = getPageByName(this.props.items, pageName) !== getPageByName(this.props.items, this.state.pageName);
if (leaving) {
this.setState({
...this.state,
nextPageName: pageName,
leaving: true,
});
} else {
// stay on same page
this.setState({
...this.state,
pageName,
});
}
}
handlePageLeave = () => {

8
radar/2017-03-01/vue1231.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: "Flow"
ring: assess
quadrant: languages-and-frameworks
---
Irgendwas über flow...

2
styles/base.css
View File

@@ -1,7 +1,7 @@
:root {
--color-gray-dark: #475157;
--color-gray-dark-alt: #4F585E;
--color-gray-dark-alt2: #525C63;
--color-gray-dark-alt2: #434D53;
--color-gray-normal: #A1A6AA;
--color-gray-light: #7D878D;