add thinking animation
This commit is contained in:
parent
e225fff264
commit
e8413604d6
1 changed files with 35 additions and 3 deletions
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue