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

feat: animate patch1

Browse Source
This commit is contained in:
hufeixiong
2022-01-28 18:05:29 +08:00
parent 3322fd69b8
commit 253dfe14b3
6 changed files with 172 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,7 +118,7 @@ const repeat = ['1', '2', '3', '4', '5', 'infinite'];
const timeFunction: Record<string, string> = { const timeFunction: Record<string, string> = {
平滑: 'linear', 平滑: 'linear',
缓入: 'ease in', 缓入: 'ease-in',
}; };
let lastAnimate: AnimateItem[] = []; let lastAnimate: AnimateItem[] = [];
@@ -302,12 +302,13 @@ function AnimateControl(props: AnimateControlProps) {
<Row style={{ padding: padding, justifyContent: 'space-around' }}> <Row style={{ padding: padding, justifyContent: 'space-around' }}>
{animate.length > 0 && ( {animate.length > 0 && (
<Button <Button
onClick={() => { onClick={async () => {
if (!isOmit) { if (!isOmit) {
isOmit = true; isOmit = true;
props.config.waitAnimate = true;
const cacheProps = animate; const cacheProps = animate;
await props.config.timelineNeedleConfig.resetFunc();
const data: IStoreData = deepCopy(store.getData()); const data: IStoreData = deepCopy(store.getData());
props.config.waitAnimate = true;
data.block.forEach((v) => { data.block.forEach((v) => {
if (v.id === props.current.id) { if (v.id === props.current.id) {
v.animate = []; v.animate = [];
@@ -323,10 +324,9 @@ function AnimateControl(props: AnimateControlProps) {
}); });
isOmit = false; isOmit = false;
props.config.waitAnimate = false; props.config.waitAnimate = false;
store.cleanLast(); props.config.timelineNeedleConfig.status = 'start';
store.setData(clone); store.setData(clone);
store.cleanLast(); store.cleanLast();
props.config.timelineNeedleConfig.resetFunc();
}); });
} }
}} }}

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

@@ -8,6 +8,8 @@ import { transfer } from '../core/transfer';
import { UserConfig } from '../config'; import { UserConfig } from '../config';
import styles from '../index.less'; import styles from '../index.less';
import { RotateReset, RotateResizer } from '../core/rotateHandler'; import { RotateReset, RotateResizer } from '../core/rotateHandler';
import { mergeAnimate } from '../core/utils/animate';
interface BlockProps { interface BlockProps {
data: IBlockType; data: IBlockType;
context: 'edit' | 'preview'; context: 'edit' | 'preview';
@@ -95,39 +97,36 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
props.data.fixed, props.data.fixed,
]); ]);
const animateProps: CSSProperties = useMemo(() => { const [force, animateForce] = useState(0);
const select: CSSProperties = {
animationName: '', useEffect(() => {
animationDelay: '', const fn = () => {
animationDuration: '', animateForce((p) => p + 1);
animationIterationCount: '',
// animationFillMode: 'forwards',// 这个属性和transform冲突
animationTimingFunction: '',
}; };
props.data.animate.forEach((v) => { props.config.blockForceUpdate.push(fn);
select.animationName = const unload = () => {
select.animationName === '' props.config.blockForceUpdate = props.config.blockForceUpdate.filter((v) => v !== fn);
? v.animationName };
: select.animationName + ',' + v.animationName; return () => {
select.animationDelay = unload();
select.animationDelay === '' };
? v.animationDelay + 's' }, [animateForce, props.config]);
: select.animationDelay + ',' + v.animationDelay + 's';
select.animationDuration = const [animateProps, animationEdit]: [CSSProperties, CSSProperties] = useMemo(() => {
select.animationDuration === '' const [normal, editProps] = mergeAnimate(props.data.animate, {
? v.animationDuration + 's' isPause: props.config.timelineNeedleConfig.status === 'pause' ? true : false,
: select.animationDuration + ',' + v.animationDuration + 's'; delay: props.config.timelineNeedleConfig.current,
select.animationIterationCount =
select.animationIterationCount === ''
? v.animationIterationCount
: select.animationIterationCount + ',' + v.animationIterationCount;
select.animationTimingFunction =
select.animationTimingFunction === ''
? v.animationTimingFunction
: select.animationTimingFunction + ',' + v.animationTimingFunction;
}); });
return select; return [
}, [props.data.animate]); {
animation: normal,
},
{
animation: editProps,
},
];
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.data.animate, props.config.timelineNeedleConfig, force]);
const render = useMemo(() => { const render = useMemo(() => {
// 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。 // 如果是编辑模式下，则需要包裹不能选中层，位移层，缩放控制层，平面移动层。
@@ -167,7 +166,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
<div <div
style={{ style={{
...style, ...style,
...animateProps, ...animationEdit,
}} }}
> >
{state} {state}
@@ -180,7 +179,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
pointerEvents: 'none', pointerEvents: 'none',
width: '100%', width: '100%',
height: '100%', height: '100%',
...animateProps, ...animationEdit,
}} }}
> >
{state} {state}
@@ -191,7 +190,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
<span <span
style={{ style={{
pointerEvents: 'none', pointerEvents: 'none',
...animateProps, ...animationEdit,
}} }}
> >
{state} {state}
@@ -214,10 +213,9 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
zIndex: props.data.zIndex, zIndex: props.data.zIndex,
display: props.data.display, display: props.data.display,
transform: `rotate(${props.data.rotate.value}deg)`, transform: `rotate(${props.data.rotate.value}deg)`,
...animateProps,
}} }}
> >
{state} <div style={{ ...animateProps }}>{state}</div>
</div> </div>
); );
} }
@@ -225,14 +223,15 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
state, state,
props.context, props.context,
props.data, props.data,
props.config,
props.iframe, props.iframe,
props.config,
innerDragData, innerDragData,
animateProps, animationEdit,
previewState.top, previewState.top,
previewState.left, previewState.left,
previewState.width, previewState.width,
previewState.height, previewState.height,
animateProps,
]); ]);
return render; return render;
} }

190
packages/dooringx-lib/src/components/timeLine/timeline.tsx
View File

@@ -16,7 +16,9 @@ import {
EyeInvisibleOutlined, EyeInvisibleOutlined,
EyeOutlined, EyeOutlined,
MenuOutlined, MenuOutlined,
PauseCircleOutlined,
PlayCircleOutlined, PlayCircleOutlined,
ReloadOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { import {
TimeLineItem, TimeLineItem,
@@ -165,9 +167,9 @@ const SortableList = SortableContainer(
let cacheBlock: IBlockType[] = []; let cacheBlock: IBlockType[] = [];
// const needleWidth = 2; const needleWidth = 2;
// const initialLeft = 20 - needleWidth / 2; const initialLeft = 20 - needleWidth / 2;
// let timer: number | null = null; let timer: number | null = null;
export function TimeLine(props: TimeLineProps) { export function TimeLine(props: TimeLineProps) {
const store = props.config.getStore(); const store = props.config.getStore();
const data = store.getData().block; const data = store.getData().block;
@@ -223,70 +225,89 @@ export function TimeLine(props: TimeLineProps) {
} }
}, [props.config]); }, [props.config]);
// const [needle, setNeedle] = useState(initialLeft); const [needle, setNeedle] = useState(initialLeft);
//const needleStart = () => { const resetAnimate = async () => {
// props.config.timelineNeedleConfig.current = 0; // 重置动画后才能调整delay
// setNeedle(initialLeft); return new Promise<void>((res) => {
// //每过0.1秒移动2 if (!WAIT) {
// if (timer) { WAIT = true;
// window.clearInterval(timer); props.config.waitAnimate = true;
// } const cache = data.map((v) => {
// props.config.timelineNeedleConfig.status = 'start'; return v.animate;
// const cloneData: IStoreData = deepcopy(store.getData()); });
// store.setData(cloneData); const cloneData: IStoreData = deepcopy(store.getData());
// store.cleanLast(); cloneData.block.forEach((v) => {
// timer = window.setInterval(() => { v.animate = [];
// if (needle < ruleWidth) { });
// setNeedle((pre) => { store.setData(cloneData);
// props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20; setTimeout(() => {
// console.log(props.config.timelineNeedleConfig.current); props.config.timelineNeedleConfig.status = 'pause';
// return pre + 2; const cloneData: IStoreData = deepcopy(store.getData());
// }); cloneData.block.forEach((v, i) => {
// } v.animate = cache[i];
// }, 100); });
// }; WAIT = false;
props.config.waitAnimate = false;
store.setData(cloneData);
store.cleanLast();
res();
});
}
});
};
// const needlePlay = async () => { const needlePlay = async () => {
// if (timer) { if (timer) {
// window.clearInterval(timer); window.clearInterval(timer);
// } }
// await resetAnimate(); //判断如果status不是pause，则要执行reset
// setTimeout(() => { if (props.config.timelineNeedleConfig.status !== 'pause') {
// props.config.timelineNeedleConfig.status = 'pause'; await needleReset();
// timer = window.setInterval(() => { }
// if (needle < ruleWidth) { setTimeout(() => {
// setNeedle((pre) => { timer = window.setInterval(() => {
// props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20; if (needle < ruleWidth) {
// return pre + 2; setNeedle((pre) => {
// }); props.config.timelineNeedleConfig.current = (pre - initialLeft) / 20;
// } return pre + 2;
// }, 100); });
// }); props.config.blockForceUpdate.forEach((v) => v());
// }; }
}, 100);
});
};
// const needleReset = () => { const needleReset = async () => {
// if (timer) { if (timer) {
// window.clearInterval(timer); window.clearInterval(timer);
// } }
// props.config.timelineNeedleConfig.status = 'pause'; props.config.timelineNeedleConfig.status = 'start';
// props.config.timelineNeedleConfig.current = 0; await resetAnimate();
// resetAnimate(); return new Promise<void>((res) => {
// setNeedle(initialLeft); setTimeout(() => {
// store.cleanLast(); props.config.timelineNeedleConfig.status = 'pause';
// }; props.config.timelineNeedleConfig.current = 0;
setNeedle(initialLeft);
const cloneData: IStoreData = deepcopy(store.getData());
store.setData(cloneData);
store.cleanLast();
res();
});
});
};
// const needlePause = () => { const needlePause = () => {
// props.config.timelineNeedleConfig.status = 'pause'; props.config.timelineNeedleConfig.status = 'pause';
// if (timer) { if (timer) {
// window.clearInterval(timer); window.clearInterval(timer);
// } }
// const cloneData: IStoreData = deepcopy(store.getData()); const cloneData: IStoreData = deepcopy(store.getData());
// store.setData(cloneData); store.setData(cloneData);
// store.cleanLast(); store.cleanLast();
// }; };
// props.config.timelineNeedleConfig.resetFunc = needleReset; props.config.timelineNeedleConfig.resetFunc = needleReset;
// props.config.timelineNeedleConfig.runFunc = needleStart; // props.config.timelineNeedleConfig.runFunc = needleStart;
return ( return (
@@ -330,14 +351,18 @@ export function TimeLine(props: TimeLineProps) {
textAlign: 'right', textAlign: 'right',
}} }}
> >
{/* <span <span
style={{ style={{
display: 'inline-block', display: 'inline-block',
cursor: 'pointer', cursor: 'pointer',
marginRight: '10px', marginRight: '10px',
}} }}
> >
<ReloadOutlined onClick={() => needleReset()} /> <ReloadOutlined
onClick={() => {
needleReset();
}}
/>
</span> </span>
<span <span
style={{ style={{
@@ -346,8 +371,12 @@ export function TimeLine(props: TimeLineProps) {
marginRight: '10px', marginRight: '10px',
}} }}
> >
<PauseCircleOutlined onClick={() => needlePause()} /> <PauseCircleOutlined
</span> */} onClick={() => {
needlePause();
}}
/>
</span>
<span <span
title="play" title="play"
style={{ style={{
@@ -356,29 +385,7 @@ export function TimeLine(props: TimeLineProps) {
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => { onClick={() => {
//缓存所有animate后执行 needlePlay();
if (!WAIT) {
WAIT = true;
props.config.waitAnimate = true;
const cache = data.map((v) => {
return v.animate;
});
const cloneData: IStoreData = deepcopy(store.getData());
cloneData.block.forEach((v) => {
v.animate = [];
});
store.setData(cloneData);
setTimeout(() => {
const cloneData: IStoreData = deepcopy(store.getData());
cloneData.block.forEach((v, i) => {
v.animate = cache[i];
});
WAIT = false;
props.config.waitAnimate = false;
store.setData(cloneData);
store.cleanLast();
});
}
}} }}
> >
<PlayCircleOutlined /> <PlayCircleOutlined />
@@ -396,7 +403,7 @@ export function TimeLine(props: TimeLineProps) {
position: 'relative', position: 'relative',
}} }}
> >
{/* <div <div
style={{ style={{
position: 'absolute', position: 'absolute',
transform: `translate(-${scrollx}px, 0px)`, transform: `translate(-${scrollx}px, 0px)`,
@@ -407,8 +414,9 @@ export function TimeLine(props: TimeLineProps) {
left: needle, left: needle,
transition: 'left linear', transition: 'left linear',
willChange: 'left', willChange: 'left',
pointerEvents: 'none',
}} }}
></div> */} ></div>
<div <div
style={{ style={{
display: 'flex', display: 'flex',

2
packages/dooringx-lib/src/components/timeLine/timelineItem.tsx
View File

@@ -158,12 +158,14 @@ export function TimeLineItem(props: TimeLineItemProps) {
}} }}
> >
<div <div
className="yh-timeline-item-left"
style={{ ...commonCss, left: -square }} style={{ ...commonCss, left: -square }}
onMouseDown={(e) => { onMouseDown={(e) => {
resizeMouseDown(e, v, true); resizeMouseDown(e, v, true);
}} }}
></div> ></div>
<div <div
className="yh-timeline-item-right"
style={{ ...commonCss, right: -square }} style={{ ...commonCss, right: -square }}
onMouseDown={(e) => { onMouseDown={(e) => {
resizeMouseDown(e, v, false); resizeMouseDown(e, v, false);

1
packages/dooringx-lib/src/config/index.tsx
View File

@@ -361,6 +361,7 @@ export class UserConfig {
resetFunc: () => {}, resetFunc: () => {},
current: 0, current: 0,
}; };
public blockForceUpdate: Array<Function> = [];
public waitAnimate = false; public waitAnimate = false;
public wrapperMoveState = wrapperMoveState; public wrapperMoveState = wrapperMoveState;
public iframeWrapperMoveState = iframeWrapperMoveState; public iframeWrapperMoveState = iframeWrapperMoveState;

28
packages/dooringx-lib/src/core/utils/animate.ts Normal file
View File

@@ -0,0 +1,28 @@
import { AnimateItem } from '../store/storetype';
// duration
// 1s ease 1s 1 forwards paused bounce ,
export function mergeAnimate(
animate: AnimateItem[],
config = {
delay: 0,
isPause: false,
}
) {
let configstr = '';
let str = '';
animate.forEach((v) => {
configstr =
(configstr === '' ? configstr : configstr + ',') +
`${v.animationDuration}s ${v.animationTimingFunction} ${(
v.animationDelay - config.delay
).toFixed(1)}s ${v.animationIterationCount} forwards ${
config.isPause ? 'paused' : 'running'
} ${v.animationName}`;
str =
(str === '' ? str : str + ',') +
`${v.animationDuration}s ${v.animationTimingFunction} ${v.animationDelay}s ${
v.animationIterationCount
} forwards ${'running'} ${v.animationName}`;
});
return [str, configstr];
}