thinking animation v1

This commit is contained in:
riqo 2020-11-12 16:55:47 -06:00
commit d634f362c3

View file

@ -3,7 +3,7 @@
<radialGradient <radialGradient
id="radial-gradient" id="radial-gradient"
cx="0.5" cx="0.5"
cy="1" cy="0.7"
:r="radius" :r="radius"
gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)" gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)"
gradientUnits="objectBoundingBox" gradientUnits="objectBoundingBox"
@ -49,20 +49,21 @@ export default defineComponent({
let gradient; let gradient;
const radius = ref(0); const radius = ref(0);
const think = ref(false); const think = ref(false);
const aiOffset = ref(1); const aiOffset = ref(1.0);
const anime = inject("animejs"); const anime = inject("animejs");
let thinkAnimation;
onMounted(() => { onMounted(() => {
gradient = document.getElementById("radial-gradient"); gradient = document.getElementById("radial-gradient");
// anime({ thinkAnimation = anime({
// targets: gradient, targets: gradient,
// cy: "1.3", loop: true,
// loop: true, cy: "1.3",
// direction: "alternate", direction: "alternate",
// easing: "easeInOutCirc", easing: "easeInOutCirc",
// }); });
}); });
function convertBlock(buffer) { function convertBlock(buffer) {
@ -76,10 +77,6 @@ export default defineComponent({
return outputData; // return the Float32Array return outputData; // return the Float32Array
} }
window.ipcRenderer.on("think", (event, think) => {
console.log("think", think);
});
window.ipcRenderer.on("render-audio", (event, payload) => { window.ipcRenderer.on("render-audio", (event, payload) => {
const floatArray = convertBlock(payload.audio.buffer); const floatArray = convertBlock(payload.audio.buffer);
const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate); const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
@ -105,34 +102,24 @@ export default defineComponent({
} }
}); });
watch(think, (think, prevThink) => { watch(think, async (think, prevThink) => {
if (think) { if (think) {
aiOffset.value = 0.7; console.log("think", think);
anime({ anime({
targets: gradient, targets: gradient,
cy: "0.7", cy: "0.7",
complete: function () {
anime({
targets: gradient,
cy: "1.3",
loop: true,
direction: "alternate",
easing: "easeInOutCirc",
});
},
// loop: true,
// direction: "alternate",
// easing: "easeInOutCirc",
}); });
thinkAnimation.play();
} else { } else {
aiOffset.value = 1; console.log("stop think");
thinkAnimation.pause();
// thinkAnimation.reset();
anime({ anime({
targets: gradient, targets: gradient,
cy: "1", cy: "1",
loop: false,
easing: "easeInOutCirc",
offset: "-=100",
}); });
// thinkAnimation.reset();
} }
}); });
return { return {