[#164] Fixes AnimationProperty

Author: salgum1114

src/components/canvas/handlers/AnimationHandler.ts

@@ -28,7 +28,7 @@ class AnimationHandler {
 		if (findObject.animation.type === 'none') {
 			return;
 		}
-		const instance = this.getAnimation(findObject, hasControls);
+		const instance = this.getAnime(findObject, hasControls);
 		if (instance) {
 			findObject.set('anime', instance);
 			findObject.set({
@@ -184,9 +184,9 @@ class AnimationHandler {
 	 * @param {boolean} [hasControls]
 	 * @returns
 	 */
-	getAnimation = (obj: FabricObject, hasControls?: boolean) => {
-		const { delay = 100, duration = 100, autoplay = true, loop = true, type, ...other } = obj.animation;
-		const option = {
+	getAnime = (obj: FabricObject, hasControls?: boolean) => {
+		const { delay = 0, duration = 100, autoplay = true, loop = true, type, ...other } = obj.animation;
+		const option: anime.AnimeParams = {
 			targets: obj,
 			delay,
 			loop,
@@ -280,12 +280,15 @@ class AnimationHandler {
 				easing: 'easeInQuad',
 			});
 		} else if (type === 'rotation') {
+			const { angle = 360 } = other;
+			obj.set('rotation', obj.angle);
 			obj.set('originAngle', obj.angle);
 			obj.set('originLeft', obj.left);
 			obj.set('originTop', obj.top);
 			Object.assign(option, {
-				rotation: other.angle,
-				easing: 'easeInQuad',
+				rotation: angle,
+				easing: 'linear',
+				direction: 'normal',
 			});
 		} else if (type === 'flash') {
 			const { fill = obj.fill, stroke = obj.stroke } = other;

src/components/imagemap/ImageMapEditor.js

@@ -65,7 +65,6 @@ const defaultOption = {
 		type: 'none',
 		loop: true,
 		autoplay: true,
-		delay: 100,
 		duration: 1000,
 	},
 	userProperty: {},

src/components/imagemap/properties/AnimationProperty.js

@@ -67,12 +67,12 @@ export default {
 											rules: [
 												{
 													type: 'number',
-													min: 100,
+													min: 0,
 													max: 5000,
 												},
 											],
-											initialValue: data.animation.delay,
-										})(<Slider min={100} max={5000} step={100} />)}
+											initialValue: data.animation.delay || 0,
+										})(<Slider min={0} max={5000} step={100} />)}
 									</Form.Item>
 								</Col>
 								<Col span={12}>
@@ -234,7 +234,7 @@ export default {
 								max: 360,
 							},
 						],
-						initialValue: data.animation.angle || data.angle,
+						initialValue: data.animation.angle || 360,
 					})(<Slider min={0} max={360} />)}
 				</Form.Item>
 			);