From 2b7a3072a670072a858ecfc4160bf4eeeface597 Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Mon, 4 Feb 2019 20:39:25 -0300 Subject: [PATCH] Animate code --- src/airframe/airframe.js | 119 +++++++++++++++++++++++++++++++++++++++ src/airframe/easing.js | 54 ++++++++++++++++++ src/animation.js | 78 +++++++++++++++++++++++++ src/differ.js | 58 ------------------- src/history.js | 7 ++- src/index.css | 2 + src/nightOwl.js | 107 +++++++++++++++++++++++++++++++++++ src/slide.js | 34 +++++++++++ 8 files changed, 400 insertions(+), 59 deletions(-) create mode 100644 src/airframe/airframe.js create mode 100644 src/airframe/easing.js create mode 100644 src/animation.js create mode 100644 src/nightOwl.js create mode 100644 src/slide.js diff --git a/src/airframe/airframe.js b/src/airframe/airframe.js new file mode 100644 index 0000000..bcddabf --- /dev/null +++ b/src/airframe/airframe.js @@ -0,0 +1,119 @@ +import easing from "./easing"; +/* eslint-disable */ +function mergeResults(results) { + const firstResult = results[0]; + if (results.length < 2) { + return firstResult; + } + if (Array.isArray(firstResult)) { + // console.log("merge", results); + return firstResult.map((_, i) => { + return mergeResults(results.map(result => result[i])); + }); + } else { + return Object.assign({}, ...results); + } +} + +const airframe = { + parallel: ({ children: fns }) => { + return (t, ...args) => { + const styles = fns.map(fn => fn(t, ...args)); + const result = mergeResults(styles); + return result; + }; + }, + chain: ({ children: fns, durations }) => { + return (t, ...args) => { + let style = fns[0](0, ...args); + let lowerDuration = 0; + for (let i = 0; i < fns.length; i++) { + const fn = fns[i]; + const thisDuration = durations[i]; + const upperDuration = lowerDuration + thisDuration; + if (lowerDuration <= t && t <= upperDuration) { + const innerT = (t - lowerDuration) / thisDuration; + style = mergeResults([style, fn(innerT, ...args)]); + } else if (upperDuration < t) { + // merge the end of previous animation + style = mergeResults([style, fn(1, ...args)]); + } else if (t < lowerDuration) { + // merge the start of future animation + style = mergeResults([fn(0, ...args), style]); + } + lowerDuration = upperDuration; + } + return style; + }; + }, + delay: () => () => ({}), + tween: ({ from, to, ease = easing.linear }) => (t, targets) => { + const style = {}; + Object.keys(from).forEach(key => { + const value = from[key] + (to[key] - from[key]) * ease(t); + if (key === "x") { + style["transform"] = `translateX(${value}px)`; + } else { + style[key] = value; + } + }); + return style; + } +}; + +/* @jsx createAnimation */ +export const Stagger = props => (t, targets) => { + const filter = target => !props.filter || props.filter(target); + const interval = + targets.filter(filter).length < 2 + ? 0 + : props.interval / (targets.filter(filter).length - 1); + let i = 0; + return targets.map(target => { + // console.log(target, props.filter(target)); + if (!filter(target)) { + return {}; + } + const animation = ( + + + + {props.children[0]} + + + ); + i++; + const result = animation(t, target); + // console.log("Stagger Result", t, result); + return result; + }); +}; + +export function createAnimation(type, props, ...children) { + const allProps = Object.assign({ children }, props); + if (typeof type === "string") { + if (window.LOG === "verbose") { + return (t, ...args) => { + console.groupCollapsed(type, t); + const result = airframe[type](allProps)(t, ...args); + console.log(result); + console.groupEnd(); + return result; + }; + } else { + return airframe[type](allProps); + } + } else { + if (window.LOG === "verbose") { + return (t, ...args) => { + console.groupCollapsed(type.name, t); + const result = type(allProps)(t, ...args); + console.log(result); + console.groupEnd(); + return result; + }; + } else { + return type(allProps); + } + } +} diff --git a/src/airframe/easing.js b/src/airframe/easing.js new file mode 100644 index 0000000..fafdca9 --- /dev/null +++ b/src/airframe/easing.js @@ -0,0 +1,54 @@ +export default { + // no easing, no acceleration + linear: function(t) { + return t; + }, + // accelerating from zero velocity + easeInQuad: function(t) { + return t * t; + }, + // decelerating to zero velocity + easeOutQuad: function(t) { + return t * (2 - t); + }, + // acceleration until halfway, then deceleration + easeInOutQuad: function(t) { + return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; + }, + // accelerating from zero velocity + easeInCubic: function(t) { + return t * t * t; + }, + // decelerating to zero velocity + easeOutCubic: function(t) { + return --t * t * t + 1; + }, + // acceleration until halfway, then deceleration + easeInOutCubic: function(t) { + return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; + }, + // accelerating from zero velocity + easeInQuart: function(t) { + return t * t * t * t; + }, + // decelerating to zero velocity + easeOutQuart: function(t) { + return 1 - --t * t * t * t; + }, + // acceleration until halfway, then deceleration + easeInOutQuart: function(t) { + return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t; + }, + // accelerating from zero velocity + easeInQuint: function(t) { + return t * t * t * t * t; + }, + // decelerating to zero velocity + easeOutQuint: function(t) { + return 1 + --t * t * t * t * t; + }, + // acceleration until halfway, then deceleration + easeInOutQuint: function(t) { + return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t; + } +}; diff --git a/src/animation.js b/src/animation.js new file mode 100644 index 0000000..f173867 --- /dev/null +++ b/src/animation.js @@ -0,0 +1,78 @@ +import { createAnimation, Stagger } from "./airframe/airframe"; +import easing from "./airframe/easing"; + +/* eslint-disable */ + +const dx = 250; + +/* @jsx createAnimation */ + +// window.LOG = "verbose"; + +const SlideToLeft = () => ( + +); + +function ShrinkHeight() { + return ( + + ); +} + +const SlideFromRight = () => ( + +); +function GrowHeight() { + return ( + + ); +} + +function SwitchLines({ filterExit, filterEnter }) { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ( + + line.left && !line.middle} + filterEnter={line => !line.left && line.middle} + /> + line.middle && !line.right} + filterEnter={line => !line.middle && line.right} + /> + +); diff --git a/src/differ.js b/src/differ.js index fb74815..ff6e6a0 100644 --- a/src/differ.js +++ b/src/differ.js @@ -83,61 +83,3 @@ export function getSlides(codes) { .filter(line => line.middle || line.left || line.right); }); } - -// - -function getLines(change) { - return change.value - .trimRight(newlineRe) - .split(newlineRe) - .map(content => ({ - content - })); -} - -export function tripleDiff(left, middle, right) { - const leftDiff = diff.diffLines(left, middle); - const rightDiff = diff.diffLines(middle, right); - - let x = leftDiff - .map(change => - change.value - .trimRight(newlineRe) - .split(newlineRe) - .map(content => ({ - content, - left: !change.added, - middle: !change.removed - })) - ) - .flat(); - // console.log(JSON.stringify(leftDiff, null, 2)); - // console.log(JSON.stringify(x, null, 2)); - - let i = 0; - // console.log(rightDiff); - rightDiff.forEach(change => { - let mx = x.filter(l => l.middle || l.right); - if (change.added) { - const lines = change.value - .trimRight(newlineRe) - .split(newlineRe) - .map(content => ({ - content, - left: false, - middle: false, - right: true - })); - insert(x, i, lines); - } else if (!change.removed) { - // console.log(change); - for (let j = 0; j < change.count; j++) { - mx[i + j].right = true; - } - } - i += change.count; - }); - // console.log(JSON.stringify(rightDiff, null, 2)); - // console.log(JSON.stringify(x, null, 2)); - return x; -} diff --git a/src/history.js b/src/history.js index 803ed1e..92d01d7 100644 --- a/src/history.js +++ b/src/history.js @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { getSlides } from "./differ"; import { useSpring } from "react-use"; +import Slide from "./slide"; export default function History({ commits, language }) { const codes = commits.map(commit => commit.content); @@ -22,7 +23,11 @@ export default function History({ commits, language }) { } }; }); - return 
{codes[index]}
; + return ( + + + + ); } function useSliderSpring(initial) { const [target, setTarget] = useState(initial); diff --git a/src/index.css b/src/index.css index cee5f34..c67b788 100755 --- a/src/index.css +++ b/src/index.css @@ -6,6 +6,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: rgb(1, 22, 39); + color: rgb(214, 222, 235); } code { diff --git a/src/nightOwl.js b/src/nightOwl.js new file mode 100644 index 0000000..4d61fe7 --- /dev/null +++ b/src/nightOwl.js @@ -0,0 +1,107 @@ +const theme = { + plain: { + color: "#d6deeb", + backgroundColor: "#011627" + }, + styles: [ + { + types: ["changed"], + style: { + color: "rgb(162, 191, 252)", + fontStyle: "italic" + } + }, + { + types: ["deleted"], + style: { + color: "rgba(239, 83, 80, 0.56)", + fontStyle: "italic" + } + }, + { + types: ["inserted", "attr-name"], + style: { + color: "rgb(173, 219, 103)", + fontStyle: "italic" + } + }, + { + types: ["comment"], + style: { + color: "rgb(99, 119, 119)", + fontStyle: "italic" + } + }, + { + types: ["string", "url"], + style: { + color: "rgb(173, 219, 103)" + } + }, + { + types: ["variable"], + style: { + color: "rgb(214, 222, 235)" + } + }, + { + types: ["number"], + style: { + color: "rgb(247, 140, 108)" + } + }, + { + types: ["builtin", "char", "constant", "function"], + style: { + color: "rgb(130, 170, 255)" + } + }, + { + // This was manually added after the auto-generation + // so that punctuations are not italicised + types: ["punctuation"], + style: { + color: "rgb(199, 146, 234)" + } + }, + { + types: ["selector", "doctype"], + style: { + color: "rgb(199, 146, 234)", + fontStyle: "italic" + } + }, + { + types: ["class-name"], + style: { + color: "rgb(255, 203, 139)" + } + }, + { + types: ["tag", "operator", "keyword"], + style: { + color: "rgb(127, 219, 202)" + } + }, + { + types: ["boolean"], + style: { + color: "rgb(255, 88, 116)" + } + }, + { + types: ["property"], + style: { + color: "rgb(128, 203, 196)" + } + }, + { + types: ["namespace"], + style: { + color: "rgb(178, 204, 214)" + } + } + ] +}; + +module.exports = theme; diff --git a/src/slide.js b/src/slide.js new file mode 100644 index 0000000..4863d5c --- /dev/null +++ b/src/slide.js @@ -0,0 +1,34 @@ +import React from "react"; +import animation from "./animation"; +import theme from "./nightOwl"; + +export default function Slide({ time, lines }) { + const styles = animation((time + 1) / 2, lines); + return ( + 
+      {lines.map((line, i) => (
+        

+          {line.tokens.map(token => {
+            const props = theme.styles.find(s => s.types.includes(token.type));
+            return {token.content};
+          })}
+        

+      ))}
+
+ ); +}