guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animate restruct

Browse Source
This commit is contained in:
hufeixiong
2021-08-06 21:41:31 +08:00
parent 6531d6c496
commit d744c9a80f
5 changed files with 136 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
packages/dooringx-example/src/plugin/formComponents/animateControl.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo, useState } from 'react';
import { UserConfig, deepCopy } from 'dooringx-lib';
import { Col, Row, Select, InputNumber } from 'antd';
import { Col, Row, Select, InputNumber, Button } from 'antd';
import { FormMap, FormBaseType } from '../formTypes';
import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
import { AnimateItem, IBlockType, IStoreData } from 'dooringx-lib/dist/core/store/storetype';
export interface FormAnimateControlType extends FormBaseType {}
@@ -112,195 +112,134 @@ const animateCategory: Record<string, string> = {
animate__slideOutDown: 'slideOutDown',
animate__slideOutLeft: 'slideOutLeft',
animate__slideOutRight: 'slideOutRight',
animate__slideOutUp: 'slideOutUp',
};
const animateRepeat: Record<string, string> = {
'': '无',
'1': '1次',
'2': '2次',
'3': '3次',
'4': '4次',
infinite: '无限',
const duration = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
const delay = ['0s', '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s'];
const repeat = ['1', '2', '3', '4', '5', 'infinite'];
const timeFunction = {
平滑: 'linear',
缓入: 'ease in',
};
const animateSpeed: Record<string, string> = {
'': '普通',
animate__slow: '特慢',
animate__slower: '慢速',
animate__fast: '快速',
animate__faster: '特快',
};
let lastAnimate = '';
/**
*
* 这个控制组件配置项写死，只可能出现或者不出现
* @return {*}
*/
function AnimateControl(props: AnimateControlProps) {
const [count, setCount] = useState<number | null>(null);
const [sign, setSign] = useState(false);
const v1 = useMemo(() => {
if (sign) {
return lastAnimate;
} else {
const val = props.current.animate.animate
? animateCategory[props.current.animate.animate]
: '';
lastAnimate = val;
return val;
}
}, [props.current.animate.animate, sign]);
const v2 = useMemo(() => {
if (typeof props.current.animate.animationIterationCount === 'number') {
setCount(props.current.animate.animationIterationCount);
return '';
} else {
setCount(null);
return props.current.animate.animationIterationCount
? animateRepeat[props.current.animate.animationIterationCount]
: '';
}
}, [props.current.animate.animationIterationCount]);
const v3 = useMemo(() => {
return animateSpeed[props.current.animate.speed ?? ''];
}, [props.current.animate.speed]);
const changeAnimation = (
e: any,
props: AnimateControlProps,
type: 'animate' | 'animationIterationCount' | 'speed'
) => {
if (type === 'animationIterationCount') {
setCount(null);
}
const clonedata = deepCopy(props.config.getStore().getData());
const newblock = clonedata.block.map((v: IBlockType) => {
if (v.id === props.current.id) {
if (type === 'animationIterationCount') {
v.animate[type] = Number(e);
}
v.animate[type] = e;
}
return v;
});
const [item] = clonedata.block.filter((item: IBlockType) => item.id === props.current.id);
if (item?.animate?.animate) {
const cloneNewBlock = deepCopy(newblock);
const temporaryBlock = cloneNewBlock.map((item: IBlockType) => {
if (item.id === props.current.id) {
delete item.animate.animate;
}
return item;
});
setSign(true);
// 若有动画属性则删除动画属性再将动画属性添加
props.config.getStore().setData({ ...clonedata, block: [...temporaryBlock] });
}
setTimeout(() => {
props.config.getStore().setData({ ...clonedata, block: [...newblock] });
setSign(false);
});
};
const animate = props.current.animate;
const store = props.config.getStore();
return (
<>
<Row style={{ padding: '20px' }}>
<Col span={6} style={{ lineHeight: '30px' }}>
动画种类
</Col>
<Col span={18}>
<Select
value={v1}
onChange={(e) => changeAnimation(e, props, 'animate')}
style={{ width: '100%' }}
>
{Object.keys(animateCategory).map((v) => {
return (
<Select.Option value={v} key={v}>
{animateCategory[v]}
</Select.Option>
);
})}
</Select>
</Col>
</Row>
<Row style={{ padding: '20px' }}>
<Col span={6} style={{ lineHeight: '30px' }}>
频率
</Col>
<Col span={18} style={{ display: 'flex', justifyContent: 'space-between' }}>
<InputNumber
min={1}
value={count as number}
onChange={(value) => {
setCount(value);
const clonedata = deepCopy(props.config.getStore().getData());
const newblock = clonedata.block.map((v: IBlockType) => {
if (v.id === props.current.id) {
v.animate.animationIterationCount = value;
}
return v;
});
{animate.map((v, i) => {
return (
<div key={props.current.id + i}>
<Row style={{ padding: '20px', alignItems: 'center' }}>
<Col span={3}>动画:</Col>
<Col span={8}>
<Select style={{ width: '80%' }}>
{Object.keys(animateCategory).map((v, i) => {
return (
<Select.Option key={i} value={animateCategory[v]}>
{animateCategory[v]}
</Select.Option>
);
})}
</Select>
</Col>
<Col span={5}>持续时间:</Col>
<Col span={8}>
<Select style={{ width: '100%' }}>
{duration.map((v, i) => {
return (
<Select.Option key={i} value={v}>
{v}
</Select.Option>
);
})}
</Select>
</Col>
</Row>
<Row style={{ padding: '20px', alignItems: 'center' }}>
<Col span={3}>延迟:</Col>
<Col span={8}>
<Select style={{ width: '80%' }}>
{delay.map((v, i) => {
return (
<Select.Option key={i} value={v}>
{v}
</Select.Option>
);
})}
</Select>
</Col>
<Col span={5}>重复次数:</Col>
<Col span={8}>
<Select style={{ width: '100%' }}>
{repeat.map((v, i) => {
return (
<Select.Option key={i} value={v}>
{v}
</Select.Option>
);
})}
</Select>
</Col>
</Row>
<Row style={{ padding: '20px' }}>
<Col span={3}>延迟:</Col>
<Col span={8}>
<Select style={{ width: '80%' }}>
{delay.map((v, i) => {
return (
<Select.Option key={i} value={v}>
{v}
</Select.Option>
);
})}
</Select>
</Col>
<Col span={8} style={{ justifyContent: 'flex-end' }}>
<Button
danger
onClick={() => {
const cloneData: IStoreData = deepCopy(store.getData());
cloneData.block.map((v) => {
if (v.id === props.current.id) {
v.animate.splice(i, 1);
}
});
store.setData(cloneData);
}}
>
删除
</Button>
</Col>
</Row>
</div>
);
})}
const [item] = clonedata.block.filter(
(item: IBlockType) => item.id === props.current.id
);
if (item?.animate?.animate) {
const cloneNewBlock = deepCopy(newblock);
const temporaryBlock = cloneNewBlock.map((item: IBlockType) => {
if (item.id === props.current.id) {
delete item.animate.animate;
}
return item;
});
setSign(true);
props.config.getStore().setData({ ...clonedata, block: [...temporaryBlock] });
<Row style={{ padding: '20px', justifyContent: 'center' }}>
<Button
onClick={() => {
const cloneData: IStoreData = deepCopy(store.getData());
const newItem: AnimateItem = {
animationName: '',
animationDelay: '0s',
animationDuration: '1s',
animationTimingFunction: 'linear',
animationIterationCount: 1,
};
cloneData.block.map((v) => {
if (v.id === props.current.id) {
v.animate.push(newItem);
}
setTimeout(() => {
props.config.getStore().setData({ ...clonedata, block: [...newblock] });
setSign(false);
});
}}
></InputNumber>
<Select
value={v2}
onChange={(e) => changeAnimation(e, props, 'animationIterationCount')}
style={{ width: '60%' }}
>
{Object.keys(animateRepeat).map((v) => {
return (
<Select.Option value={v} key={v}>
{animateRepeat[v]}
</Select.Option>
);
})}
</Select>
</Col>
</Row>
<Row style={{ padding: '20px' }}>
<Col span={6} style={{ lineHeight: '30px' }}>
动画速度
</Col>
<Col span={18}>
<Select
value={v3}
onChange={(e: any) => changeAnimation(e, props, 'speed')}
style={{ width: '100%' }}
>
{Object.keys(animateSpeed).map((v) => {
return (
<Select.Option value={v} key={v}>
{animateSpeed[v]}
</Select.Option>
);
})}
</Select>
</Col>
});
store.setData(cloneData);
}}
>
添加动画
</Button>
</Row>
</>
);

29
packages/dooringx-lib/src/components/blocks.tsx
View File

@@ -95,22 +95,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.data.fixed,
]);
const animatecss = useMemo(() => {
const animate = props.data.animate;
if (Object.keys(animate).length > 0) {
return `animate__animated ${animate.animate ?? ''} ${animate.delay ?? ''} ${
animate.speed ?? ''
}`;
}
return '';
}, [props.data.animate]);
const animateCount = useMemo(() => {
const animate = props.data.animate;
if (Object.keys(animate).length > 0) {
return { animationIterationCount: animate.animationIterationCount };
}
return { animationIterationCount: '' };
}, [props.data.animate]);
console.log(props.data.animate);
const render = useMemo(() => {
// 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
@@ -141,20 +126,14 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
}}
>
{/* 绝对定位元素 */}
{props.data.position !== 'static' && (
<div className={animatecss} style={{ ...style, ...animateCount }}>
{state}
</div>
)}
{props.data.position !== 'static' && <div style={{ ...style }}>{state}</div>}
{/* 静态定位 非行内 这里暂不考虑布局影响 */}
{props.data.position === 'static' && props.data.display !== 'inline' && (
<div
className={animatecss}
style={{
pointerEvents: 'none',
width: '100%',
height: '100%',
...animateCount,
}}
>
{state}
@@ -171,7 +150,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
} else {
return (
<div
className={animatecss}
style={{
position: props.data.fixed ? 'fixed' : props.data.position,
top: previewState.top,
@@ -181,7 +159,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
zIndex: props.data.zIndex,
display: props.data.display,
transform: `rotate(${props.data.rotate.value}deg)`,
...animateCount,
}}
>
{state}
@@ -195,8 +172,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.iframe,
props.config,
innerDragData,
animatecss,
animateCount,
previewState.top,
previewState.left,
previewState.width,

4
packages/dooringx-lib/src/core/components/createBlock.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-21 20:56:01
* @LastEditTime: 2021-08-06 10:24:32
* @FilePath: \dooringx\packages\dooringx-lib\src\core\components\createBlock.ts
*/
import { IBlockType } from '../store/storetype';
@@ -28,7 +28,7 @@ export function createBlock(top: number, left: number, ComponentItem: ComponentI
canDrag: ComponentItem.initData.canDrag ?? true,
eventMap: ComponentItem.initData.eventMap || {},
functionList: ComponentItem.initData.functionList || [],
animate: ComponentItem.initData.animate || {},
animate: ComponentItem.initData.animate || [],
fixed: ComponentItem.initData.fixed || false,
rotate: ComponentItem.initData.rotate || {
value: 0,

18
packages/dooringx-lib/src/core/store/storetype.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-03-14 04:29:09
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-21 20:54:38
* @LastEditTime: 2021-08-06 21:27:19
* @FilePath: \dooringx\packages\dooringx-lib\src\core\store\storetype.ts
*/
@@ -19,6 +19,13 @@ export interface IStoreData {
globalState: Record<string, any>;
modalConfig: Record<string, any>;
}
export interface AnimateItem {
animationName: string;
animationDuration: string;
animationDelay: string;
animationIterationCount: string;
animationTimingFunction: string;
}
export interface IBlockType {
id: string;
@@ -41,13 +48,6 @@ export interface IBlockType {
value: number;
canRotate: boolean;
};
animate: {
animate?: string; //动画名
animationIterationCount?: number | string;
speed?: //动画速度
'animate__slow' | 'animate__slower' | 'animate__fast' | 'animate__faster' | '';
delay?: //首次延迟
'animate__delay-2s' | 'animate__delay-3s' | 'animate__delay-4s' | 'animate__delay-5s' | '';
};
animate: AnimateItem[];
fixed: boolean; // 用于制作fixed组件
}

4
packages/dooringx-lib/src/core/storeChanger/index.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili
* @Date: 2021-04-05 14:55:31
* @LastEditors: yehuozhili
* @LastEditTime: 2021-07-27 16:50:09
* @LastEditTime: 2021-08-06 16:21:01
* @FilePath: \dooringx\packages\dooringx-lib\src\core\storeChanger\index.ts
*/
@@ -40,7 +40,7 @@ function createDefaultModalBlock(): IStoreData['block'] {
canDrag: false,
eventMap: {},
functionList: [],
animate: {},
animate: [],
fixed: true,
rotate: {
value: 0,