hilo-parallax

---

Hilo Parallax Component

---

Install

npm i hilo-parallax

Usage

1import Stage from 'hilojs/view/Stage';
2import Ticker from 'hilojs/util/Ticker';
3import Ease from 'hilojs/tween/Ease';
4import Parallax from 'hilo-parallax';
5
6// hilo stage
7var stage = new Stage({
8  renderType: 'canvas',
9  canvas,
10  width: 375,
11  height: 614,
12});
13canvas.width = 375;
14canvas.height = 614;
15this.ticker = new Ticker(30);
16this.ticker.addTick(stage);
17this.ticker.start();
18
19const bgWrapper = new Parallax({
20  childrens: [
21    {
22      depth: 0.5,
23      children: 'https://zos.alipayobjects.com/rmsportal/vQbYqyotOjnnTPfpjpzN.png',
24      imageData: {
25        cpPosition: -800,
26        y: 200,
27      },
28    },
29    {
30      depth: 1,
31      children: 'https://zos.alipayobjects.com/rmsportal/gVBfGmjSskHNvmScZMGm.png',
32      imageData: {
33        cpPosition: -800,
34        y: 250,
35      },
36    },
37  ],
38  type: 'x',
39  duration: 10000,
40  ease: Ease.Linear.EaseNone,
41  width: this.width,
42  height: this.height,
43  loop: true,
44  startPercent: 0.2,
45});
46stage.addChild(bgWrapper);
47bgWrapper.cameraAnimateTo(-800);

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.