美的前端
首发于美的前端
pixi.js 移动端H5坑点

pixi.js 移动端H5坑点

需求说明:实现一个滚动长屏,在滚动过程中实现一些交互动画,最后生成一张海报。


体验地址(微信打开)wx3a662c40c51bf25b.mgeek.com.cn

(微信打开)

库:

pixi.js、scroller.js、Tween.js 的简单应用可以参考 Utopia1655的文章

坑点:

1、为pixi.js创建的画布自适应屏幕,创建出来的动画模糊,出现严重锯齿。

原来的写法:

let windowHeight = window.innerHeight;
    let windowWidth = window.innerWidth;

     这里没有另外设置doom尺寸,会默认按照下面设置的width,height进行doom尺寸的设置
    let app = new application({
        width: windowWidth,
        height: windowHeight,
        antialias: true,     消除锯齿
        transparent: false,  背景不透明
        resolution: 1,       像素设置
        roundPixels: true
    });


     在创建场景容器,设置场景尺寸时,为自适应屏幕,将各个场景容器尺寸缩放至屏幕大小(设计图宽度750)
     containerItem 是每个场景创建的场景容器,整个滚动页面分了多个场景
    containerItem.width = windowWidth;
    containerItem.height = containerItem.height * windowWidth / 750;


     开启滚动
    containerMain.position.y = -top;


     scroll 滚动范围设置(设计图总高度是16456,宽度是750)
    scrollerJsObj.setDimensions(
        windowWidth,
        windowHeight,
        windowWidth,
        windowWidth *16456 / 750
    );

修改的方法:将画布的绘制空间尺寸设置与设计图一致,将canvas dom元素的尺寸进行自适应屏幕,具体设置如下

let windowHeight = window.innerHeight;
    let windowWidth = window.innerWidth;

     创建舞台(舞台的绘制宽度与设计稿一致,绘制高度按照屏幕宽高比例折算【自适应设置 1】)
    let app = new application({
        width: 750,
        height: windowHeight * 750 / windowWidth,
        antialias: true,     消除锯齿
        transparent: false,  背景不透明
        resolution: 1,       像素设置
        roundPixels: true
    });


     将舞台加入dom(canvas dom元素的尺寸,按照屏幕宽高设置【自适应设置 2】)
    app.view.style.width = windowWidth + 'px';
    app.view.style.height = windowHeight + 'px';


     开启滚动(top的滚动变化范围是按照初始设计稿,按照适配屏幕设置,折算上滚距离【自适应设置 3】)
    containerMain.position.y = -top * 750 / windowWidth;


     scroll 滚动范围设置(设计图总高度是16456,宽度是750)
    scrollerJsObj.setDimensions(
        windowWidth,
        windowHeight,
        windowWidth,
        windowWidth * 16456 / 750  按照设计图适配屏幕,设置滚动范围(【自适应设置 4】)
    );

2、pixi.js文本居中问题

绘制文本对象,换行可以使用n,或者直接敲回车。pixi.js中文本单行不可居中,多行文本可居中,但是实践上看,多行就算设置 wordWrapWidth 为需要的宽度,也不能很随心所欲的进行特定宽度的居中。

所以迂回实现方式如下:

text.position.x = (需要的宽度 - text.width)2;

3、页面抖动问题(测试时仅在 ios 微信端浏览器出现抖动,android 手机、ios 原生 Safari 均没有出现)

部分 css3 动画可能会导致页面抖动,此次开发过程中出现的页面都懂问题来源于一个旋转css3动画,去掉该动画或改成使用 js 方式即可。

写的 css3 动画如下:

animation: bgmPlaying 5s linear infinite;

    @keyframes bgmPlaying {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

4、scroll.js滚动距离触发动画自适应屏幕

由于不同手机屏幕的屏幕高度差别比较大,在屏幕滚动过程中判定动画出现位置的时候,在不同屏幕高度的手机上面,判断动画出现的时机难以一致。

而此次开发动画出现是基于滚动距离的,所以将滚动距离的判定方式有原本默认屏幕上边缘,改为特定机型的屏幕下边缘。

开发调试手机机型是 iphone6 ,屏幕高度是 603,所以设置方式如下:

某个滚动位置的下边缘位置 top + windowHeight, 开发机子上该出现动画的位置的下边缘位置 位置 + 603
    let windowHeight = window.innerHeight;
    function scrollerCallback (left, top, zoom) {

        if (top + windowHeight > 位置区间左边 + 603 && top + windowHeight < 位置区间右边 + 603) {
             // code...
        }

    }

5、pixi.js资源加载完毕出现黑屏

黑屏是画布上面未绘制任何精灵的初始状态,出现黑屏的原因是页面报错,但是在PC端调试时却又未出现黑屏现象,js代码执行都正常

检查发现是由于部分情况下,手机端创建 pixi.jsapplication对象出现时间上的延迟,导致注册touchStart时间时,找不到元素对象。

修改方案是将touchStart事件改为注册在document上面(app.view指的是 canvas 元素的 dom),如下:

app.view.addEventListener(touchstart, function(e) {
         //code...
    }, false);

     改为

    document.addEventListener(touchstart, function(e) {
         //code...
    }, false);

6、pixi.js 中的点击事件是 tap

编辑于 2019-01-30

文章被以下专栏收录