From ed8c577ce0ddd885ac912be530f6f2e3b0d684f0 Mon Sep 17 00:00:00 2001 From: Alex Kempton Date: Sun, 9 Dec 2018 18:40:27 +0000 Subject: [PATCH] Hard coded tween working for anim input link --- package.json | 1 + src/components/InputLink/index.js | 10 +++++----- src/containers/InputLink/index.js | 9 +++++---- src/engine/index.js | 5 +++++ src/store/anims/actions.js | 8 ++++++++ src/store/anims/listener.js | 29 +++++++++++++++++++++++++++++ src/store/inputLinks/sagas.js | 9 +++++---- src/store/nodes/actions.js | 9 --------- src/store/rootListener.js | 2 ++ yarn.lock | 4 ++++ 10 files changed, 64 insertions(+), 22 deletions(-) create mode 100644 src/store/anims/actions.js create mode 100644 src/store/anims/listener.js diff --git a/package.json b/package.json index f202aeab..e35e875a 100644 --- a/package.json +++ b/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", diff --git a/src/components/InputLink/index.js b/src/components/InputLink/index.js index a0937b3b..b32069f9 100644 --- a/src/components/InputLink/index.js +++ b/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 (
@@ -74,8 +74,8 @@ class InputLink extends React.Component { {sequencerGridId && } - {animTriggerActionId && - + {animStartActionId && + } @@ -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 diff --git a/src/containers/InputLink/index.js b/src/containers/InputLink/index.js index a9041951..1e9a93be 100644 --- a/src/containers/InputLink/index.js +++ b/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)) }, }) diff --git a/src/engine/index.js b/src/engine/index.js index d636dfa4..5f99f58d 100644 --- a/src/engine/index.js +++ b/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) diff --git a/src/store/anims/actions.js b/src/store/anims/actions.js new file mode 100644 index 00000000..585b88e8 --- /dev/null +++ b/src/store/anims/actions.js @@ -0,0 +1,8 @@ +export function uAnimStart (linkId) { + return { + type: 'U_ANIM_START', + payload: { + linkId, + }, + } +} diff --git a/src/store/anims/listener.js b/src/store/anims/listener.js new file mode 100644 index 00000000..47fba79f --- /dev/null +++ b/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 + } +} diff --git a/src/store/inputLinks/sagas.js b/src/store/inputLinks/sagas.js index f0c13b61..e393ca25 100644 --- a/src/store/inputLinks/sagas.js +++ b/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') { diff --git a/src/store/nodes/actions.js b/src/store/nodes/actions.js index 0906dc25..688ab2fd 100644 --- a/src/store/nodes/actions.js +++ b/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', diff --git a/src/store/rootListener.js b/src/store/rootListener.js index 82c8ca6c..d87b39d6 100644 --- a/src/store/rootListener.js +++ b/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) }, } diff --git a/yarn.lock b/yarn.lock index 89145281..9db26a34 100644 --- a/yarn.lock +++ b/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"