add thinking animation

This commit is contained in:
Enrique Hernandez 2020-11-10 09:00:11 -06:00
commit e8413604d6

View file

@ -9,7 +9,7 @@
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#fff" />
<stop id="sound" offset="1" stop-color="rgb(230, 230, 230)" />
<stop id="sound" offset="1" stop-color="rgb(230, 230, 23)" />
</radialGradient>
<filter id="Rectangle_410" x="0" y="0" width="380" height="530" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha" />
@ -55,6 +55,14 @@ export default defineComponent({
onMounted(() => {
gradient = document.getElementById("radial-gradient");
// anime({
// targets: gradient,
// cy: "1.3",
// loop: true,
// direction: "alternate",
// easing: "easeInOutCirc",
// });
});
function convertBlock(buffer) {
@ -99,13 +107,37 @@ export default defineComponent({
watch(think, (think, prevThink) => {
if (think) {
console.log("think");
aiOffset.value = 0.7;
anime({
targets: gradient,
cy: "0.7",
complete: function () {
anime({
targets: gradient,
cy: "1.3",
loop: true,
direction: "alternate",
easing: "easeInOutCirc",
});
},
// loop: true,
// direction: "alternate",
// easing: "easeInOutCirc",
});
} else {
console.log("dont think");
aiOffset.value = 1;
anime({
targets: gradient,
cy: "1",
loop: false,
easing: "easeInOutCirc",
offset: "-=100",
});
}
});
return {
radius,
aiOffset,
};
},
});