Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 'use strict';
- import React, {
- Component,
- Animated,
- Easing,
- Dimensions,
- StyleSheet
- } from 'react-native';
- import Art, {
- Surface,
- Shape,
- Path,
- } from 'ReactNativeART';
- import AnimatedCircle from './AnimatedCircle.js';
- const {
- width: deviceWidth,
- height: deviceHeight
- } = Dimensions.get('window');
- const AnimatedShape = Animated.createAnimatedComponent(Shape);
- const AnimatedCircle = React.createClass({displayName: "Circle",
- render() {
- let radius = this.props.radius;
- let path = Path().moveTo(0, -radius)
- .arc(0, radius * 2, radius)
- .arc(0, radius * -2, radius)
- .close();
- return React.createElement(AnimatedShape, React.__spread({}, this.props, {d: path}));
- }
- });
- const NUM_CIRCLES = 100;
- const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min)) + min;
- class PerfTest extends Component {
- translateCircle(y, x, translate) {
- const move = () => {
- const newY = getRandomInt(y-50, y+50);
- const newX = getRandomInt(x-50, x+50);
- Animated.timing(translate, {
- toValue: {
- x: getRandomInt(x, newX),
- y: getRandomInt(y, newY)
- },
- duration: 8000,
- easing: Easing.elastic(1),
- }).start();
- setTimeout(move, 8000);
- }
- return move();
- }
- renderCircle() {
- return [...Array(NUM_CIRCLES).keys()].map(() => {
- const size = getRandomInt(0, 10);
- const y = getRandomInt(0, deviceHeight);
- const x = parseInt(getRandomInt(0, deviceWidth));
- const translate = new Animated.ValueXY({x: x, y: y});
- this.translateCircle(y, x, translate);
- return (
- <AnimatedCircle
- key={ i }
- x={ translate.x }
- y={ translate.y }
- radius={ size }
- scale={ 0.3 }
- fill={ 'rgba(0,0,0,0.1)' }
- opacity={ 1 }
- />
- );
- })
- }
- render() {
- return (
- <Surface style={ styles.surface } width={ deviceWidth } height={ deviceHeight }>
- { this.renderCircles() }
- </Surface>
- );
- }
- }
- const styles= StyleSheet.create({
- surface: {
- position: 'absolute',
- top: 0,
- left: 0,
- },
- });
- AppRegistry.registerComponent('PerfTest', () => PerfTest);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement