那些年丶

那些年丶 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

那些年丶 提出了问题 · 1月21日

解决div 设置高度后 页面展示的div 比设置的高度 多出一点

image.png

关注 2 回答 3

那些年丶 提出了问题 · 1月21日

解决div 设置高度后 页面展示的div 比设置的高度 多出一点

image.png

关注 2 回答 3

那些年丶 赞了文章 · 1月14日

学习 PixiJS — 动画精灵

说明

看完官方教程中提到的这本书 — Learn Pixi.js ,准备写写读后感了,官方教程中所说的内容,基本上就是书的前4章,所以我就从第5章开始写写吧。

动画精灵指的是按顺序使用一系列略有不同的图像,创建的精灵,之后一帧一帧的播放这些图像,就可以产生运动的幻觉。

也就是说用这种图片

在这里插入图片描述

做出这样的效果
在这里插入图片描述

要制作动画精灵我们需要用到 PixiJSAnimatedSprite 方法。

PIXI.extras.AnimatedSprite

定义:

使用纹理数组创建动画精灵的方法。

用法:

new PIXI.extras.AnimatedSprite(textures,autoUpdate)

参数 :

名称类型默认值描述
texturesarray用一系列略有不同的图像做的纹理数组。
autoUpdatebooleantrue用来判断是否使用 PIXI.ticker.shared 自动更新动画时间。

返回值:
返回一个对象,对象会有一些属性和方法,用于控制动画精灵。

返回值对象的属性:

名称类型描述
animationSpeednumber动画精灵的播放速度。越高越快,越低越慢,默认值是1
currentFramenumber(只读)正在显示的当前帧编号
onCompletefunctionloop属性为false时,一个动画精灵完成播放时调用
playingBoolean确定当前动画精灵是否正在播放
onFrameChangefunction当一个动画精灵更改要呈现的纹理时调用
loopboolean动画精灵是否在播放后重复播放
onLoopfunctionloop属性为true时调用的函数
texturesarray用于这个动画精灵的纹理数组
totalFramesnumber (只读)动画中的帧总数

返回值对象的方法:

名称参数描述
play播放动画精灵
gotoAndPlayframeNumber,number类型,开始帧的索引转到特定的帧并开始播放动画精灵
stop停止播放动画精灵
gotoAndStopframeNumber,number类型,停止帧的索引转到特定的帧并停止播放动画精灵

使用返回值中的这些属性和方法,我们就可以控制动画精灵了,比如播放动画精灵,设置动画的速度,设置是否循环播放等,除此之外,还要知道就是 PIXI.extras.AnimatedSprite 方法继承自 PIXI.Sprite 方法,所以动画精灵也可以用普通精灵的属性和方法,比如xywidthheightscalerotation

好的,我们开始试试这个方法。

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script data-original="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        // 创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        // 创建一个 Pixi应用
        let app = new PIXI.Application(option);
        // 获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // 把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view); 

        //设置别名
        let TextureCache = PIXI.utils.TextureCache;
        let Texture = PIXI.Texture;
        let Rectangle = PIXI.Rectangle;
        let AnimatedSprite = PIXI.extras.AnimatedSprite;

        //需要加载的雪碧图的地址(该图片服务器端已做跨域处理)
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
 
        //加载图像,加载完成后执行setup函数 
        PIXI.loader.add(imgURL).load(setup);
        
        function setup() {  
            //获取纹理
            let base = TextureCache[imgURL];
            
            //第一个纹理
            let texture0 = new Texture(base);
            texture0.frame = new Rectangle(0, 0, 80, 143);
            //第二个纹理
            let texture1 = new Texture(base);
            texture1.frame = new Rectangle(80, 0, 80, 143);
            //第三个纹理
            let texture2 = new Texture(base);
            texture2.frame = new Rectangle(160, 0, 80, 143);
            //第四个纹理
            let texture3 = new Texture(base);
            texture3.frame = new Rectangle(240, 0, 80, 143);

            //创建纹理数组
            let textures = [texture0, texture1, texture2,texture3];
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(textures); 
            //设置动画精灵的速度
            pixie.animationSpeed=0.1;
            
            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

查看效果

上面这个例子中,创建纹理数组时似乎点麻烦,要解决这个问题,我们可以用名叫 SpriteUtilities 的库,该库包含许多有用的函数,用于创建Pixi精灵并使它们更易于使用。

安装:

直接用 script 标签,引入js 文件就可以

<script data-original="https://www.kkkk1000.com/js/spriteUtilities.js"></script>

安装好之后,我们需要创建一个新实例,代码如下

let su = new SpriteUtilities(PIXI);

之后就可以用 su 对象访问所有方法了。

我们这里需要用到的就是 su 对象的 filmstrip 方法。

定义:

filmstrip 方法可以自动将雪碧图转换为可用于制作精灵的纹理数组

用法:

su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);

参数:

名称类型描述
anyTilesetImagestring雪碧图的路径
frameWidthnumber每帧的宽度(以像素为单位)
frameHeightnumber每帧的高度(以像素为单位)
optionalPaddingnumber每帧周围的填充量(可选值,以像素为单位)

返回值:

返回一个数组,可用于制作动画精灵的纹理数组。

现在我们使用 SpriteUtilities 来改写下刚才的示例代码。

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div> 

    <script data-original="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script data-original="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //需要加载的雪碧图的地址(该图片服务器端已做跨域处理)
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
        PIXI.loader.add(imgURL).load(setup); 
        
        function setup() { 
            //创建纹理数组
            let frames = su.filmstrip(imgURL, 80, 143);
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed=0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

查看效果

filmstrip 方法自动将整个雪碧图转换为可用于制作动画精灵的纹理数组。但是,如果我们只想使用雪碧图中的一部分帧呢?这时候需要用到 frames 方法了。

定义:
frames 方法使用雪碧图中的一组子帧,来创建纹理数组。

用法:

su.frames(source, coordinates, frameWidth, frameHeight)

参数:

名称类型描述
sourcestring雪碧图的路径
coordinatesarray包含每帧的 x 和 y 坐标的二维数组
frameWidthnumber每帧的宽度(以像素为单位)
frameHeightnumber每帧和高度(以像素为单位)

返回值:
返回一个数组,可用于制作动画精灵的纹理数组。

示例代码:

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script data-original="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script data-original="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //需要加载的雪碧图的地址(该图片服务器端已做跨域处理)
        let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";

        PIXI.loader.add(imgURL).load(setup); 
        function setup() { 
            //创建纹理数组
            let frames = su.frames(imgURL, [[0,0],[80,0],[160,0],[240,0]],80, 143);
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed=0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

查看效果

除了上面提到的方式,还可以用纹理贴图集来创建动画精灵。

使用纹理贴图集来创建动画精灵,就是先通过json文件,加载所有纹理,然后把需要的纹理再放进一个数组中,最后把这个数组当参数,传入PIXI.extras.AnimatedSprite 方法中,来创建动画精灵。

代码:

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script data-original="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view); 

        //需要加载的纹理贴图集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        //加载纹理贴图集,加载完成后执行setup函数
        PIXI.loader.add(textureURL).load(setup);

        function setup() {  
            let id = PIXI.loader.resources[textureURL].textures;
                 
            //创建纹理数组
            let frames = [
             id["dnf0.png"],
             id["dnf1.png"],
             id["dnf2.png"],
             id["dnf3.png"]
            ];
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed=0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

查看效果

上面的代码创建纹理数组时,是把纹理一个一个的放进数组中,如果数量比较少还好,多一点呢?假如有100个呢?一个一个的放就太麻烦了,这时候我们可以用 SpriteUtilities 库中提供的 frameSeries 方法。

定义:

frameSeries 方法可以通过已加载的纹理贴图集,使用一系列编号的帧ID来创建动画精灵。

用法:

su.frameSeries(startNumber, endNumber, baseName, extension)

参数:

名称类型描述
startNumbernumber起始帧序列号(默认值是0)
endNumbernumber结束帧序列号(默认值是1)
baseNamestring可选的基本文件名
extensionstring可选的文件扩展名

返回值:
返回一个数组,可用于制作动画精灵的纹理数组。

注意:
使用 frameSeries 方法时,要确保在 json 文件中,定义的每帧的名称都是按顺序来的,比如 frame0.png frame1.png frame2.png 这种。因为 frameSeries 方法的源码是这样写的

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   //创建一个数组来存储帧名
   let frames = [];

   for (let i = startNumber; i < endNumber + 1; i++) {
     let frame = this.TextureCache[`${baseName + i + extension}`];
     frames.push(frame);
   }
   return frames;
 }

源码中其实是用 for 循环把帧名拼接起来的。所以要保证帧名是按顺序来的,不然就获取不到了。

下来我们就试试 frameSeries 方法吧。

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>动画精灵</title>
</head>

<body>
    <div id="px-render"></div>

    <script data-original="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script data-original="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);
         
        let su = new SpriteUtilities(PIXI);
        //需要加载的纹理贴图集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        PIXI.loader.add(textureURL).load(setup); 
        function setup() { 
            //创建纹理数组
            debugger;
            let frames = su.frameSeries(0,7,"dnf",".png"); 
            //创建动画精灵
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //设置动画精灵的速度
            pixie.animationSpeed=0.1;

            //把动画精灵添加到舞台
            app.stage.addChild(pixie);
            //播放动画精灵
            pixie.play();
        }
    </script>
</body>

</html>

查看效果

注意版本问题:
1、PIXI.extras.AnimatedSprite 这个方法原来叫PIXI.extras.MovieClip ,是在 4.2.1 版本的时候修改的,本文示例代码中用 PixiJS 的版本是 4.8.2,所以没有问题,如果你在使用过程中发现调用PIXI.extras.AnimatedSprite 这个方法有问题,可以先检查下版本是否正确。

2、 SpriteUtilities 目前支持的 PixiJS 的版本是 3.0.11,而 SpriteUtilities 中用的就是PIXI.extras.MovieClip 方法,所以你如果用了比较高的 PixiJS 的版本,需要在SpriteUtilities 中修改下方法的别名。

spriteUtilities.js 文件中需要把 renderingEngine.extras.MovieClip 改成renderingEngine.extras.AnimatedSprite,把 renderingEngine.ParticleContainer 改成 PIXI.particles.ParticleContainer

这个 spriteUtilities.js 就是修改后的。

当然你也可以使用低版本的 PixiJS,这样就不用改 spriteUtilities.js 的代码了。

总结

动画精灵就是逐帧动画,通过一帧一帧的播放图像来产生运动的幻觉。

本文就是聊了聊创建动画精灵的一些方式和如何使用动画精灵。

如果文中有错误的地方,还请小伙伴们指出,万分感谢。

下一篇 学习 PixiJS — 精灵状态

查看原文

赞 36 收藏 20 评论 2

那些年丶 关注了用户 · 1月13日

FEWY @fewy

关注 267

那些年丶 关注了用户 · 1月8日

Vincent_Pat @vincent_pat

专注于Web相关领域,承接Web相关项目的研发工作,欢迎合作交流:vincent@shikehuyu.com

关注 191

那些年丶 赞了文章 · 1月8日

从零到一:实现通用一镜到底H5

图片描述

写在前面

整个2018年都被工作支配,文章自17年就断更了,每次看到有消息提示过往的文章被收藏,或者有人点赞,都不胜唏嘘。不过,凡事要始终保持积极的心态,现在回归为时未晚。最近有项目要做一镜到底,那就稍作研究吧。

一镜到底是什么?

百度百科-一镜到底
一镜到底,是指拍摄中没有cut情况,运用一定技巧将作品一次性拍摄完成。

那么运用到H5上面,是怎样的表现?网上案例也有很多,这里推荐数英的一篇文章,应用尽有:

一镜到底H5大合集:一口气看尽一个H5的套路

主要表现形式为以下几类:

  • 画中画(例如:网易-《娱乐画传》)
  • 时空穿梭(例如:天猫-《穿越时空的邀请函》)
  • 滚动动画(例如:网易-《爱的形状》)
  • 视频(这个好像没什么好说的...跟本文无关)

体验方式主要有:

  • 按住
  • 滑动

技术需求分析

图片描述

如上图的《爱的形状》,用户滑动屏幕,方块滚动,并且用户能控制播放进度;期间方块上面的纹理一直在变化,意味着动画一直在播放。

提取要点,要实现一个一镜到底H5,通常会有以下技术需求:

  1. 绘制画面:这里我们一般选用基于canvas的库,性能会更好,也方便实现效果。
  2. 添加动画:其中包括过渡、帧动画,因此需要一个动画库。
  3. 进度控制:要实现通过用户操作,来控制整个H5的前进、后退、暂停等,我们会需要进度控制相关的库。
  4. 用户操作:一镜到底的H5一般都需要用户操作以“播放”,按住或滑动,按住比较简单,用原生事件实现就好,滑动相对复杂一点,涉及阻尼运动,因此需要一个滑动相关的库。

有了需求,我们就可以相应去找解决方案了。绘图有用3D的threejs的,动画有人用anime.js,各有所好,能实现需求就行。

最终针对以上需求,我选用了AlloyTouch、TimelineMax、Pixi.js、TweenMax这几个库来实现通用的一镜到底。各个框架的优点这里就不赘述了,想了解详情的可以自行搜索,几乎都有中文资料,也很容易使用。

实现步骤要点

  1. 用Pixi创建场景,加入到想要加入的DOM容器当中。
  2. 用Pixi.loader加载精灵图。
  3. 将精灵图、背景及文本等元素绘制出来。
  4. 用TimelineMax创建一个总的Timeline,初始设置paused为true,可以设定整条Timeline的长度为1。
  5. 用TweenMax创建好过渡动画,然后将TweenMax加入到Timeline中,duration比如是占10%的话,就设定为0.1,从滚动到30%开始播放动画的话,delay就设置为0.3。
  6. 用AlloyTouch创建滚动监听,并设置好滚动高度,例如1000。
  7. 监听AlloyTouch的change事件,用当前滚动值 / 滚动高度 得到当前页面的进度。
  8. 调用总Timeline的seek方法,寻找到当前页面进度的地方,可以简单理解成拨动视频播放器的进度条滑块。
  9. 至此就可以通过用户滑动操作,控制页面元素的动画播放、后退了。

你可能会问那怎样实现上面说的几种类型的一镜到底?实际上,几种类型的不同只是动画变换方式不一样而已。

  • 画中画(缩放同时平移)
  • 时空穿梭(以中心缩放)
  • 滚动动画(平移为主,期间播放其他动画)

示例项目

简单写了个demo,如果感兴趣的朋友可以拉下来自己把玩一下。

点此查看仓库

点此查看demo

图片描述

(注:项目中素材来源于网络,仅供交流学习使用,切勿商用!)

展望

这里只实现了一个一镜到底H5的主要效果部分,距离完成还有很多工作:

  • 微信分享设置及引导
  • 添加一个加载界面
  • 添加音乐音效(用过howler,感觉不错)
  • 可能需要的生成海报(html2canvas,生成海报easy job)
  • ...

结语

这次没有用太多篇幅铺开来讲细节,主要是运用几个库组合来实现,而实际操作上还有很多地方要注意的,例如帧动画的实现,滑动的速度控制,滑到顶部、底部的处理等等。实际应用上还要继续打磨,毕竟一个漂亮的H5,是要花很多精力去构思,去优化体验的。

最后也希望能认识到更多在H5领域有研究的小伙伴,可以互相交流,甚至一起工作!

email: vincent@shikehuyu.com

查看原文

赞 89 收藏 64 评论 40

那些年丶 关注了标签 · 2020-12-31

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 176984

那些年丶 关注了标签 · 2020-12-31

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 97668

那些年丶 关注了标签 · 2020-12-31

typescript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方。包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

关注 35765

那些年丶 关注了标签 · 2020-12-31

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 195081

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-09-09
个人主页被 201 人浏览