Permalink
Browse files

Added animation

  • Loading branch information...
mmazzarolo committed Jan 16, 2017
1 parent 0ed8080 commit 9ab03803babecd38d4e320782a0c826623241c4b
@@ -2,7 +2,7 @@
// Please do not modify it manually. All changes will be lost.
try {
var path = require("path");
var Launcher = require("/Users/matteo/.vscode/extensions/vsmobile.vscode-react-native-0.2.5/out/debugger/launcher.js").Launcher;
var Launcher = require("/Users/matteo/.vscode-insiders/extensions/vsmobile.vscode-react-native-0.2.5/out/debugger/launcher.js").Launcher;
new Launcher("/Users/matteo/dev/github/numberz", "/Users/matteo/dev/github/numberz").launch();
} catch (e) {
throw new Error("Unable to launch application. Try deleting .vscode/launchReactNative.js and restarting vscode.");
@@ -24,6 +24,7 @@ export default class TilesCarousel extends Component<void, Props, void> {
backgroundColor={tile.color}
text={tile.number}
onTilePress={() => this.props.onTilePress(tile.id)}
isVisible={tile.isVisible}
/>
))}
</View>
@@ -1,13 +1,16 @@
/* @flow */
/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableWithoutFeedback } from 'react-native'
import { View, Text } from 'react-native-animatable'
import TouchableView from 'src/components/TouchableView'
import colorUtils from 'src/utils/colorUtils'
import ExplodingAnimation from 'src/components/ExplodingAnimation'
import styles from './index.style'
import metrics from 'src/config/metrics'
type Props = {
isVisible: boolean,
left: number,
bottom: number,
backgroundColor: string,
@@ -16,25 +19,60 @@ type Props = {
style?: any
}
export default class BoardTile extends Component<void, Props, void> {
type State = {
isVisible: boolean
}
export default class BoardTile extends Component<void, Props, State> {
state = {
isVisible: true
}
componentDidUpdate (prevProps: Props) {
const previouslyVisible = prevProps.isVisible
const currentlyVisible = this.props.isVisible
if (previouslyVisible && !currentlyVisible) {
}
}
render () {
const { left, bottom, backgroundColor, text, style } = this.props
const computedStyle = {
const { left, bottom, backgroundColor, text, style, isVisible } = this.props
const EXPLOSION_PADDING = metrics.TILE_SIZE * 0.1
const CIRCLE_SIZE = metrics.TILE_SIZE - (EXPLOSION_PADDING * 2)
const computedCircleStyle = {
left: left + EXPLOSION_PADDING,
bottom: bottom + EXPLOSION_PADDING,
backgroundColor,
borderRadius: CIRCLE_SIZE / 2,
width: CIRCLE_SIZE,
height: CIRCLE_SIZE
}
const computedExplosionStyle = {
left,
bottom,
backgroundColor
width: metrics.TILE_SIZE,
height: metrics.TILE_SIZE
}
const textColor = colorUtils.getContrastYIQ(backgroundColor)
return (
<TouchableView
style={[computedStyle, styles.containerDefault, style]}
onPress={this.props.onTilePress}
>
<ExplodingAnimation />
<Text style={[styles.text, { color: textColor }]}>{text}</Text>
</TouchableView>
)
if (isVisible) {
return (
<View
style={[computedCircleStyle, styles.containerDefault, style]}
onStartShouldSetResponder={this.props.onTilePress}
>
<Text style={[styles.text, { color: textColor }]}>{text}</Text>
</View>
)
} else {
return (
<ExplodingAnimation
style={[computedExplosionStyle, styles.explosionDefault]}
size={metrics.TILE_SIZE}
circleSize={CIRCLE_SIZE}
/>
)
}
}
}
@@ -15,9 +15,9 @@ export default StyleSheet.create({
// width: 4
// }
justifyContent: 'center',
alignItems: 'center',
borderRadius: metrics.TILE_SIZE / 2,
width: metrics.TILE_SIZE,
height: metrics.TILE_SIZE
alignItems: 'center'
},
explosionDefault: {
position: 'absolute'
}
})
@@ -0,0 +1,26 @@
/* @flow */
/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { Animated } from 'react-native'
import Art from 'ReactNativeART'
const { Shape, Path } = Art
const AnimatedShape = Animated.createAnimatedComponent(Shape)
type Props = {
radius: number
}
export default class AnimatedCircle extends Component<void, Props, void> {
render () {
const { radius, ...otherProps } = this.props
const path = Path().moveTo(0, -radius)
.arc(0, radius * 2, radius)
.arc(0, radius * -2, radius)
.close()
return (
<AnimatedShape d={path} {...otherProps} />
)
}
}
Oops, something went wrong.

0 comments on commit 9ab0380

Please sign in to comment.