一起摇摆html5游戏,和 transformjs 一起摇摆
写在前面
记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示:
facebook 当时使用的是 createjs 下的子项目 easeljs 和 tweenjs 去制作,基于 Canvas 的动画。基本的原理主要是:循环运动 Canvas 抽象的 DisplayObject 的 skewX 和 scaleY 来实现软体摇摆。
目前来看 transformjs 也能做到,因为 transformjs 也能运动 skewX 和 scaleY。先来看看 facebook 的方式。
tweenjs + transformjs
注意这里的 tweenjs 是 createjs 下的子项目,而不是 github 上的 tween.js 项目。
1
2
3
4
5
6
7
8
9
varelement=document.querySelector("#test");
Transform(element);
element.originY=100;
element.skewX=-20;
varTween=createjs.Tween,
sineInOutEase=createjs.Ease.sineInOut;
Tween.get(element,{loop:true}).to({scaleY:.8},450,sineInOutEase).to({scaleY:1},450,sineInOutEase);
Tween.get(element,{loop:true}).to({skewX:20},900,sineInOutEase).to({skewX:-20},900,sineInOutEase);
元素的初始 skewX 是-20,为了和 scale 的步调一致
元素的 originY 是 100,为的以企鹅的 bottom center 为基准点
可以看到,由于 transformjs 高度抽象,可以和 tweenjs 轻松搭配使用,没有任何压力。
AlloyFlow + transformjs
可能上面的代码不是很明白具体实现的流程?说实话,第一次看到上面的代码也没有一下看清晰流程。那么就使用 AlloyFlow 分解工作流的方式去实现同样的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
varelement=document.querySelector("#test");
Transform(element);
element.originY=100;
element.skewX=-20;
functionsineInOut(a){
return0.5*(1-Math.cos(Math.PI*a));
}
varalloyFlow=newAlloyFlow({
workflow:[
{
work:function(){
To.go(element,"scaleY",.8,450,sineInOut);
To.go(element,"skewX",20,900,sineInOut)
},
start:0
},{
work:function(){
To.go(element,"scaleY",1,450,sineInOut)
},
start:450
},{
work:function(){
To.go(element,"scaleY",.8,450,sineInOut);
To.go(element,"skewX",-20,900,sineInOut)
},
start:900
},{
work:function(){
To.go(element,"scaleY",1,450,sineInOut);
},
start:1350
},{
work:function(){
this.start();
},
start:1800
}
]
}).start();
在线演示地址: http://alloyteam.github.io/AlloyTouch/transformjs/example/soft.html
可以看到上面的 workflow 里面有一堆 work 按照 start 的时间依次序执行,最后在 1800ms 的时候调用 this.start() 会回到起点重新开始运行。还需要解释一下为什么选择 sineInOut 的 easing。可以来看看其缓动图像:
sineInOut 速率是先慢后快再慢,刚好符合软体自身约束作用力的模拟。
那么,AlloyFlow 是何方神器?且听下回单独开篇分解。
开始 transformjs 之旅
有很多童鞋问,transformjs 还能做什么酷炫特效?怎么在官网看到的都是简单的效果?
其实 transformjs 他只是提供了基础的 transformation 能力,不与时间、和运动库耦合。可以和任意时间运动库配合使用。所以怎么酷炫完全靠大家创意和想象力,搭配 transformjs 使用就对了。
transformjs 会计算出 matrix3d 赋给 dom 的 transform msTransform OTransform MozTransform webkitTransform,保证硬件加速和兼容性的同时,不丢失可编程性,点个赞....
一起摇摆html5游戏,和 transformjs 一起摇摆相关推荐
- 一起摇摆html5游戏,和transformjs一起摇摆
写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs ...
- 和transformjs一起摇摆
写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs ...
- 【CSON原创】HTML5游戏框架cnGameJS开发实录(外部输入模块篇)
返回目录 1.为什么我们需要外部输入模块? 在游戏中我们常常用到类似这样的操作:鼠标点击某位置,玩家对象移动到该位置,或者按鼠标方向键,玩家向不同方向移动,等等.这些操作无一不用与外部输入设备打交道. ...
- 《HTML5游戏编程核心技术与实战》——2.8 小结
本节书摘来自异步社区<HTML5游戏编程核心技术与实战>一书中的第2章,第2.8节,作者: 向峰 更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.8 小结 本 ...
- html5游戏生态,白鹭引擎发起共建HTML5游戏生态访谈!
5月22日,由白鹭时代主办的第二届HTML5游戏生态大会将在北京国际会议中心启幕.大会召开前夕,白鹭将联合游戏葡萄.新浪游戏.游久网.魔方网.游戏陀螺等多家媒体共同推出"共建H5游戏生态&q ...
- Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...
- Molecule – 帮助你构建跨平台的 HTML5 游戏
Molecule 框架由拥有超过五年手机游戏开发经验的游戏开发者开发.由于移动浏览器与实际的 HTML5 规范的兼容性的改进和内部硬件的自然进化,HTML5 手机游戏真正有可能流行起来. 您可能感兴趣 ...
- 《HTML5游戏编程核心技术与实战》一2.6 其他全局属性
本节书摘来异步社区<HTML5游戏编程核心技术与实战>一书中的第2章,第2.6节,作者: 向峰 责编: 杨海玲,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2 ...
- HTML5游戏开发(四):飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
最新文章
- muduo之CountDownLatch.cc
- mybatis-spring整合jar包功能
- MySQL远程连接丢失问题解决方法(Lost connection to MySQL server)
- phpstrom正则替换
- 干得累死,并不见得老板就待见你?
- javascript --- 防抖与节流
- Java笔记-springframework.ws中拦截器的使用(SOAP)
- 单点登录的原理与简单实现
- java中set怎么建int型_使用Array.setInt来填充Java中的数组
- 对于vsftp writable anonymous root问题的解决
- ×××技术漫谈之IPSec(附MPLS)
- findwindowex子窗口类型有哪几种_游戏场景该怎么画?来参考一下不同的类型吧
- C++基础教程之日期和时间
- spark DataSet与DataFrame的区别
- springBoot过滤器去除请求参数前后空格
- 智慧体育训练考核系统软件-智能体能综合测评系统
- 计算机组成原理平均cpi怎么算_计算机组成原理 第1--4章
- s8 android 8.0变化,等待很长时间!三星S8系列手机现在可以升级到Android 8.0系统的稳定版本!...
- 测绘人真实故事 | 放弃上万月薪从私企跳回国企
- 基于Citespace和vosviewer文献计量学可视化SCI论文高效写作方法