cineview 0.0.1-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +102 -0
- package/README.zh-CN.md +102 -0
- package/dist/animations/animationParser.d.ts +24 -0
- package/dist/animations/composer.d.ts +13 -0
- package/dist/animations/presets/blink.d.ts +18 -0
- package/dist/animations/presets/blur.d.ts +18 -0
- package/dist/animations/presets/bounce.d.ts +18 -0
- package/dist/animations/presets/elastic.d.ts +23 -0
- package/dist/animations/presets/fade.d.ts +18 -0
- package/dist/animations/presets/flip.d.ts +18 -0
- package/dist/animations/presets/index.d.ts +38 -0
- package/dist/animations/presets/rotate.d.ts +23 -0
- package/dist/animations/presets/shake.d.ts +28 -0
- package/dist/animations/presets/slide.d.ts +23 -0
- package/dist/animations/presets/special.d.ts +38 -0
- package/dist/animations/presets/zoom.d.ts +23 -0
- package/dist/animations/registry.d.ts +51 -0
- package/dist/artifacts.json +40 -0
- package/dist/blink-BGmsrTwW.mjs +81 -0
- package/dist/blur-CQoB_VWp.mjs +52 -0
- package/dist/bounce-B_QJxgOq.mjs +64 -0
- package/dist/cineview-dev.css +2 -0
- package/dist/cineview-dev.es.mjs +2 -0
- package/dist/cineview-drag.umd.js +2 -0
- package/dist/cineview-scroll.umd.js +2 -0
- package/dist/cineview.es.mjs +2 -0
- package/dist/cineview.umd.js +2 -0
- package/dist/components/Animate/Animate.d.ts +67 -0
- package/dist/components/Animate/AnimateRenderBridge.d.ts +16 -0
- package/dist/components/Animate/AnimateVideo.d.ts +59 -0
- package/dist/components/Animate/StaggerContainer.d.ts +35 -0
- package/dist/components/Animate/__fixtures__/animate-media-public-path.fixture.d.ts +1 -0
- package/dist/components/Animate/animateInterpolation.d.ts +41 -0
- package/dist/components/Animate/animateRenderState.d.ts +23 -0
- package/dist/components/Animate/animateSemantics.d.ts +38 -0
- package/dist/components/Animate/animateTimeline.d.ts +14 -0
- package/dist/components/Animate/dragVisualState.d.ts +26 -0
- package/dist/components/Animate/index.d.ts +6 -0
- package/dist/components/Animate/useAnimateArrival.d.ts +35 -0
- package/dist/components/Animate/useAnimateDrag.d.ts +34 -0
- package/dist/components/Animate/useAnimatePublicTimeline.d.ts +16 -0
- package/dist/components/Animate/useAnimateScroll.d.ts +83 -0
- package/dist/components/Animate/useAnimatedPropertyLanes.d.ts +30 -0
- package/dist/components/Animate/visibilityScheduler.d.ts +12 -0
- package/dist/components/Cineview/Cineview.d.ts +46 -0
- package/dist/components/Cineview/CineviewDispatch.d.ts +2 -0
- package/dist/components/Cineview/DirectScrollCineview.d.ts +8 -0
- package/dist/components/Cineview/DragSceneStack.d.ts +55 -0
- package/dist/components/Cineview/ScrollSceneSlot.d.ts +42 -0
- package/dist/components/Cineview/ScrollSceneStack.d.ts +13 -0
- package/dist/components/Cineview/ScrollbarOverlay.d.ts +24 -0
- package/dist/components/Cineview/directScrollHelpers.d.ts +77 -0
- package/dist/components/Cineview/index.d.ts +5 -0
- package/dist/components/Cineview/preloadTargets.d.ts +18 -0
- package/dist/components/Cineview/regroupCallbacks.d.ts +10 -0
- package/dist/components/Cineview/useCineviewImperativeApi.d.ts +21 -0
- package/dist/components/Cineview/useNativeScrollController.d.ts +38 -0
- package/dist/components/Cineview/useScrollInputBindings.d.ts +9 -0
- package/dist/components/Cineview/useScrollSceneLayout.d.ts +24 -0
- package/dist/components/Cineview/useScrollSceneSnapshots.d.ts +32 -0
- package/dist/components/Cineview/useScrollViewport.d.ts +20 -0
- package/dist/components/Cineview/useScrollZoneRegistry.d.ts +35 -0
- package/dist/components/Container/Container.d.ts +2 -0
- package/dist/components/Container/index.d.ts +1 -0
- package/dist/components/Image/Image.d.ts +12 -0
- package/dist/components/Image/index.d.ts +2 -0
- package/dist/components/Position/Position.d.ts +13 -0
- package/dist/components/Position/index.d.ts +1 -0
- package/dist/components/Scene/Scene.d.ts +10 -0
- package/dist/components/Scene/SceneFixedLayer.d.ts +14 -0
- package/dist/components/Scene/__fixtures__/scene-grouped-public-path.fixture.d.ts +1 -0
- package/dist/components/Scene/dragPreparedState.d.ts +49 -0
- package/dist/components/Scene/helpers.d.ts +101 -0
- package/dist/components/Scene/index.d.ts +1 -0
- package/dist/components/Scene/sceneScrollBudget.d.ts +38 -0
- package/dist/components/Scene/sceneScrollRuntime.d.ts +65 -0
- package/dist/components/Scene/types.d.ts +189 -0
- package/dist/components/Scene/useDragSceneEngine.d.ts +67 -0
- package/dist/components/Scene/useElementTrack.d.ts +82 -0
- package/dist/components/Scene/useNativePointerDrag.d.ts +25 -0
- package/dist/components/Scene/useSceneAnimationRegistry.d.ts +56 -0
- package/dist/components/Scene/useScenePointerInput.d.ts +28 -0
- package/dist/components/Scene/useSceneRuntimeState.d.ts +17 -0
- package/dist/components/Scene/useSceneScrollTakeover.d.ts +13 -0
- package/dist/components/Scene/useScrollSceneEngine.d.ts +28 -0
- package/dist/components/runtime/runtimeContext.d.ts +14 -0
- package/dist/components/runtime/scrollExternalStore.d.ts +13 -0
- package/dist/components/runtime/scrollSceneFrameStore.d.ts +29 -0
- package/dist/context/CineviewContext.d.ts +25 -0
- package/dist/dev/PerfPanel.d.ts +16 -0
- package/dist/dev/index.d.ts +14 -0
- package/dist/dev/usePerfMonitor.d.ts +9 -0
- package/dist/drag-scene-engine-y8Wj9ivV.mjs +270 -0
- package/dist/elastic-CBP_FdRv.mjs +129 -0
- package/dist/element-track-Du10P12_.mjs +316 -0
- package/dist/entry-drag.d.ts +14 -0
- package/dist/entry-scroll.d.ts +14 -0
- package/dist/fade-DXxFsgxR.mjs +22 -0
- package/dist/flip-CrCoNIws.mjs +49 -0
- package/dist/hooks/imagePreloadCache.d.ts +4 -0
- package/dist/hooks/mediaPreloadCache.d.ts +31 -0
- package/dist/hooks/useFirstSceneEnter.d.ts +65 -0
- package/dist/hooks/useImagePreloader.d.ts +31 -0
- package/dist/hooks/usePrefersReducedMotion.d.ts +12 -0
- package/dist/hooks/useSceneManager.d.ts +79 -0
- package/dist/index.d.ts +17 -0
- package/dist/media/VideoFrameRenderer.d.ts +48 -0
- package/dist/media/videoPlaybackOwnership.d.ts +63 -0
- package/dist/performance-monitor-AlOOwzY_.mjs +73 -0
- package/dist/public-api.d.ts +12 -0
- package/dist/rotate-BMEBKDk5.mjs +69 -0
- package/dist/scene-animation-registry-8b0m_IaZ.mjs +422 -0
- package/dist/shake-BV6SdR9O.mjs +171 -0
- package/dist/slide-DWmVtj0L.mjs +63 -0
- package/dist/special-DDz8BopB.mjs +224 -0
- package/dist/types/index.d.ts +552 -0
- package/dist/utils/animationHelpers.d.ts +15 -0
- package/dist/utils/debounce.d.ts +18 -0
- package/dist/utils/devLog.d.ts +16 -0
- package/dist/utils/dragTimelineMapping.d.ts +30 -0
- package/dist/utils/gestureDetector.d.ts +67 -0
- package/dist/utils/performanceMonitor.d.ts +66 -0
- package/dist/utils/styleConvert.d.ts +7 -0
- package/dist/utils/useIsomorphicLayoutEffect.d.ts +22 -0
- package/dist/utils/useStructurallyStableValue.d.ts +5 -0
- package/dist/zoom-CuAthpqd.mjs +63 -0
- package/package.json +171 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Alien.mu
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Cineview
|
|
2
|
+
|
|
3
|
+
[简体中文](./README.zh-CN.md)
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/cineview)
|
|
6
|
+
[](https://github.com/AlienMu/cineview/actions/workflows/ci.yml)
|
|
7
|
+
[](https://cineview.pages.dev/coverage.json)
|
|
8
|
+
[](https://react.dev/)
|
|
9
|
+
[](./LICENSE)
|
|
10
|
+
|
|
11
|
+
Cineview is a React framework for pages controlled by dragging and scrolling. Define animation durations and dependencies, then let gestures or scroll position advance that timeline.
|
|
12
|
+
|
|
13
|
+
Each `Scene` owns its content and element time. `Animate` describes effects such as fading and movement; `after` starts an element when its predecessor finishes entering, then adds the follower’s delay. Ordinary entrances that play over time can coexist with these interactions.
|
|
14
|
+
|
|
15
|
+
[Quick start and interactive examples](https://cineview.pages.dev/docs/03-quickstart) · [Documentation](https://cineview.pages.dev/docs) · [Website](https://cineview.pages.dev)
|
|
16
|
+
|
|
17
|
+
## Install the beta
|
|
18
|
+
|
|
19
|
+
These examples target `cineview@0.0.1-beta` and its `Cineview` API. Install the exact beta version:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install cineview@0.0.1-beta react@19 react-dom@19 framer-motion@13
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
The npm `beta` channel tracks this API. The `latest` channel remains on `1.0.0`, which uses the earlier `CineView` API.
|
|
26
|
+
|
|
27
|
+
## Run the local example
|
|
28
|
+
|
|
29
|
+
To change the source and try it in the included example:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm install --frozen-lockfile
|
|
33
|
+
pnpm --dir examples/minimal install --frozen-lockfile
|
|
34
|
+
pnpm build
|
|
35
|
+
pnpm --dir examples/minimal dev
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The current package requires React `^19.0.0`, React DOM `^19.0.0`, and Framer Motion `^13.0.0`. See the [Changelog](./CHANGELOG.md) for migration notes.
|
|
39
|
+
|
|
40
|
+
## Build a drag page
|
|
41
|
+
|
|
42
|
+
Use this as `App.tsx`. No media assets are required:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { Animate, Cineview, Scene } from 'cineview';
|
|
46
|
+
|
|
47
|
+
export default function App() {
|
|
48
|
+
return (
|
|
49
|
+
<Cineview mode="drag" unit="percent" scale={1}>
|
|
50
|
+
<Scene sceneId="intro" style={{ background: '#f5e8d8', padding: 40 }}>
|
|
51
|
+
<h1>Drag up to the next scene</h1>
|
|
52
|
+
</Scene>
|
|
53
|
+
<Scene sceneId="details" style={{ background: '#e8edf0', padding: 40 }}>
|
|
54
|
+
<Animate animateId="title" enterAnimation="fade-in" duration={{ enter: 600 }}>
|
|
55
|
+
<h2>The title appears first</h2>
|
|
56
|
+
</Animate>
|
|
57
|
+
<Animate
|
|
58
|
+
enterAnimation="slide-up"
|
|
59
|
+
duration={{ enter: 400 }}
|
|
60
|
+
timeline={{ after: 'title', delay: 100 }}
|
|
61
|
+
>
|
|
62
|
+
<p>The detail follows the title.</p>
|
|
63
|
+
</Animate>
|
|
64
|
+
</Scene>
|
|
65
|
+
</Cineview>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
In the second scene, the title enters over 600ms. After another 100ms, the detail enters over 400ms, making a 1100ms timeline. Change the title to 900ms and the detail moves later automatically, without changing its delay.
|
|
71
|
+
|
|
72
|
+
This example maps drag percentage to timeline percentage. Half a screen advances element time to 550ms. A committed release continues unfinished animations; cancellation restores them. Focus the Cineview container to navigate with arrow keys.
|
|
73
|
+
|
|
74
|
+
## How input advances animation
|
|
75
|
+
|
|
76
|
+
| Mode | Use | When input stops |
|
|
77
|
+
| -------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
78
|
+
| drag | Change scenes while previewing the target scene's animations | Distance and release velocity decide whether to continue or restore |
|
|
79
|
+
| scroll | Keep ordinary content in flow; add `scroll` to a Scene to advance its animations at `1ms = 1px` | Stopping within the zone holds the frame; reverse scrolling moves backward |
|
|
80
|
+
| Independent entrance | `timeline={{ driver: 'clock' }}` | Plays over time once its start conditions are met, even when scrolling stops |
|
|
81
|
+
|
|
82
|
+
[Quick start](https://cineview.pages.dev/docs/03-quickstart) includes working examples and basic code for both modes. The [mode guide](https://cineview.pages.dev/docs/01-modes) explains page movement and element time.
|
|
83
|
+
|
|
84
|
+
## Explore further
|
|
85
|
+
|
|
86
|
+
- [Animation order](https://cineview.pages.dev/docs/04-orchestration): `after`, delays, composition, and staggered entrances.
|
|
87
|
+
- [Video control](https://cineview.pages.dev/docs/11-video-timeline): use drag and scroll progress to seek video frames.
|
|
88
|
+
- [Custom drawing](https://cineview.pages.dev/docs/09-use-animate-timeline): drive Canvas, SVG, or WebGL from MotionValues.
|
|
89
|
+
- [Responsive layout](https://cineview.pages.dev/docs/05-responsive): use `designWidth`, Position, and Container.
|
|
90
|
+
- [Preloading](https://cineview.pages.dev/docs/02-preload): prepare scene resources and handle first-screen waiting.
|
|
91
|
+
|
|
92
|
+
Add `data-cineview-ignore-drag` to controls that need their own gestures. Keep navigation and persistent state that span scenes outside Cineview.
|
|
93
|
+
|
|
94
|
+
## Verify and develop
|
|
95
|
+
|
|
96
|
+
The test badge shows GitHub CI status. The coverage badge reports line coverage generated by a successful framework test run for the deployed website. It does not establish browser interaction coverage; drag and scroll have separate browser acceptance checks.
|
|
97
|
+
|
|
98
|
+
See [Contributing](./CONTRIBUTING.md) and [Releases](./RELEASING.md) for the full environment, validation, and publishing commands. The [minimal example](./examples/minimal/README.md) switches between both modes.
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
[MIT](./LICENSE) © Alien.mu.
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Cineview
|
|
2
|
+
|
|
3
|
+
[English](./README.md)
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/cineview)
|
|
6
|
+
[](https://github.com/AlienMu/cineview/actions/workflows/ci.yml)
|
|
7
|
+
[](https://cineview.pages.dev/coverage.json)
|
|
8
|
+
[](https://react.dev/)
|
|
9
|
+
[](./LICENSE)
|
|
10
|
+
|
|
11
|
+
Cineview 是用于制作拖拽和滚动交互页面的 React 框架。为元素声明动画时长和先后顺序,再让手势或滚动位置推进这段时间线。
|
|
12
|
+
|
|
13
|
+
每个 `Scene` 管理自己的内容和元素时间。`Animate` 描述淡入、位移等变化,`after` 等前序元素入场完成,再加上当前元素的延迟后开始。普通按时间播放的入场动画也可以与这些交互共存。
|
|
14
|
+
|
|
15
|
+
[快速上手与交互案例](https://cineview.pages.dev/docs/03-quickstart) · [文档](https://cineview.pages.dev/docs) · [官网](https://cineview.pages.dev)
|
|
16
|
+
|
|
17
|
+
## 安装 beta
|
|
18
|
+
|
|
19
|
+
下方示例对应 `cineview@0.0.1-beta` 的 `Cineview` API。安装指定的 beta 版本:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install cineview@0.0.1-beta react@19 react-dom@19 framer-motion@13
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
npm 的 `beta` 标签对应这套 API。`latest` 标签保留在 `1.0.0`,该版本使用早期的 `CineView` API。
|
|
26
|
+
|
|
27
|
+
## 运行本地示例
|
|
28
|
+
|
|
29
|
+
修改源码并在附带的示例中验证:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm install --frozen-lockfile
|
|
33
|
+
pnpm --dir examples/minimal install --frozen-lockfile
|
|
34
|
+
pnpm build
|
|
35
|
+
pnpm --dir examples/minimal dev
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
当前包需要 React `^19.0.0`、React DOM `^19.0.0` 和 Framer Motion `^13.0.0`。迁移说明见 [Changelog](./CHANGELOG.md)。
|
|
39
|
+
|
|
40
|
+
## 第一个拖拽页面
|
|
41
|
+
|
|
42
|
+
将以下内容用作 `App.tsx`,不需要媒体素材:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { Animate, Cineview, Scene } from 'cineview';
|
|
46
|
+
|
|
47
|
+
export default function App() {
|
|
48
|
+
return (
|
|
49
|
+
<Cineview mode="drag" unit="percent" scale={1}>
|
|
50
|
+
<Scene sceneId="intro" style={{ background: '#f5e8d8', padding: 40 }}>
|
|
51
|
+
<h1>向上拖动,查看下一个场景</h1>
|
|
52
|
+
</Scene>
|
|
53
|
+
<Scene sceneId="details" style={{ background: '#e8edf0', padding: 40 }}>
|
|
54
|
+
<Animate animateId="title" enterAnimation="fade-in" duration={{ enter: 600 }}>
|
|
55
|
+
<h2>标题先出现</h2>
|
|
56
|
+
</Animate>
|
|
57
|
+
<Animate
|
|
58
|
+
enterAnimation="slide-up"
|
|
59
|
+
duration={{ enter: 400 }}
|
|
60
|
+
timeline={{ after: 'title', delay: 100 }}
|
|
61
|
+
>
|
|
62
|
+
<p>说明在标题之后出现。</p>
|
|
63
|
+
</Animate>
|
|
64
|
+
</Scene>
|
|
65
|
+
</Cineview>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
第二个场景的标题用 600ms 入场,等待 100ms 后,说明用 400ms 入场,总时长为 1100ms。把标题时长改成 900ms,说明会自动后移,不必修改它的延迟。
|
|
71
|
+
|
|
72
|
+
这个例子将拖拽比例映射到时间线比例。拖到一半,元素时间是 550ms。确认切换后,未完成的动画继续播放;取消时还原。聚焦 Cineview 容器后也可使用方向键导航。
|
|
73
|
+
|
|
74
|
+
## 两种交互如何推进动画
|
|
75
|
+
|
|
76
|
+
| 模式 | 使用方式 | 停止输入后的行为 |
|
|
77
|
+
| -------- | ------------------------------------------------------------------------- | ---------------------------------------------- |
|
|
78
|
+
| drag | 拖拽切换 Scene,同时预览目标场景的元素动画 | 松手时根据位移与速度决定继续切换或还原 |
|
|
79
|
+
| scroll | 普通内容连续滚动;给 Scene 声明 `scroll`,让其动画按 `1ms = 1px` 跟随滚动 | 区间内停止滚动,动画停在当前帧;反向滚动会倒退 |
|
|
80
|
+
| 独立入场 | `timeline={{ driver: 'clock' }}` | 满足启动条件后按时间播放,不因停止滚动而暂停 |
|
|
81
|
+
|
|
82
|
+
[快速上手](https://cineview.pages.dev/docs/03-quickstart)提供两种可操作案例和基础代码。[模式说明](https://cineview.pages.dev/docs/01-modes)解释场景移动与元素时间的关系。
|
|
83
|
+
|
|
84
|
+
## 进一步使用
|
|
85
|
+
|
|
86
|
+
- [动画顺序](https://cineview.pages.dev/docs/04-orchestration):`after`、延迟、组合与子元素入场。
|
|
87
|
+
- [视频控制](https://cineview.pages.dev/docs/11-video-timeline):将拖拽和滚动进度用于视频帧。
|
|
88
|
+
- [自定义绘制](https://cineview.pages.dev/docs/09-use-animate-timeline):用 MotionValue 驱动 Canvas、SVG 或 WebGL。
|
|
89
|
+
- [布局换算](https://cineview.pages.dev/docs/05-responsive):使用 `designWidth`、Position 和 Container。
|
|
90
|
+
- [资源预加载](https://cineview.pages.dev/docs/02-preload):准备场景资源与处理首屏等待。
|
|
91
|
+
|
|
92
|
+
为需要独立处理手势的控件添加 `data-cineview-ignore-drag`。跨场景的导航或持久状态放在 Cineview 外部。
|
|
93
|
+
|
|
94
|
+
## 验证与开发
|
|
95
|
+
|
|
96
|
+
测试徽章显示 GitHub CI 状态。覆盖率徽章读取网站发布时成功运行框架测试生成的行覆盖率,不代表所有浏览器交互都已覆盖;拖拽与滚动另有浏览器验收。
|
|
97
|
+
|
|
98
|
+
完整开发环境、测试与发布命令见 [Contributing](./CONTRIBUTING.md) 和[发布说明](./RELEASING.md)。[最小示例](./examples/minimal/README.md)可在两种模式间切换。
|
|
99
|
+
|
|
100
|
+
## 许可证
|
|
101
|
+
|
|
102
|
+
[MIT](./LICENSE) © Alien.mu.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CustomAnimation, ParsedAnimationVariant } from '../types';
|
|
2
|
+
export declare function normalizeParsedAnimationVariant(variant: ParsedAnimationVariant): ParsedAnimationVariant;
|
|
3
|
+
export declare const validateCustomAnimation: (animation: CustomAnimation) => boolean;
|
|
4
|
+
/**
|
|
5
|
+
* Normalize a CustomAnimation into a Framer Motion variant subset.
|
|
6
|
+
*/
|
|
7
|
+
export declare const normalizeCustomAnimationVariant: (animation: CustomAnimation) => ParsedAnimationVariant;
|
|
8
|
+
export declare const convertWebAnimationToVariant: (animation: CustomAnimation) => ParsedAnimationVariant;
|
|
9
|
+
/**
|
|
10
|
+
* Parse preset animation by name
|
|
11
|
+
*/
|
|
12
|
+
export declare const parsePresetAnimation: (name: string) => Promise<ParsedAnimationVariant>;
|
|
13
|
+
/**
|
|
14
|
+
* Parse custom animation
|
|
15
|
+
*/
|
|
16
|
+
export declare const parseCustomAnimation: (animation: CustomAnimation) => ParsedAnimationVariant | null;
|
|
17
|
+
/**
|
|
18
|
+
* Parse animation (supports both preset and custom)
|
|
19
|
+
*/
|
|
20
|
+
export declare const parseAnimation: (animation: string | CustomAnimation) => Promise<ParsedAnimationVariant | null>;
|
|
21
|
+
/**
|
|
22
|
+
* Create default animation (fallback when parsing fails)
|
|
23
|
+
*/
|
|
24
|
+
export declare const createDefaultAnimation: () => ParsedAnimationVariant;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComposedAnimation, CustomAnimation, ParsedAnimationVariant } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Validate composed animation configuration
|
|
4
|
+
*/
|
|
5
|
+
export declare const validateComposedAnimation: (animation: ComposedAnimation) => boolean;
|
|
6
|
+
/**
|
|
7
|
+
* Compose animation
|
|
8
|
+
*/
|
|
9
|
+
export declare const composeAnimation: (animation: ComposedAnimation) => Promise<ParsedAnimationVariant | null>;
|
|
10
|
+
/**
|
|
11
|
+
* Parse animation (supports preset, custom, and composed)
|
|
12
|
+
*/
|
|
13
|
+
export declare const parseAnimationWithComposition: (animation: string | CustomAnimation | ComposedAnimation) => Promise<ParsedAnimationVariant | null>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const blinkAnimations: {
|
|
3
|
+
blink: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
flash: {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
pulse: {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const blurAnimations: {
|
|
3
|
+
'blur-in': {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'blur-out': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'focus-in': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const bounceAnimations: {
|
|
3
|
+
bounce: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'bounce-in': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'bounce-out': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const elasticAnimations: {
|
|
3
|
+
elastic: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'rubber-band': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
wobble: {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
swing: {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const fadeAnimations: {
|
|
3
|
+
fade: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'fade-in': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'fade-out': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const flipAnimations: {
|
|
3
|
+
flip: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'flip-x': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'flip-y': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export interface PresetAnimation {
|
|
3
|
+
initial: Variant;
|
|
4
|
+
animate: Variant;
|
|
5
|
+
exit: Variant;
|
|
6
|
+
}
|
|
7
|
+
export type PresetLoadErrorCode = 'INVALID_ANIMATION' | 'ANIMATION_ASSET_LOAD_FAILED';
|
|
8
|
+
export type PresetLoadState = 'idle' | 'pending' | 'success' | 'failed-permanent' | 'failed-transient';
|
|
9
|
+
export declare const PRESET_LOAD_TIMEOUT_MS = 3000;
|
|
10
|
+
export declare class PresetLoadError extends Error {
|
|
11
|
+
readonly code: PresetLoadErrorCode;
|
|
12
|
+
readonly permanent: boolean;
|
|
13
|
+
readonly category?: string;
|
|
14
|
+
readonly presetName?: string;
|
|
15
|
+
readonly cause?: unknown;
|
|
16
|
+
constructor(code: PresetLoadErrorCode, message: string, options: {
|
|
17
|
+
permanent: boolean;
|
|
18
|
+
category?: string;
|
|
19
|
+
presetName?: string;
|
|
20
|
+
cause?: unknown;
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
export declare function isPresetLoadError(error: unknown): error is PresetLoadError;
|
|
24
|
+
type AnimationModule = Record<string, PresetAnimation>;
|
|
25
|
+
type CategoryLoader = (category: string) => Promise<AnimationModule>;
|
|
26
|
+
/** Load one category, coalescing concurrent requests across all Cineview roots. */
|
|
27
|
+
export declare function loadAnimationModule(category: string): Promise<AnimationModule>;
|
|
28
|
+
/** Resolve one preset. Unknown names/missing exports are permanent failures. */
|
|
29
|
+
export declare function getPresetAnimation(name: string): Promise<PresetAnimation>;
|
|
30
|
+
export declare function preloadAnimationCategory(category: string): Promise<void>;
|
|
31
|
+
export declare function preloadAllAnimations(): Promise<void>;
|
|
32
|
+
/** Clears success/permanent caches. Pending imports may finish but cannot repopulate a cleared epoch. */
|
|
33
|
+
export declare function clearAnimationCache(): void;
|
|
34
|
+
/** Read-only diagnostic state used by tests and development tooling. */
|
|
35
|
+
export declare function getPresetCategoryState(category: string): PresetLoadState;
|
|
36
|
+
/** Test seam; intentionally not re-exported from the package barrel. */
|
|
37
|
+
export declare function setPresetCategoryLoaderForTests(loader: CategoryLoader | null): void;
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const rotateAnimations: {
|
|
3
|
+
rotate: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'rotate-in': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'rotate-out': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
spin: {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const shakeAnimations: {
|
|
3
|
+
shake: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'shake-x': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'shake-y': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
vibrate: {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
jello: {
|
|
24
|
+
initial: Variant;
|
|
25
|
+
animate: Variant;
|
|
26
|
+
exit: Variant;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const slideAnimations: {
|
|
3
|
+
'slide-up': {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'slide-down': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'slide-left': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
'slide-right': {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const specialAnimations: {
|
|
3
|
+
heartbeat: {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
tada: {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
wave: {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
'roll-in': {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
'roll-out': {
|
|
24
|
+
initial: Variant;
|
|
25
|
+
animate: Variant;
|
|
26
|
+
exit: Variant;
|
|
27
|
+
};
|
|
28
|
+
hinge: {
|
|
29
|
+
initial: Variant;
|
|
30
|
+
animate: Variant;
|
|
31
|
+
exit: Variant;
|
|
32
|
+
};
|
|
33
|
+
'jack-in-the-box': {
|
|
34
|
+
initial: Variant;
|
|
35
|
+
animate: Variant;
|
|
36
|
+
exit: Variant;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Variant } from 'framer-motion';
|
|
2
|
+
export declare const zoomAnimations: {
|
|
3
|
+
'zoom-in': {
|
|
4
|
+
initial: Variant;
|
|
5
|
+
animate: Variant;
|
|
6
|
+
exit: Variant;
|
|
7
|
+
};
|
|
8
|
+
'zoom-out': {
|
|
9
|
+
initial: Variant;
|
|
10
|
+
animate: Variant;
|
|
11
|
+
exit: Variant;
|
|
12
|
+
};
|
|
13
|
+
'scale-up': {
|
|
14
|
+
initial: Variant;
|
|
15
|
+
animate: Variant;
|
|
16
|
+
exit: Variant;
|
|
17
|
+
};
|
|
18
|
+
'scale-down': {
|
|
19
|
+
initial: Variant;
|
|
20
|
+
animate: Variant;
|
|
21
|
+
exit: Variant;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
export type AnimateTimelineLane = 'drag' | 'scroll' | 'visibility';
|
|
2
|
+
export declare function isLaneCompatible(followerLane: AnimateTimelineLane, leaderLane: AnimateTimelineLane): boolean;
|
|
3
|
+
export interface AnimateRegistrationInfo {
|
|
4
|
+
delay: number;
|
|
5
|
+
duration: number;
|
|
6
|
+
after?: string;
|
|
7
|
+
/** Concrete runtime driver. Optional only for legacy/internal callers while the
|
|
8
|
+
* registration API migrates to owner-safe leases. */
|
|
9
|
+
lane?: AnimateTimelineLane;
|
|
10
|
+
}
|
|
11
|
+
export type AnimationRegistryIssue = {
|
|
12
|
+
type: 'missing-dependency';
|
|
13
|
+
animateId: string;
|
|
14
|
+
after: string;
|
|
15
|
+
} | {
|
|
16
|
+
type: 'circular-dependency';
|
|
17
|
+
animateId: string;
|
|
18
|
+
cycle: string[];
|
|
19
|
+
} | {
|
|
20
|
+
type: 'duplicate-id';
|
|
21
|
+
animateId: string;
|
|
22
|
+
} | {
|
|
23
|
+
type: 'incompatible-lane';
|
|
24
|
+
animateId: string;
|
|
25
|
+
after: string;
|
|
26
|
+
followerLane: AnimateTimelineLane;
|
|
27
|
+
leaderLane: AnimateTimelineLane;
|
|
28
|
+
};
|
|
29
|
+
export interface AnimationRegistrySnapshot {
|
|
30
|
+
registrations: Map<string, AnimateRegistrationInfo>;
|
|
31
|
+
calculatedDelays: Map<string, number>;
|
|
32
|
+
issues: AnimationRegistryIssue[];
|
|
33
|
+
timelineDuration: number;
|
|
34
|
+
}
|
|
35
|
+
/** Immutable registry compilation captured by prepared scenes and transactions. */
|
|
36
|
+
export interface FrozenAnimationRegistrySnapshot {
|
|
37
|
+
readonly registrations: ReadonlyMap<string, Readonly<AnimateRegistrationInfo>>;
|
|
38
|
+
readonly calculatedDelays: ReadonlyMap<string, number>;
|
|
39
|
+
readonly issues: readonly AnimationRegistryIssue[];
|
|
40
|
+
readonly timelineDuration: number;
|
|
41
|
+
}
|
|
42
|
+
export declare function createImmutableMap<K, V>(entries: Iterable<readonly [K, V]>): ReadonlyMap<K, V>;
|
|
43
|
+
export declare function freezeAnimationRegistrySnapshot(snapshot: AnimationRegistrySnapshot): FrozenAnimationRegistrySnapshot;
|
|
44
|
+
export interface BuildAnimationRegistrySnapshotOptions {
|
|
45
|
+
baseDuration: number;
|
|
46
|
+
registrations: Map<string, AnimateRegistrationInfo>;
|
|
47
|
+
/** Driver-only declarations never enter registrations or extend timelineDuration. */
|
|
48
|
+
declaredLanes?: ReadonlyMap<string, AnimateTimelineLane>;
|
|
49
|
+
duplicateIds?: Iterable<string>;
|
|
50
|
+
}
|
|
51
|
+
export declare function buildAnimationRegistrySnapshot({ baseDuration, registrations, declaredLanes, duplicateIds, }: BuildAnimationRegistrySnapshotOptions): AnimationRegistrySnapshot;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"generatedBy": "scripts/build-all.mjs",
|
|
3
|
+
"artifacts": [
|
|
4
|
+
{
|
|
5
|
+
"file": "cineview.es.mjs",
|
|
6
|
+
"module": true,
|
|
7
|
+
"budgetKB": 50,
|
|
8
|
+
"label": "全量 ESM(运行时按 mode 派发)",
|
|
9
|
+
"entry": "src/index.ts"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"file": "cineview.umd.js",
|
|
13
|
+
"module": false,
|
|
14
|
+
"budgetKB": 62,
|
|
15
|
+
"label": "全量 UMD(运行时按 mode 派发)",
|
|
16
|
+
"entry": "src/index.ts"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"file": "cineview-drag.umd.js",
|
|
20
|
+
"module": false,
|
|
21
|
+
"budgetKB": 50,
|
|
22
|
+
"label": "UMD(仅拖拽引擎)",
|
|
23
|
+
"entry": "src/entry-drag.ts"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"file": "cineview-scroll.umd.js",
|
|
27
|
+
"module": false,
|
|
28
|
+
"budgetKB": 54,
|
|
29
|
+
"label": "UMD(仅滚动引擎)",
|
|
30
|
+
"entry": "src/entry-scroll.ts"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"file": "cineview-dev.es.mjs",
|
|
34
|
+
"module": true,
|
|
35
|
+
"budgetKB": 10,
|
|
36
|
+
"label": "开发工具 ESM",
|
|
37
|
+
"entry": "src/dev/index.ts"
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
}
|