diff --git a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx b/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx index 6a026ef..0f69cf7 100644 --- a/packages/dooringx-example/src/plugin/formComponents/animateControl.tsx +++ b/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,167 +135,176 @@ 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 (
- - 动画名称: - - { + const cloneData: IStoreData = deepCopy(store.getData()); + cloneData.block.forEach((w) => { + if (w.id === props.current.id) { + w.animate.forEach((f) => { + if (f.uid === v.uid) { + f.animationName = d; + } + }); } }); - } - }); - store.setData(cloneData); - }} - > - {Object.keys(animateCategory).map((v, i) => { - return ( - - {animateCategory[v]} - - ); - })} - - - - 持续时间: - - - `${value}s`} - min={0} - onChange={(d) => { - const cloneData: IStoreData = deepCopy(store.getData()); - cloneData.block.forEach((w) => { - if (w.id === props.current.id) { - w.animate.forEach((f) => { - if (f.uid === v.uid) { - f.animationDuration = d; + store.setData(cloneData); + }} + > + {Object.keys(animateCategory).map((v, i) => { + return ( + + {animateCategory[v]} + + ); + })} + + + + 持续时间: + + + `${value}s`} + min={0} + onChange={(d) => { + const cloneData: IStoreData = deepCopy(store.getData()); + cloneData.block.forEach((w) => { + if (w.id === props.current.id) { + w.animate.forEach((f) => { + if (f.uid === v.uid) { + f.animationDuration = d; + } + }); } }); - } - }); - store.setData(cloneData); - }} - /> - - - - 延迟时间: - - `${value}s`} - min={0} - step="0.1" - onChange={(d) => { - const cloneData: IStoreData = deepCopy(store.getData()); - cloneData.block.forEach((w) => { - if (w.id === props.current.id) { - w.animate.forEach((f) => { - if (f.uid === v.uid) { - f.animationDelay = d; + store.setData(cloneData); + }} + /> + + + + 延迟时间: + + `${value}s`} + min={0} + step="0.1" + onChange={(d) => { + const cloneData: IStoreData = deepCopy(store.getData()); + cloneData.block.forEach((w) => { + if (w.id === props.current.id) { + w.animate.forEach((f) => { + if (f.uid === v.uid) { + f.animationDelay = d; + } + }); } }); - } - }); - store.setData(cloneData); - }} - /> - - - 重复次数: - - - { + const cloneData: IStoreData = deepCopy(store.getData()); + cloneData.block.forEach((w) => { + if (w.id === props.current.id) { + w.animate.forEach((f) => { + if (f.uid === v.uid) { + f.animationIterationCount = d; + } + }); } }); - } - }); - store.setData(cloneData); - }} - > - {repeat.map((v, i) => { - return ( - - {v} - - ); - })} - - - - - 运动函数: - - + + + + 运动函数: + + - - - - - + store.setData(cloneData); + }} + > + {Object.keys(timeFunction).map((v, i) => { + return ( + + {v} + + ); + })} + + + + + + + + )}
); })} @@ -356,8 +366,68 @@ function AnimateControl(props: AnimateControlProps) { > 添加动画 - + + { + console.log('ok', form.getFieldsValue()); + }} + onCancel={() => { + setCustomModal(false); + }} + > +
+ + + + + + + + + + + + {(fields, { add, remove }) => ( + <> + {fields.map(({ key, name, ...restField }) => ( + + + + + + + + + + + + + + + remove(name)} /> + + ))} + + + + + )} + +
+ ); } diff --git a/packages/dooringx-lib/src/core/dynamicAnimate/index.ts b/packages/dooringx-lib/src/core/dynamicAnimate/index.ts new file mode 100644 index 0000000..7d464ec --- /dev/null +++ b/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) { + // name 唯一 + Object.keys(obj).forEach((v) => { + this.inserKeyframeAnimate(obj[v], v); + }); + } +} diff --git a/packages/dooringx-lib/src/core/store/storetype.ts b/packages/dooringx-lib/src/core/store/storetype.ts index 7043665..eecd3d7 100644 --- a/packages/dooringx-lib/src/core/store/storetype.ts +++ b/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 {