Merge pull request #43 from skellock/use-popmotion

Use popmotion for animations.

Author: skellock

docs/stack.md

@@ -29,7 +29,6 @@ Can't imagine doing web differently to be honest. I'm sure we will soon, but for
 
 I like `preact` as well.  I feel like the switching over will be pretty simple and I probably will.
 
-
 ## Component Styling ##
 
 > **glamor**
@@ -73,6 +72,17 @@ Start your app only when your gut says, "You'll fuck this up long before your st
 `glamor` gives me that vibe. 💃
 
 
+## Animations
+
+**react-transition-group**
+
+Brings enter + leave lifecycle events for animations.
+
+**popmotion**
+
+Power animation & tweening library.
+
+
 ## State Management
 
 > **mobx**, **mobx-react**

package-lock.json

@@ -46,9 +46,11 @@
     "mobx": "3.2.2",
     "mobx-react": "4.2.2",
     "mousetrap": "1.6.1",
+    "popmotion-react": "^1.1.0",
     "ramda": "0.24.1",
     "react": "15.6.1",
-    "react-dom": "15.6.1"
+    "react-dom": "15.6.1",
+    "react-transition-group": "^2.2.0"
   },
   "description": "An electron starter project.",
   "devDependencies": {

package.json

@@ -16,8 +16,8 @@ export class DogTab extends React.PureComponent<DogTabProps, {}> {
   render() {
     return (
       <CenteredContent style={this.props.style}>
+        <Text style={TEXT_STYLE}>Do a barrel roll.</Text>
         <FunDog />
-        <Text style={TEXT_STYLE}>Wake up and smell the electrons.</Text>
         <Logo />
       </CenteredContent>
     )

src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import dogImage from './fun-dog.jpg'
-import { cssProps, colors } from '../../../platform'
+import { cssProps, colors, SpinAnimation } from '../../../platform'
 import { css } from 'glamor'
 
 const ROOT = cssProps({
@@ -12,5 +12,9 @@ const ROOT = cssProps({
 })
 
 export function FunDog() {
-  return <img draggable={false} src={dogImage} {...css(ROOT)} />
+  return (
+    <SpinAnimation>
+      <img draggable={false} src={dogImage} {...css(ROOT)} />
+    </SpinAnimation>
+  )
 }

src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx

@@ -3,3 +3,4 @@ export * from './scrollable-content'
 export * from './centered-content'
 export * from './tab'
 export * from './enter-animation'
+export * from './spin-animation'

src/renderer/platform/components/index.ts

@@ -0,0 +1 @@
+export * from './spin-animation'

src/renderer/platform/components/spin-animation/index.ts

@@ -0,0 +1,43 @@
+import { StateChangeEvent, MotionStates, MotionStateProps } from 'popmotion-react'
+import { tween } from 'popmotion'
+
+const DEFAULT_DURATION = 500
+const DEFAULT_REVOLUTIONS = 1
+
+export interface SpinAnimationStateProps {
+  /** How long does the animation take in milliseconds. (default: 1000) */
+  duration?: number
+  /** How many spins. (default: 1) */
+  revolutions?: number
+}
+
+/**
+ * Creates the animation states.
+ */
+export function createSpinStates(props: SpinAnimationStateProps): MotionStates {
+  const duration = props.duration || DEFAULT_DURATION
+  const forwardAngle = 360 * (props.revolutions || DEFAULT_REVOLUTIONS)
+
+  // a helper function to create the 2 states
+  const createState = (to: number) => (e: StateChangeEvent) =>
+    tween({
+      from: e.value.get(),
+      to,
+      duration,
+      onUpdate: e.value,
+    }).start()
+
+  return {
+    forward: createState(forwardAngle),
+    back: createState(0),
+  }
+}
+
+/**
+ * The function that goes to the next state.
+ *
+ * @param current The current state.
+ */
+export function next(current: MotionStateProps) {
+  return current.state === 'forward' ? current.setStateTo.back : current.setStateTo.forward
+}

src/renderer/platform/components/spin-animation/spin-animation-state.ts

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { MotionValue, MotionStates, MotionStateProps } from 'popmotion-react'
+import { SpinAnimationStateProps, createSpinStates, next } from './spin-animation-state'
+
+/**
+ * Provides a container which will do a barrel roll when clicked.
+ */
+export class SpinAnimation extends React.PureComponent<SpinAnimationStateProps, {}> {
+  animationStates: MotionStates
+
+  componentWillMount() {
+    this.animationStates = createSpinStates(this.props)
+  }
+
+  componentWillReceiveProps(newProps: SpinAnimationStateProps) {
+    this.animationStates = createSpinStates(newProps)
+  }
+
+  render() {
+    // the view to spin
+    // NOTE: This is a function and not a component due to popmotion-react.
+    const spinWrapper = (motionState: MotionStateProps) => {
+      const props = {
+        style: { transform: `rotate(${motionState.v}deg)`, cursor: 'pointer' },
+        onClick: next(motionState),
+        children: this.props.children,
+      }
+
+      return <div {...props} />
+    }
+
+    return <MotionValue onStateChange={this.animationStates} children={spinWrapper} />
+  }
+}

src/renderer/platform/components/spin-animation/spin-animation.tsx

@@ -0,0 +1,63 @@
+declare module 'popmotion-react' {
+  import { Component } from 'react'
+
+  export interface StateChangeValue {
+    [name: string]: any
+  }
+
+  export interface SetStateFunctions {
+    [name: string]: () => void
+  }
+
+  export interface MotionStateProps {
+    /** The current numerical value, or object of named values. */
+    v: number | StateChangeValue
+
+    /** Current velocity, or object of named velocities. */
+    velocity: number
+
+    /** Current state name. */
+    state: string
+
+    /** Object of setter functions, generated from the states defined in onStateChange (each optionally accepts an Event). */
+    setStateTo: SetStateFunctions
+
+    /** Provides onStateChange setters a ref attribute for an escape hatch to the DOM (for instance attaching/removing events). */
+    setRef(ref: React.ReactNode): void
+  }
+
+  export interface StateChangeEvent {
+    /** The popmotion value object. */
+    value: any
+    /** State before current state change. */
+    previousState: string
+    /** Object of state setters (each optionally accepts an Event). */
+    setStateTo: any
+    /** : A reference to the mounted React component, if a component was provided setRef. */
+    ref: React.ReactNode
+    /** The triggering event, if a state setter was called with one. */
+    e: Event
+    /** When hooking into TransitionGroup lifecycle events componentWillEnter, componentWillAppear and componentWillLeave, this callback is provided and required. */
+    onComplete?: () => void
+  }
+
+  export interface MotionStates {
+    [stateName: string]: (onStateChange: StateChangeEvent) => void
+  }
+
+  export interface MotionValueProps {
+    /**
+     * The initial state to start in.
+     */
+    initialState?: string
+
+    /**
+     * A state machine mapping state names to action states.
+     */
+    onStateChange?: MotionStates
+  }
+
+  export class MotionValue extends Component<MotionValueProps, {}> {
+    constructor()
+  }
+}