hilo-parallax

hilo-parallax

---

Hilo Parallax Component

---

Install

npm i hilo-parallax

Usage

import Stage from 'hilojs/view/Stage';
import Ticker from 'hilojs/util/Ticker';
import Ease from 'hilojs/tween/Ease';
import Parallax from 'hilo-parallax';

// hilo stage
var stage = new Stage({
  renderType: 'canvas',
  canvas,
  width: 375,
  height: 614,
});
canvas.width = 375;
canvas.height = 614;
this.ticker = new Ticker(30);
this.ticker.addTick(stage);
this.ticker.start();

const bgWrapper = new Parallax({
  childrens: [
    {
      depth: 0.5,
      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: Ease.Linear.EaseNone,
  width: this.width,
  height: this.height,
  loop: true,
  startPercent: 0.2,
});
stage.addChild(bgWrapper);
bgWrapper.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.