canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2018-03-29 18:03 我要评论( )

createjs作为刚出来的东西,坑是非常多的,下面我来讲下常见的坑和解决方法。1.按钮的alpha值不能为0:在做flash的时候很多人会弄一个alpha值为0的按钮放在图片上

正文

  • ajex
  • 03-21
  • 新手写createjs时容易遇到的坑(持续更新)

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

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

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

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

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

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

    这个也不多解释同上。

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

    5.js function 内部的this指向和as3是不一样的,需要额外保存this。

    xx.addEventListener("click",function (){     this.xxxx()//这是错误的 }) var _this = this; xx.addEventListener("click",function (){     _this.xxxx()//这是正确的 })

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

    7.图片的名字不能与原件类链接名相同 (后缀名不同也算相同),fla的名字不能和元件的类链接名相同,不然new对象的时候会new成别的对象,从而显示错误或者什么都不显示。

    8.效率方面的优化,注重项目加载速度时多用矢量 注重项目体验与动画流畅时多用位图,现因为国产旧手机多对矢量支持不好,特别是安卓,还是多用位图吧,png用工具优化,推荐使用https://tinypng.com/,如果硬要用矢量,或者滤镜,或者叠加模式,可以使用SpriteSheetBuilder类优化,详细教程点击这里

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

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

    11.animateCC如果要使用资源整合sprite表功能,请把png和jpg分开,因为不分开会很大(flashcc没有这个功能所以别用),最大大小也调整的低一点2000*2000左右吧(不然有些浏览器会很卡)。

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

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

    14.如果出现无法跳帧,把MC的autoReset设置为false就好了,如果还不行setTimeout延时跳帧或者把跳帧代码写到第二帧,还有一种情况是有滤镜,如果有滤镜就把滤镜拿掉,直接换成图片

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

    16.使用animateCC做遮罩层的时候,遮罩层只能有一个元件,并元件内部不能有元件动画,不能有超过一帧,否则会被提示 不支持的功能:遮罩中有多帧符号

    17.graphics在使用moveTo lineTo时如果异步画线需要重新设置样式

    比如:

        var shape = new createjs.Shape();     container.addChild(shape);     shape.graphics.setStrokeStyle(2).beginStroke("#000000");     shape.graphics.moveTo(0,0);     shape.graphics.lineTo(100,100);     shape.graphics.lineTo(200,150);     shape.graphics.lineTo(300,50);

    这样是对的 可以只设置一个style然后不停的lineTo下去,但是如果setTimeout或者click后再画就不行了,比如:

       var shape = new createjs.Shape();     container.addChild(shape);     shape.graphics.setStrokeStyle(2).beginStroke("#000000");     shape.graphics.moveTo(0,0);     shape.graphics.lineTo(100,100);     shape.graphics.lineTo(200,150);     shape.graphics.lineTo(300,50);     setTimeout(function (){ //        shape.graphics.lineTo(400,300);//这里直接lineTo虽然颜色不会变但是粗细就变了,不知道是不是createjs的BUG         shape.graphics.setStrokeStyle(2).beginStroke("#000000");//这样重新设置样式后就没问题了         shape.graphics.moveTo(300,50);         shape.graphics.lineTo(400,300);     },2000)

    18.直接使用animateCC发布功能导出sprite图,图与图之间会有1像素间隔,有时候会在项目图片的边框上出现底色,

    解决办法:animateCC发布设置-》sprite表-》jpeg设置-》最大大小设置为1 也就是说jpg图不融合sprite,png没关系,因为png是透明的,没有底色。

    19.项目图片模糊,多半是移动端没有做2倍像素,PC端多半是自适应出问题了,详细教程可以看:

    面向canvas,更加简单的自适应方式

    再讲讲自适应-移动端自适应

    关于自适应的那点事
    20.一段时间点狂点click事件会掉帧,换成mousedown就好了。

    21.animateCC软件中图片模糊。

    右键库里的图片,把允许平滑关掉(关掉后缩放可能会出现锯齿,这个是CC的情况,因为原来flash的机制是这样的,canvas项目导出后是不会有的)

    22.在animateCC做补间的时候,先把图片或者矢量变成影片剪辑再做,不然导出的代码量会变大,还有可能会出问题。

    23.在animateCC遮罩里做补间时,由于animateCC为了兼容,对象都是放在时间轴addTween而不是addChild,所以会出现一大堆矢量代码,如果有代码洁癖的,可以把这个功能用代码写,而不用animateCC。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 手写签名插件

      手写签名插件

      2018-01-25 12:05

    • createjs技术博客

      createjs技术博客

      2017-11-19 13:01

    • CreateJs入门必知必会

      CreateJs入门必知必会

      2017-06-06 18:03

    • Createjs学习心得之使用EaselJs实现拖拽效果

      Createjs学习心得之使用EaselJs实现拖拽效果

      2017-05-06 10:00

    网友点评