Gamification

of an app

Gamification is the use of game mechanics and game design techniques in non-game contexts.

factor

💫

Smooth the app

Easy on the eye

Blur & opacity

Easy on the eye

Physics-like behavior

How to: animations

• LayoutAnimation (iOS)

React Native

https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.2q15vjah3

LayoutAnimation.configureNext(
  LayoutAnimation.Presets.spring);
setState({ ... });

How to: animations

React Native

• Animated.*

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        Animated.timing(this.state.progress, {
          toValue: 200,
        }).start();
    });
}

render() {
    return (<Animated.View style={{
      transform: [{
        translateX: this.state.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [500, 0],
        }),
        opacity: this.state.progress
      }],
    }}>
        <Text>Hello world</Text>
    </Animated.View>);
}

How to: animations

• ng-animate

Angular/Ionic 

• CSS Animations

.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

.fade.ng-enter.ng-enter-active {
  opacity:1;
}

<div ng-if="bool" class="fade">
   Fade me in out
</div>

Easing functions

How to: blur and effects

React Native

https://github.com/react-native-fellowship/react-native-blur

https://github.com/ProjectSeptemberInc/gl-react-native

How to: blur and effects

React

https://github.com/ProjectSeptemberInc/gl-react

Ionic/Angular

-webkit-filter: blur(10px);
filter: blur(10px);

https://developer.mozilla.org/en/docs/Web/CSS/filter

Audio

Sounds for actions

Pull to refresh on Twitter/Facebook

Gamified

app usage

Game design

Scores

Points, virtual coins

Stats

Rewards, badges

% completion

Use game mechanisms

Thank you

) 

: