fix: 애니메이션 디테일 수정

boostcampwm-2022 · Dec 16, 2022 · 297254b · 297254b
1 parent f43c2f7
commit 297254b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 44 deletions.
diff --git a/client/src/images/Waiting.tsx b/client/src/images/Waiting.tsx
@@ -71,44 +71,34 @@ const Relaxing = (): ReactElement => {
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-      <path
-        vectorEffect="non-scaling-stroke"
-        d="M309.169 74.3152V74.6952"
-        stroke="#3F3F3F"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
+      <g>
         <animateTransform
           attributeName="transform"
           attributeType="XML"
           type="translate"
           begin="0s"
-          dur="6s"
-          values="2,0;2,0;-3,0;-3,0;2,0"
-          keyTimes="0;0.3;0.5;0.8;1"
+          dur="3s"
+          values="3,0;3,0;-3,0;-3,0;3,0"
+          keyTimes="0;0.35;0.5;0.85;1"
           repeatCount="indefinite"
         />
-      </path>
-      <path
-        vectorEffect="non-scaling-stroke"
-        d="M346.019 70.2152V70.5352"
-        stroke="#3F3F3F"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <animateTransform
-          attributeName="transform"
-          attributeType="XML"
-          type="translate"
-          begin="0s"
-          dur="6s"
-          values="3,0;3,0;-2,0;-2,0;3,0"
-          keyTimes="0;0.3;0.5;0.8;1"
-          repeatCount="indefinite"
+        <path
+          vectorEffect="non-scaling-stroke"
+          d="M309.169 74.3152V74.6952"
+          stroke="#3F3F3F"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
-      </path>
+        <path
+          vectorEffect="non-scaling-stroke"
+          d="M346.019 70.2152V70.5352"
+          stroke="#3F3F3F"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <path
         vectorEffect="non-scaling-stroke"
         d="M319.279 81.7952L332.809 79.8652"
@@ -623,7 +613,7 @@ const Relaxing = (): ReactElement => {
           type="rotate"
           from="0 531.115 200.567"
           to="360 531.115 200.567"
-          dur="60s"
+          dur="30s"
           repeatCount="indefinite"
         />
       </path>
@@ -641,7 +631,7 @@ const Relaxing = (): ReactElement => {
           type="rotate"
           from="0 531.115 200.567"
           to="360 531.115 200.567"
-          dur="3600s"
+          dur="1800s"
           repeatCount="indefinite"
         />
       </path>

diff --git a/client/src/images/Working.tsx b/client/src/images/Working.tsx
@@ -38,7 +38,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             attributeType="XML"
             type="rotate"
             dur="0.5s"
-            values="-10,302.45,178.61;10,302.45,178.61;-10,302.45,178.61;"
+            values="-10,302.45,178.61;5,302.45,178.61;-10,302.45,178.61;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -56,7 +56,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             attributeType="XML"
             type="rotate"
             dur="0.6s"
-            values="10,302.45,178.61;-10,302.45,178.61;10,302.45,178.61;"
+            values="5,302.45,178.61;-10,302.45,178.61;5,302.45,178.61;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -75,7 +75,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             type="rotate"
             dur="0.5s"
             begin="0.1s"
-            values="10,302.45,178.61;-10,302.45,178.61;10,302.45,178.61;"
+            values="5,302.45,178.61;-10,302.45,178.61;5,302.45,178.61;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -94,7 +94,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             type="rotate"
             dur="0.8s"
             begin="0.2s"
-            values="10,302.45,178.61;-10,302.45,178.61;10,302.45,178.61;"
+            values="5,302.45,178.61;-10,302.45,178.61;5,302.45,178.61;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -127,7 +127,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             type="rotate"
             dur="0.8s"
             begin="0s"
-            values="10,362.67,181.97;-10,362.67,181.97;10,362.67,181.97;"
+            values="5,362.67,181.97;-10,362.67,181.97;5,362.67,181.97;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -153,7 +153,7 @@ const Working = ({ transform }: PropsType): ReactElement => {
             type="rotate"
             dur="0.8s"
             begin="0.4s"
-            values="10,362.67,181.97;-10,362.67,181.97;10,362.67,181.97;"
+            values="5,362.67,181.97;-10,362.67,181.97;5,362.67,181.97;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -170,9 +170,9 @@ const Working = ({ transform }: PropsType): ReactElement => {
             attributeName="transform"
             attributeType="XML"
             type="rotate"
-            dur="0.5s"
+            dur="0.7s"
             begin="0.4s"
-            values="10,346.52,193.2;-10,346.52,193.2;10,346.52,193.2;"
+            values="5,346.52,193.2;-10,346.52,193.2;5,346.52,193.2;"
             keyTimes="0;0.5;1"
             repeatCount="indefinite"
           />
@@ -259,10 +259,10 @@ const Working = ({ transform }: PropsType): ReactElement => {
             attributeName="transform"
             attributeType="XML"
             type="translate"
-            dur="1.5s"
-            begin="0.4s"
-            values="0,0;3,0;0,0"
-            keyTimes="0;0.7;1"
+            dur="3s"
+            begin="0s"
+            values="0,0;5,0;0,0"
+            keyTimes="0;0.75;1"
             repeatCount="indefinite"
           />
           <path