MCAKE WAP端活动模板
采用淘宝的flexible写页面,可以直接根据PSD的尺寸来写css
比如在PSD中,图片宽度为200px,则在index.scss中这样写:
width:px2rem(200)
然后执行gulp命令gulp sass或者gulp sass:watch,将sass文件编译成css
详见demo https://qpxtwhite.github.io/MCAKE-WAP-ACTIVITY/demo/index-template1.html
资源配置文件可用白鹭的ResDepot制作
详见demo https://qpxtwhite.github.io/MCAKE-WAP-ACTIVITY/demo/index-template1.html
序列帧动画配置可以用Texture Merger的Sprite Sheet功能
加载fx_movieClip.js,给html中的canvas增加类fx-movieClip,定义变量cvs存放各个序列帧动画的配置。各属性说明如下:
- fx-movieClip-name:序列帧动画名,同时也是cvs中的对象名;
- fx-movieClip-sprite:序列帧用到的雪碧图,将会从loader中加载;
详见demo https://qpxtwhite.github.io/MCAKE-WAP-ACTIVITY/demo/index-template1.html
加载fx_scrollAnimation.js,给html中需要动画的元素增加类fx-scrollAnimation。各属性说明如下:
- fx-scrollAnimation-x:x偏移量;
- fx-scrollAnimation-y:y偏移量;
- fx-scrollAnimation-delay:页面初始化时,延迟出现的值;
- fx-scrollAnimation-delayadjust:滚动时,延迟值;
- fx-scrollAnimation-linkto:出现以后,紧接着需要做动画的元素;
- fx-scrollAnimation-duration:动画持续时间;
在package.json中,自行配置buildConfig