新手写createjs时容易遇到的坑(持续更新)


createjs作为刚出来的东西,坑是非常多的,下面我来讲下常见的坑和解决方法。

1.按钮的alpha值不能为0:

在做flash的时候很多人会弄一个alpha值为0的按钮放在图片上代替图片按钮点击,以减少项目的大小。但是在createjs中所有对象 alpha为0时都不受任何鼠标事件影响。不过解决起来也非常容易,alpha设为1就可以了。

2.项目中有使用引导层 必须在初始化中写上createjs.MotionGuidePlugin.install();

这个就不用多说了 如果项目中的动画有用到引导层 初始化的时候加上这句话就可以了。

3.项目中使用音乐时 必须在加载时写上loader.installPlugin(createjs.Sound);

这个也不多解释同上。

4.用到mouseOver事件的时候需要加一句stage.enableMouseOver(10);要让移动端支持createjs的点击等鼠标事件时需要加上createjs.Touch.enable(stage);

5.修改组件的大小的时候请在最子的对象内修改

比如mc宽300内有矢量对象 要把他变成500 不能直接拉500 必须在内部把他的矢量对象拉成500(简单的说就是在最底层修改大小)

QQ图片20160201114235

6.使用createjs框架时 创建对象时请在 this中创建 不要在 p 中创建

QQ图片20160201114517

因为this是该对象 p的话相当于公共对象 也就是你new下一个对象时会对上一个产生影响

7.侦听时不要直接用p.function侦听 要在外面包一层function

QQ图片20160201132653

这样可以正确的重写方法 function内可以拿到想要的this(p就是继承过来的父类的原型 上面的代码可以看到js当中的继承exntend) 

8.在类的内部请用this.xx()或类对象.xx()调用方法,不要用p.xx(),因为用p.xx(),继承父类调用重写的方法还会使用父类的方法。

9.跨域错误(点击图片的时候无效报错),如果是在用flashCC的时候跨域,请更新软件,最新版本animateCC会自动生成本地服务器,或者导出代码后放在intellij或webstorm等编写工具,这些软件也是可以生成本地服务器的,如果是网络跨域可以尝试image.crossOrigin="anonymous"

10.修改子元件内部位置的时候 也要修改子元件的中心点

就是按Q自由缩放时的那个点,那个点也会影响子元件的坐标 坑爹的createjs 

11.图片的名字不能与原件名字相同 (后缀名不同也算相同)

 图片的名字不能与原件名字相同是因为cc是机械的按照格式导出文件 如果图片名和元件名一样很有可能你想新建元件的时候结果新建出来的是元件 除了这个要求当然也不能有中文,写web的都知道有中文是什么结果,as转js的死记这个要求就可以

12.效率方面的优化

注重项目加载速度时多用矢量 注重项目体验与动画流畅时多用位图

(现因为国产旧手机多对矢量支持不好,特别是安卓,还是多用位图吧,png用工具优化,推荐使用https://tinypng.com/)

13.CC生成的对象不能继承,因为CC生成的对象内部经过特殊处理,所以不能直接继承,请用复合。

14.tween在MoiveClip的timeline的运行会从毫秒计算变成帧计算,如wait(1)-帧 ,wait(1000)-毫秒。

15.animateCC如果要使用资源整合sprite表功能,请把png和jpg分开,因为不分开会很大(flashcc没有这个功能所以别用),最大大小也调整的低一点2000以内吧(现阶段animateCC有bug,如果太大,图片旋转的时候某些浏览器会很卡)。

16.createjs侦听点击事件是会穿透的,也就是在上面掩盖东西是无效的,不过也有办法解决,在掩盖对象上面放一个空的点击侦听就可以了。

17.动画过多微信上切换程序后切回会掉帧,某些版本手机会出现,某些版本微信会直接关掉浏览器再打开就不会掉帧,当然这不是createjs的原因,因为css动画也会出现这个问题,是整个浏览器的帧频掉了如果有大佬发现什么可以解决这个bug的方法请留言,谢谢)

18.制做移动端时不要用css自动适配屏幕,这样createjs会按照一倍像素配置,需要先按手机屏幕2倍像素的大小初始化后再让canvas的style的width和height除以2(看本人网站demo),或者使用meta标签把2倍大的页面缩成原大小也可以(这样做相当方便,很多前段制作移动端页面都是这样做的,但是也容易出bug,比如微信长按识别二维码会识别不出来)

19.如果出现跳帧显示不正常,如某些图片无法显示,请把所有资源放到第一帧,用不到的alpha位置为0。详情:http://www.ajexoop.com/wordpress/2016/08/%E5%85%B3%E4%BA%8E%E8%A7%A3%E5%86%B3animatecc%E6%97%A0%E6%B3%95%E8%B7%B3%E5%B8%A7%E5%92%8C%E6%9C%89%E6%97%B6%E5%80%99%E8%B7%B3%E8%BF%87%E6%9F%90%E4%BA%9B%E5%B8%A7%E7%9A%84bug.html

20.图片的长宽不能太长,如果长了切成多段,再在animateCC里拼起来。不然你会觉得图片莫名其妙变短了。

21.使用animateCC或者flashCC项目间粘贴资源的时候,如果有类链接,需要重新赋予一遍,否则不会被导出。


注:本文转载自http://www.ajexoop.com/,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

上一篇 下一篇