add tmp

packages/dooringx-example/src/plugin/formComponents/animateControl.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { UserConfig, deepCopy, createUid } from 'dooringx-lib';
-import { Col, Row, Select, InputNumber, Button } from 'antd';
+import { Col, Row, Select, InputNumber, Button, Modal, Form, Space, Input } from 'antd';
 import { FormMap, FormBaseType } from '../formTypes';
 import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
 import { AnimateItem, IBlockType, IStoreData } from 'dooringx-lib/dist/core/store/storetype';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
 export interface FormAnimateControlType extends FormBaseType {}
 
@@ -134,11 +135,18 @@ function AnimateControl(props: AnimateControlProps) {
 		lastAnimate = props.current.animate;
 		return props.current.animate;
 	}, [props.current.animate]);
+
+	const [customModal, setCustomModal] = useState(false);
+	const [form] = Form.useForm();
+
 	return (
 		<>
 			{animate.map((v, i) => {
 				return (
 					<div key={v.uid} style={{ borderBottom: '1px dotted #9e9e9e' }}>
+						{v.isCustom && <div>自定义</div>}
+						{!v.isCustom && (
+							<>
 								<Row style={{ padding: padding, alignItems: 'center' }}>
 									<Col span={5}>动画名称:</Col>
 									<Col span={7}>
@@ -295,6 +303,8 @@ function AnimateControl(props: AnimateControlProps) {
 										</Button>
 									</Col>
 								</Row>
+							</>
+						)}
 					</div>
 				);
 			})}
@@ -356,8 +366,68 @@ function AnimateControl(props: AnimateControlProps) {
 				>
 					添加动画
 				</Button>
-				<Button>添加自定义动画</Button>
+				<Button
+					onClick={() => {
+						setCustomModal(true);
+					}}
+				>
+					添加自定义动画
+				</Button>
 			</Row>
+			<Modal
+				width={800}
+				title={'设置自定义动画'}
+				forceRender
+				visible={customModal}
+				onOk={() => {
+					console.log('ok', form.getFieldsValue());
+				}}
+				onCancel={() => {
+					setCustomModal(false);
+				}}
+			>
+				<Form form={form}>
+					<Col>
+						<Form.Item name={'kkk'} label="解决">
+							<Select></Select>
+						</Form.Item>
+					</Col>
+					<Col>
+						<Form.Item name={'dfd'} label="解决">
+							<Select></Select>
+						</Form.Item>
+					</Col>
+					<Form.List name="users">
+						{(fields, { add, remove }) => (
+							<>
+								{fields.map(({ key, name, ...restField }) => (
+									<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
+										<Form.Item label="坐标" {...restField} name={[name, 'xx']}>
+											<Input placeholder="First Name" />
+										</Form.Item>
+										<Form.Item label="坐标" {...restField} name={[name, 'cc']}>
+											<Input placeholder="Last Name" />
+										</Form.Item>
+										<Form.Item label="坐标" {...restField} name={[name, '坐标']}>
+											<Input placeholder="First Name" />
+										</Form.Item>
+										<Form.Item label="坐标" {...restField} name={[name, '旋转']}>
+											<Input placeholder="Last Name" />
+										</Form.Item>
+
+										<MinusCircleOutlined onClick={() => remove(name)} />
+									</Space>
+								))}
+								<Form.Item>
+									<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+										Add field
+									</Button>
+								</Form.Item>
+							</>
+						)}
+					</Form.List>
+				</Form>
+			</Modal>
 		</>
 	);
 }

packages/dooringx-lib/src/core/dynamicAnimate/index.ts

@@ -0,0 +1,42 @@
+// 批量情况
+
+export class DynamicAnimate {
+	getStyleSheets() {
+		return document.styleSheets;
+	}
+
+	inserKeyframeAnimate(ruleText: string, keyframeName: string) {
+		const sheets = this.getStyleSheets();
+		if (sheets.length === 0) {
+			let style = document.createElement('style');
+			style.appendChild(document.createTextNode(''));
+			document.head.appendChild(style);
+		}
+		const len = sheets.length;
+		let ss: number | null = null;
+		let st: number | null = null;
+		for (let i = 0; i < len; i++) {
+			for (let k = 0; k < sheets[i].cssRules.length; k++) {
+				const rule = sheets[i].cssRules[k] as CSSKeyframesRule;
+				const name = rule?.name;
+				if (name && name === keyframeName) {
+					// 删除该keyframe
+					ss = i;
+					st = k;
+				}
+			}
+		}
+		if (ss !== null && st !== null) {
+			sheets[ss].deleteRule(st);
+		}
+		let sheet = sheets[ss ? ss : sheets.length - 1] as CSSStyleSheet;
+		sheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);
+	}
+
+	fromObjInsertKeyFrame(obj: Record<string, string>) {
+		// name 唯一
+		Object.keys(obj).forEach((v) => {
+			this.inserKeyframeAnimate(obj[v], v);
+		});
+	}
+}

packages/dooringx-lib/src/core/store/storetype.ts

@@ -27,6 +27,7 @@ export interface AnimateItem {
 	animationIterationCount: string;
 	animationTimingFunction: string;
 	isCustom?: boolean;
+	customKeyFrame?: string;
 }
 
 export interface IBlockType {