Hard coded tween working for anim input link

package.json

@@ -33,6 +33,7 @@
     ]
   },
   "dependencies": {
+    "@tweenjs/tween.js": "^17.2.0",
     "babel-loader": "^6.3.2",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-polyfill": "^6.23.0",

src/components/InputLink/index.js

@@ -51,7 +51,7 @@ class InputLink extends React.Component {
 
   render () {
     const { modifierIds, lfoOptionIds, size, midiOptionIds, title, toggleActionId,
-      onAnimTriggerClick, animTriggerActionId,
+      onAnimStartClick, animStartActionId,
       sequencerGridId, onDeleteClick, onActivateToggle, isActive, isActivateVisible } = this.props
     return (
       <div>
@@ -74,8 +74,8 @@ class InputLink extends React.Component {
           {sequencerGridId &&
             <SequencerGrid nodeId={sequencerGridId} />
           }
-          {animTriggerActionId &&
-            <Button onClick={onAnimTriggerClick}>Trigger Anim</Button>
+          {animStartActionId &&
+            <Button onClick={onAnimStartClick}>Start Anim</Button>
           }
         </Wrapper>
         <Row justify='space-between'>
@@ -112,8 +112,8 @@ InputLink.propTypes = {
   sequencerGridId: PropTypes.string,
   toggleActionId: PropTypes.string.isRequired,
   isActivateVisible: PropTypes.bool,
-  animTriggerActionId: PropTypes.string,
-  onAnimTriggerClick: PropTypes.func.isRequired,
+  animStartActionId: PropTypes.string,
+  onAnimStartClick: PropTypes.func.isRequired,
 }
 
 export default InputLink

src/containers/InputLink/index.js

@@ -7,7 +7,8 @@ import getInputLink from '../../selectors/getInputLink'
 import getIsInputLinkActive from '../../selectors/getIsInputLinkActive'
 import getCanInputLinkDisable from '../../selectors/getCanInputLinkDisable'
 import { uInputLinkDelete, uInputLinkCreate } from '../../store/inputLinks/actions'
-import { nodeTabOpen, nodeActiveInputLinkToggle, nodeTriggerAnim } from '../../store/nodes/actions'
+import { nodeTabOpen, nodeActiveInputLinkToggle } from '../../store/nodes/actions'
+import { uAnimStart } from '../../store/anims/actions'
 
 const mapStateToProps = (state, ownProps) => {
   const link = getInputLink(state, ownProps.id)
@@ -20,7 +21,7 @@ const mapStateToProps = (state, ownProps) => {
     isActivateVisible: getCanInputLinkDisable(state, ownProps.id),
     toggleActionId: link.linkableActions.toggleActivate,
     sequencerGridId: link.sequencerGridId,
-    animTriggerActionId: link.linkableActions.animTrigger,
+    animStartActionId: link.linkableActions.animStart,
   }
 }
 
@@ -35,8 +36,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   onActivateAssignClick: () => {
     dispatch(uInputLinkCreate(ownProps.id, 'midi', 'inputLinkToggle'))
   },
-  onAnimTriggerClick: () => {
-    dispatch(nodeTriggerAnim(ownProps.nodeId, ownProps.id))
+  onAnimStartClick: () => {
+    dispatch(uAnimStart(ownProps.id))
   },
 })
 

src/engine/index.js

@@ -13,6 +13,7 @@ import now from 'performance-now'
 import * as renderer from './renderer'
 import Scene from './Scene'
 import { nodeValuesBatchUpdate } from '../store/nodes/actions'
+import TWEEN from '@tweenjs/tween.js'
 
 export let scenes = {}
 
@@ -154,6 +155,10 @@ export const run = (injectedStore, stats) => {
       spf = 1000 / state.settings.throttledFPS
 
       newTime = now()
+
+      // Tween JS used for animated param values (anims)
+      TWEEN.update(newTime)
+
       delta = newTime - oldTimeModified
       // Elapsed frames are from the perspective of a 60FPS target
       // regardless of throttling (so that throttled animations dont slow down)

src/store/anims/actions.js

@@ -0,0 +1,8 @@
+export function uAnimStart (linkId) {
+  return {
+    type: 'U_ANIM_START',
+    payload: {
+      linkId,
+    },
+  }
+}

src/store/anims/listener.js

@@ -0,0 +1,29 @@
+import getInputLink from '../../selectors/getInputLink'
+import getNode from '../../selectors/getNode'
+import { nodeValueUpdate } from '../nodes/actions'
+import TWEEN from '@tweenjs/tween.js'
+
+const handleAnimStart = (action, store) => {
+  const state = store.getState()
+  const inputLink = getInputLink(state, action.payload.linkId)
+  const node = getNode(state, inputLink.nodeId)
+  const props = {
+    nodeValue: node.value,
+  }
+
+  new TWEEN.Tween(props)
+    .to({ nodeValue: 0.9 }, 1000)
+    .easing(TWEEN.Easing.Quadratic.Out)
+    .onUpdate(() => {
+      store.dispatch(nodeValueUpdate(inputLink.nodeId, props.nodeValue))
+    })
+    .start()
+}
+
+export default (action, store) => {
+  switch (action.type) {
+    case 'U_ANIM_START':
+      handleAnimStart(action, store)
+      break
+  }
+}

src/store/inputLinks/sagas.js

@@ -3,8 +3,9 @@ import { getDefaultModifierIds } from './selectors'
 import getInputLink from '../../selectors/getInputLink'
 import getNode from '../../selectors/getNode'
 import { rInputLinkCreate, rInputLinkDelete } from './actions'
+import { uAnimStart } from '../anims/actions'
 import { rNodeCreate, uNodeCreate, uNodeDelete, uNodeInputLinkAdd,
-  nodeInputLinkRemove, nodeActiveInputLinkToggle, nodeTriggerAnim } from '../nodes/actions'
+  nodeInputLinkRemove, nodeActiveInputLinkToggle } from '../nodes/actions'
 import { inputAssignedLinkCreate, inputAssignedLinkDelete } from '../inputs/actions'
 import { linkableActionCreate, linkableActionInputLinkAdd,
   linkableActionInputLinkRemove, linkableActionDelete } from '../linkableActions/actions'
@@ -107,9 +108,9 @@ export function* inputLinkCreate (action) {
     }
 
     if (p.inputType === 'anim') {
-      const animTriggerActionId = yield call(uid)
-      yield put(linkableActionCreate(animTriggerActionId, nodeTriggerAnim(p.nodeId, linkId)))
-      linkableActions.animTrigger = animTriggerActionId
+      const animStartActionId = yield call(uid)
+      yield put(linkableActionCreate(animStartActionId, uAnimStart(linkId)))
+      linkableActions.animStart = animStartActionId
     }
 
     if (linkType === 'node') {

src/store/nodes/actions.js

@@ -158,15 +158,6 @@ export function nodeActiveInputLinkToggle (nodeId, linkId) {
   }
 }
 
-export function nodeTriggerAnim (nodeId, linkId) {
-  return {
-    type: 'NODE_TRIGGER_ANIM',
-    payload: {
-      nodeId, linkId,
-    },
-  }
-}
-
 export function nodeShotFired (nodeId, sketchId, method) {
   return {
     type: 'NODE_SHOT_FIRED',

src/store/rootListener.js

@@ -1,6 +1,7 @@
 import scenesListener from './scenes/listener'
 import sketchesListener from './sketches/listener'
 import linkableActionsListener from './linkableActions/listener'
+import animListener from './anims/listener'
 import engineListener from '../engine/listener'
 
 export default {
@@ -11,5 +12,6 @@ export default {
     sketchesListener(action, store)
     linkableActionsListener(action, store)
     engineListener(action, store)
+    animListener(action, store)
   },
 }

yarn.lock

@@ -26,6 +26,10 @@
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
 
+"@tweenjs/tween.js@^17.2.0":
+  version "17.2.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-17.2.0.tgz#21f89b709bafc4b303adae7a83b4f35a0d9e4796"
+
 "@types/node@*":
   version "4.0.35"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-4.0.35.tgz#2b96b8e67bea7451e6e1ba8b65eaeb8f223261ed"