Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format examples with prettier for consistency #78

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+639 −560
Open

Format examples with prettier for consistency #78

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,199 changes: 639 additions & 560 deletions examples/interactive-docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -4,7 +4,11 @@
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Animated</title>
<script>
function invariant(cond) { if (!cond) { throw new Error(arguments); }}
function invariant(cond) {
if (!cond) {
throw new Error(arguments);
}
}
var module = {};
</script>
<script>
@@ -17,7 +21,9 @@
var hasOwnProperty = Object.prototype.hasOwnProperty;
for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
var nextSource = arguments[nextIndex];
if (nextSource == null) { continue; }
if (nextSource == null) {
continue;
}
var from = Object(nextSource);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
@@ -124,125 +130,141 @@
}
</style>
<script>
var TOTAL_EXAMPLES = 0;
function evalLastScript() {
var scripts = document.querySelectorAll('script[type="text/babel"]');
eval(Babel.transform(
scripts[scripts.length - 1].innerText,
{ presets: ['es2015', 'react'] }
).code);
}

function example() {
var scripts = document.getElementsByTagName('script');
var last = scripts[scripts.length - 2];
last.className = 'Example' + (++TOTAL_EXAMPLES);
evalLastScript();
}
var TOTAL_EXAMPLES = 0;
function evalLastScript() {
var scripts = document.querySelectorAll('script[type="text/babel"]');
eval(
Babel.transform(scripts[scripts.length - 1].innerText, {
presets: ['es2015', 'react'],
}).code
);
}

function example() {
var scripts = document.getElementsByTagName('script');
var last = scripts[scripts.length - 2];
last.className = 'Example' + ++TOTAL_EXAMPLES;
evalLastScript();
}
</script>
<script type="text/babel">
window.HorizontalPan = function(anim, config) {
config = config || {};
return {
onMouseDown: function(event) {
anim.stopAnimation(startValue => {
config.onStart && config.onStart();
var startPosition = event.clientX;
var lastTime = Date.now();
var lastPosition = event.clientX;
var velocity = 0;

function updateVelocity(event) {
var now = Date.now();
if (event.clientX === lastPosition || now === lastTime) {
return;
window.HorizontalPan = function(anim, config) {
config = config || {};
return {
onMouseDown: function(event) {
anim.stopAnimation(startValue => {
config.onStart && config.onStart();
var startPosition = event.clientX;
var lastTime = Date.now();
var lastPosition = event.clientX;
var velocity = 0;

function updateVelocity(event) {
var now = Date.now();
if (event.clientX === lastPosition || now === lastTime) {
return;
}
velocity = (event.clientX - lastPosition) / (now - lastTime);
lastTime = now;
lastPosition = event.clientX;
}
velocity = (event.clientX - lastPosition) / (now - lastTime);
lastTime = now;
lastPosition = event.clientX;
}

var moveListener, upListener;
window.addEventListener('mousemove', moveListener = (event) => {
var value = startValue + (event.clientX - startPosition);
anim.setValue(value);
updateVelocity(event);
});
window.addEventListener('mouseup', upListener = (event) => {
updateVelocity(event);
window.removeEventListener('mousemove', moveListener);
window.removeEventListener('mouseup', upListener);
config.onEnd && config.onEnd({velocity});
var moveListener, upListener;
window.addEventListener(
'mousemove',
(moveListener = event => {
var value = startValue + (event.clientX - startPosition);
anim.setValue(value);
updateVelocity(event);
})
);
window.addEventListener(
'mouseup',
(upListener = event => {
updateVelocity(event);
window.removeEventListener('mousemove', moveListener);
window.removeEventListener('mouseup', upListener);
config.onEnd && config.onEnd({ velocity });
})
);
});
});
}
}
};

var EXAMPLE_COUNT = 0;
window.examplify = function(Component) {
if (EXAMPLE_COUNT) {
var previousScript = document.getElementsByClassName('Example' + EXAMPLE_COUNT)[0].innerText;
} else {
var previousScript = `
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0), // ignore
};
},
render: function() {
return (
<Animated.div // ignore
style={{left: this.state.anim}} // ignore
className="circle"
/>
};
};

var EXAMPLE_COUNT = 0;
window.examplify = function(Component) {
if (EXAMPLE_COUNT) {
var previousScript = document.getElementsByClassName(
'Example' + EXAMPLE_COUNT
)[0].innerText;
} else {
var previousScript = `
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0), // ignore
};
},
render: function() {
return (
<Animated.div // ignore
style={{ left: this.state.anim }} // ignore
className="circle"
/>
);
},
})
);
},
}));
`;
}
`;
}

var script = document.getElementsByClassName('Example' + ++EXAMPLE_COUNT)[0];

var previousLines = {};
previousScript.split(/\n/g).forEach(line => { previousLines[line.trim()] = 1; });
var code = document.createElement('div');
script.parentNode.insertBefore(code, script);

var Example = React.createClass({
render() {
return (
<div className="code">
<div className="example">
<button
className="reset"
onClick={() => this.forceUpdate()}>
Reset
</button>
<Component key={Math.random()} />
var script = document.getElementsByClassName('Example' + ++EXAMPLE_COUNT)[0];

var previousLines = {};
previousScript.split(/\n/g).forEach(line => {
previousLines[line.trim()] = 1;
});
var code = document.createElement('div');
script.parentNode.insertBefore(code, script);

var Example = React.createClass({
render() {
const exampleLines = script.innerText
.trim()
.split(/\n/)
.slice(1, -1);
const matchIndentation = exampleLines[0].match(/(^\s*)/);
const indentation = matchIndentation[0];
return (
<div className="code">
<div className="example">
<button className="reset" onClick={() => this.forceUpdate()}>
Reset
</button>
<Component key={Math.random()} />
</div>
<hr />
{exampleLines.map((line, index, arr) => {
const isLastLine = index === arr.length - 1;
return (
<pre
key={index}
className={!previousLines[line.trim()] ? 'highlight' : null}
>
{line.replace(indentation, '')}
{isLastLine ? ';' : ''}
</pre>
);
})}
</div>
<hr />
<pre>{'React.createClass({'}</pre>
{script.innerText
.trim()
.split(/\n/g)
.slice(1, -1)
.map(line =>
<pre
className={!previousLines[line.trim()] && 'highlight'}>
{line}
</pre>
)
}
<pre>{'});'}</pre>
</div>
);
}
})
);
},
});

ReactDOM.render(<Example />, code);
}
ReactDOM.render(<Example />, code);
};
</script><script>evalLastScript();</script>
</head>

@@ -257,21 +279,20 @@ <h2>Animated.Value</h2>
<p>The basic building block of this library is <code>Animated.Value</code>. This is a variable that's going to drive the animation. You use it like a normal value in <code>style</code> attribute. Only animated components such as <code>Animated.div</code> will understand it.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(100),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
/>
);
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(100),
};
},
render: function() {
return (
<Animated.div style={{ left: this.state.anim }} className="circle" />
);
},
})
);
</script><script>example();</script>

<h2>setValue</h2>
@@ -281,26 +302,29 @@ <h2>setValue</h2>
<p>The <code>Animated.div</code> component when rendered tracks which animated values it received. This way, whenever that value changes, we don't need to re-render the entire component, we can directly update the specific style attribute that changed.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
this.state.anim.setValue(400);
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{ left: this.state.anim }}
className="circle"
onClick={this.handleClick}
>
Click
</Animated.div>
);
},
handleClick: function() {
this.state.anim.setValue(400);
},
})
);
</script><script>example();</script>

<h2>Animated.timing</h2>
@@ -310,26 +334,29 @@ <h2>Animated.timing</h2>
<p>On every frame (via <code>requestAnimationFrame</code>), the <code>timing</code> animation is going to figure out the new value based on the current time, update the animated value which in turn is going to update the corresponding DOM node.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.timing(this.state.anim, {toValue: 400}).start();
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{ left: this.state.anim }}
className="circle"
onClick={this.handleClick}
>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.timing(this.state.anim, { toValue: 400 }).start();
},
})
);
</script><script>example();</script>

<h2>Interrupt Animations</h2>
@@ -339,30 +366,33 @@ <h2>Interrupt Animations</h2>
<p>There are multiple challenges to implement this correctly. You need to stop the current animation, grab the current value and restart an animation from there. As this is pretty tedious to do manually, <code>Animated</code> will do that automatically for you.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{transform: [{scale: this.state.anim}]}}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.timing(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.timing(this.state.anim, { toValue: 1 }).start();
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{ transform: [{ scale: this.state.anim }] }}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.timing(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.timing(this.state.anim, { toValue: 1 }).start();
},
})
);
</script><script>example();</script>

<h2>Animated.spring</h2>
@@ -374,30 +404,33 @@ <h2>Animated.spring</h2>
<p>It turns out that this model is useful in a very wide range of animations. I highly recommend you to always start with a <code>spring</code> animation instead of a <code>timing</code> animation. It will make your interface feels much better.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{transform: [{scale: this.state.anim}]}}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.spring(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.spring(this.state.anim, { toValue: 1 }).start();
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
render: function() {
return (
<Animated.div
style={{ transform: [{ scale: this.state.anim }] }}
className="circle"
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
>
Press
</Animated.div>
);
},
handleMouseDown: function() {
Animated.spring(this.state.anim, { toValue: 0.8 }).start();
},
handleMouseUp: function() {
Animated.spring(this.state.anim, { toValue: 1 }).start();
},
})
);
</script><script>example();</script>

<h2>interpolate</h2>
@@ -409,39 +442,42 @@ <h2>interpolate</h2>
<p>In the following example, we're going to model the animation with a variable where 1 means fully visible and 0 means fully hidden. We can pass it directly to the scale attribute as the ranges match. But for the rotation, we need to convert [0 ; 1] range to [260deg ; 0deg]. This is where <code>interpolate()</code> comes handy.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
componentWillMount: function() {
this.interpolate = this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: ['260deg', '0deg']
});

this.interpolate.addListener(v => console.log(v));
},
render: function() {
return (
<Animated.div
style={{
transform: [
{rotate: this.interpolate},
{scale: this.state.anim},
]
}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.spring(this.state.anim, {toValue: 0}).start();
}
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(1),
};
},
componentWillMount: function() {
this.interpolate = this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: ['260deg', '0deg'],
});

this.interpolate.addListener(v => console.log(v));
},
render: function() {
return (
<Animated.div
style={{
transform: [
{ rotate: this.interpolate },
{ scale: this.state.anim },
],
}}
className="circle"
onClick={this.handleClick}
>
Click
</Animated.div>
);
},
handleClick: function() {
Animated.spring(this.state.anim, { toValue: 0 }).start();
},
})
);
</script><script>example();</script>

<h2>stopAnimation</h2>
@@ -453,40 +489,44 @@ <h2>stopAnimation</h2>
<p>There's however one exception: when you want to stop the current animation. You need to know where it stopped in order to continue from there. We cannot know the value synchronously so we give it via a callback in <code>stopAnimation</code>. It will not suffer from beign out of sync since the animation is no longer running.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0)
};
},
render: function() {
return (
<div>
<button onClick={() => this.handleClick(-1)}>&lt;</button>
<Animated.div
style={{
transform: [
{rotate: this.state.anim.interpolate({
inputRange: [0, 4],
outputRange: ['0deg', '360deg']
})},
],
position: 'relative'
}}
className="circle"
/>
<button onClick={() => this.handleClick(+1)}>&gt;</button>
</div>
);
},
handleClick: function(delta) {
this.state.anim.stopAnimation(value => {
Animated.spring(this.state.anim, {
toValue: Math.round(value) + delta
}).start();
});
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<div>
<button onClick={() => this.handleClick(-1)}>&lt;</button>
<Animated.div
style={{
transform: [
{
rotate: this.state.anim.interpolate({
inputRange: [0, 4],
outputRange: ['0deg', '360deg'],
}),
},
],
position: 'relative',
}}
className="circle"
/>
<button onClick={() => this.handleClick(+1)}>&gt;</button>
</div>
);
},
handleClick: function(delta) {
this.state.anim.stopAnimation(value => {
Animated.spring(this.state.anim, {
toValue: Math.round(value) + delta,
}).start();
});
},
})
);
</script><script>example();</script>


@@ -503,23 +543,26 @@ <h2>HorizontalPan</h2>
<p>We introduce a little helper called <code>HorizontalPan</code> which handles all this annoying code for us. It takes an <code>Animated.Value</code> as first argument and returns the event handlers required for it to work. We just have to bind this value to the <code>left</code> attribute and we're good to go.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
{...HorizontalPan(this.state.anim)}>
Drag
</Animated.div>
);
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{ left: this.state.anim }}
className="circle"
{...HorizontalPan(this.state.anim)}
>
Drag
</Animated.div>
);
},
})
);
</script><script>example();</script>

<h2>Animated.decay</h2>
@@ -529,128 +572,140 @@ <h2>Animated.decay</h2>
<p>In order to implement this effect, we are using a second real-world simulation: an object moving on an icy surface. All it needs is two values: the current velocity and a deceleration coefficient. It is implemented by <code>Animated.decay</code>.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{left: this.state.anim}}
className="circle"
{...HorizontalPan(this.state.anim, {
onEnd: this.handleEnd
})}>
Throw
</Animated.div>
);
},
handleEnd: function({velocity}) {
Animated.decay(this.state.anim, {velocity}).start();
}
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<Animated.div
style={{ left: this.state.anim }}
className="circle"
{...HorizontalPan(this.state.anim, {
onEnd: this.handleEnd,
})}
>
Throw
</Animated.div>
);
},
handleEnd: function({ velocity }) {
Animated.decay(this.state.anim, { velocity }).start();
},
})
);
</script><script>example();</script>

<h2>Animation Chaining</h2>

<p>The target for an animation is usually a number but sometimes it is convenient to use another value as a target. This way, the first value will track the second. Using a spring animation, we can get a nice trailing effect.</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0));
Animated.spring(anims[0], {toValue: anims[1]}).start();
Animated.spring(anims[1], {toValue: anims[2]}).start();
Animated.spring(anims[2], {toValue: anims[3]}).start();
Animated.spring(anims[3], {toValue: anims[4]}).start();
return {
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{left: anim}}
className="circle"
{...(i === 4 && HorizontalPan(anim, {
onEnd: this.handleEnd
}))}>
{i === 4 && 'Drag'}
</Animated.div>
)}
</div>
);
},
handleEnd: function({velocity}) {
Animated.decay(this.state.anims[4], {velocity}).start();
}
}));
examplify(
React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0));
Animated.spring(anims[0], { toValue: anims[1] }).start();
Animated.spring(anims[1], { toValue: anims[2] }).start();
Animated.spring(anims[2], { toValue: anims[3] }).start();
Animated.spring(anims[3], { toValue: anims[4] }).start();
return {
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) => (
<Animated.div
style={{ left: anim }}
className="circle"
{...i === 4 &&
HorizontalPan(anim, {
onEnd: this.handleEnd,
})}
>
{i === 4 && 'Drag'}
</Animated.div>
))}
</div>
);
},
handleEnd: function({ velocity }) {
Animated.decay(this.state.anims[4], { velocity }).start();
},
})
);
</script><script>example();</script>

<h2>addListener</h2>

<p>As I said earlier, if you track a spring</p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(i * 100));
anims[0].addListener(this.handleChange);
return {
selected: null,
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{
left: anim,
opacity: i === 0 || i === this.state.selected ? 1 : 0.5
}}
className="circle"
{...(i === 0 && HorizontalPan(anim, { onEnd: this.handleEnd }))}>
{i === 0 && 'Drag'}
{i === this.state.selected && 'Selected!'}
</Animated.div>
)}
</div>
);
},
handleChange: function({value}) {
var selected = null;
this.state.anims.forEach((_, i) => {
if (i !== 0 && i * 100 - 50 < value && value <= i * 100 + 50) {
selected = i;
}
});
if (selected !== this.state.selected) {
this.select(selected)
}
},
select(selected) {
this.setState({selected}, () => {
this.state.anims.forEach((anim, i) => {
if (i === 0) { return; }
if (selected === i) {
Animated.spring(anim, {toValue: this.state.anims[0]}).start();
} else {
Animated.spring(anim, {toValue: i * 100}).start();
examplify(
React.createClass({
getInitialState: function() {
var anims = [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(i * 100));
anims[0].addListener(this.handleChange);
return {
selected: null,
anims: anims,
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) => (
<Animated.div
style={{
left: anim,
opacity: i === 0 || i === this.state.selected ? 1 : 0.5,
}}
className="circle"
{...i === 0 && HorizontalPan(anim, { onEnd: this.handleEnd })}
>
{i === 0 && 'Drag'}
{i === this.state.selected && 'Selected!'}
</Animated.div>
))}
</div>
);
},
handleChange: function({ value }) {
var selected = null;
this.state.anims.forEach((_, i) => {
if (i !== 0 && i * 100 - 50 < value && value <= i * 100 + 50) {
selected = i;
}
});
});
},
handleEnd() {
this.select(null);
Animated.spring(this.state.anims[0], {toValue: 0}).start();
}
}));
if (selected !== this.state.selected) {
this.select(selected);
}
},
select(selected) {
this.setState({ selected }, () => {
this.state.anims.forEach((anim, i) => {
if (i === 0) {
return;
}
if (selected === i) {
Animated.spring(anim, { toValue: this.state.anims[0] }).start();
} else {
Animated.spring(anim, { toValue: i * 100 }).start();
}
});
});
},
handleEnd() {
this.select(null);
Animated.spring(this.state.anims[0], { toValue: 0 }).start();
},
})
);
</script><script>example();</script>


@@ -659,175 +714,199 @@ <h2>Animated.sequence</h2>
<p>It is very common to animate </p>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.sequence(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) => (
<Animated.div
style={{ opacity: anim, position: 'relative' }}
className="circle"
onClick={i === 0 && this.handleClick}
>
{i === 0 && 'Click'}
</Animated.div>
))}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => {
anim.setValue(0.2);
});
Animated.sequence(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
})
);
</script><script>example();</script>


<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.stagger(
100,
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
}));
</script><script>example();</script>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) =>
<Animated.div
style={{opacity: anim, position: 'relative'}}
className="circle"
onClick={i === 0 && this.handleClick}>
{i === 0 && 'Click'}
</Animated.div>
)}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => { anim.setValue(0.2); });
Animated.sequence([
Animated.parallel(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
),
examplify(
React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) => (
<Animated.div
style={{ opacity: anim, position: 'relative' }}
className="circle"
onClick={i === 0 && this.handleClick}
>
{i === 0 && 'Click'}
</Animated.div>
))}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => {
anim.setValue(0.2);
});
Animated.stagger(
100,
this.state.anims.map(anim => Animated.spring(anim, { toValue: 0.2 }))
),
]).start();
},
}));
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
).start();
},
})
);
</script><script>example();</script>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
handleClick: function() {
var rec = () => {
examplify(
React.createClass({
getInitialState: function() {
return {
anims: [0, 1, 2, 3, 4].map((_, i) => new Animated.Value(0.2)),
};
},
render: function() {
return (
<div>
{this.state.anims.map((anim, i) => (
<Animated.div
style={{ opacity: anim, position: 'relative' }}
className="circle"
onClick={i === 0 && this.handleClick}
>
{i === 0 && 'Click'}
</Animated.div>
))}
</div>
);
},
handleClick: function() {
this.state.anims.forEach(anim => {
anim.setValue(0.2);
});
Animated.sequence([
Animated.timing(this.state.anim, {toValue: -1, duration: 150}),
Animated.timing(this.state.anim, {toValue: 1, duration: 150}),
]).start(rec);
};
rec();
},
render: function() {
return (
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [-1, -0.5, 0.5, 1],
outputRange: [0, 5, 0, 5]
}),
transform: [
{rotate: this.state.anim.interpolate({
inputRange: [-1, 1],
outputRange: ['-10deg', '10deg']
})}
]
}}
className="circle"
onClick={this.handleClick}>
Click
</Animated.div>
);
},
}));
Animated.parallel(
this.state.anims.map(anim => Animated.spring(anim, { toValue: 1 }))
),
Animated.stagger(
100,
this.state.anims.map(anim => Animated.spring(anim, { toValue: 0.2 }))
),
]).start();
},
})
);
</script><script>example();</script>

<script type="text/babel">
examplify(React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0)
};
},
render: function() {
return (
<div
style={{overflow: 'scroll', height: 60}}
onScroll={Animated.event([
{target: {scrollLeft: this.state.anim}}
])}>
<div style={{width: 1000, height: 1}} />
{[0, 1, 2, 3, 4].map(i =>
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, (i + 1)]
}),
pointerEvents: 'none',
}}
className="circle">
{i === 4 && 'H-Scroll'}
</Animated.div>
)}
</div>
);
},
}));
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
handleClick: function() {
var rec = () => {
Animated.sequence([
Animated.timing(this.state.anim, { toValue: -1, duration: 150 }),
Animated.timing(this.state.anim, { toValue: 1, duration: 150 }),
]).start(rec);
};
rec();
},
render: function() {
return (
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [-1, -0.5, 0.5, 1],
outputRange: [0, 5, 0, 5],
}),
transform: [
{
rotate: this.state.anim.interpolate({
inputRange: [-1, 1],
outputRange: ['-10deg', '10deg'],
}),
},
],
}}
className="circle"
onClick={this.handleClick}
>
Click
</Animated.div>
);
},
})
);
</script><script>example();</script>

<script type="text/babel">
examplify(
React.createClass({
getInitialState: function() {
return {
anim: new Animated.Value(0),
};
},
render: function() {
return (
<div
style={{ overflow: 'scroll', height: 60 }}
onScroll={Animated.event([
{ target: { scrollLeft: this.state.anim } },
])}
>
<div style={{ width: 1000, height: 1 }} />
{[0, 1, 2, 3, 4].map(i => (
<Animated.div
style={{
left: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [0, i + 1],
}),
pointerEvents: 'none',
}}
className="circle"
>
{i === 4 && 'H-Scroll'}
</Animated.div>
))}
</div>
);
},
})
);
</script><script>example();</script>

</div>