hilo-parallax
Hilo Parallax Component
Install
npm i hilo-parallax
Usage
;;;; // hilo stagevar stage = renderType: 'canvas' canvas width: 375 height: 614;canvaswidth = 375;canvasheight = 614;thisticker = 30;thisticker;thistickerstart; const bgWrapper = childrens: depth: 05 children: 'https://zos.alipayobjects.com/rmsportal/vQbYqyotOjnnTPfpjpzN.png' imageData: cpPosition: -800 y: 200 depth: 1 children: 'https://zos.alipayobjects.com/rmsportal/gVBfGmjSskHNvmScZMGm.png' imageData: cpPosition: -800 y: 250 type: 'x' duration: 10000 ease: EaseLinearEaseNone width: thiswidth height: thisheight loop: true startPercent: 02;stage;bgWrapper;
API
Parallax extends Container
name | type | default | description |
---|---|---|---|
childrens | Array | null | parallax 的子级 |
type | string | x |
parallax 动画类型: x , y , xy ; 如果为 xy , cameraAnimateTo 里的 value 可以为 { x, y }; |
duration | number | 1000 | 初始时间设定 |
ease | hilo.Ease | Ease.Quad.EaseOut |
动画缓动 |
loop | boolean | false | 是否循环播放,注: 如果为 true, cameraAnimateTo 只能触发一次 |
invert | boolean | false | loop 时, 第二遍是否反向播放 |
cameraStart | number | 0 | 镜头位置 |
startPercent | number | 0 | 0 - 1 之间的百分比值; 开始显示镜头所在动画轴上的百分比 |
stack | string | reset | type: add , reset ; 两种方式;add : 为不结束前面一个动画,往动画队列里添加后面即将发生的动画, 为多轨动画, 比较耗性能; reset : 保持单个动画的运行,强制结束前面一个动画, 单轨动画。 |
childrens
name | type | default | description |
---|---|---|---|
children | <Hilo.View> or string | null | 子级元素, 如果是 string, 将自动创建 Bitmap; |
depth | number | null | 当前子级深度, 控制视差的 |
imageData | object | null | 只适用 children 为 string 时 { ...(所有 Bitmap 属性), cpPosition }: cpPosition 开启拷贝图片,并设置所在位置。 |
cameraAnimateTo(value, animateProps);
动画调用方法:
value: 动画参数;
animateProps: { duration, ease }; 替换初始设置的动画值;
Development
npm install
npm start
Example
http://localhost:8301/examples/
License
hilo-parallax is released under the MIT license.