Animatron是国外一款在线HTML5动画制作工具,网址:www.animatron.com 当然,想使用的话,是需要FQ的。

用animatron制作好的动画是可以下载为代码和GIF的,这时候付费玩家自然又是充满优越感的,因为付费玩家可以下载普通玩家下不到的部分。

下载下来的文件夹内容分为三个部分,play.js、project.html以及一些.mp3 .ogg。

将动画整合到网页后会发现,这货并非响应式的,这怎么能忍,在手机上左右拖来拖去简直比吃了苍蝇还恶心,这时候只需找到project.html里的js代码,

将里面设定的宽高改成如下:

          var width = document.documentElement.clientWidth;

          var height = document.documentElement.clientHeight;

将预先设定的  wrapper.style.width 、 wrapper.style.height、wrapper.style.marginLeft、wrapper.style.marginTop 的值改成如下:

          wrapper.style.width = width + 'px';

           wrapper.style.height = height + 'px';

           wrapper.style.marginLeft = 0 + 'px';

           wrapper.style.marginTop = 0 + 'px';

好了,这时候已经实现了自适应。开开心心的看动画了,看着看着,突然,在末尾出现了animatron的广告,这。。。自然还是不能忍啊,还有下面的小图标,看这就难受啊。

这时候只需将   "duration": 35 这项后面的数值改小就不会出现后面的动画了,然后将 "dimension": [980, 520] 第二个数值改小,

下面的小图标就会被 "overflow:hidden"了。

最后,如果你的网站背景不是黑色的话,你就会发现动画的两侧的黑色的背景看着非常的扎眼,这时候找到play.js的第243行,找到如图所示的部分

将填充色改成自己想要的颜色就行了。

关于HTML5在动画制作工具Animatron的一些问题的更多相关文章

  1. MFC实现Gif动画制作工具

    每天来博客园逛,看里面各种好文章,发现自己已经许久没有分享点什么了. 前几天用MFC设计了一个小型的Gif动画制作工具,思路如下: 1.支持图片格式:"*.jpg","* ...

  2. SVG动画制作工具 , 从此抛弃臃肿的gif

    VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...

  3. [置顶] 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  4. 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  5. css3动画制作工具

    1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...

  6. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  7. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  8. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  9. 7款让人惊叹的HTML5粒子动画特效

    HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...

随机推荐

  1. ASN.1编码

    来自几年前本人写的一篇博客 http://blog.csdn.net/newyf_cun/article/details/13016069 如下使用libtasn1分析asn1的编码规则. http: ...

  2. iOS中AOP与Method Swizzling 项目中的应用

    引子:项目中需要对按钮点击事件进行统计分析,现在项目中就是在按钮的响应代码中添加点击事件,非常繁琐.所以使用了AOP(面向切面编程),将统计的业务逻辑统一抽离出来. 项目中添加的开源库:https:/ ...

  3. Nginx反向代理多虚拟主机代理

    根据http://www.cnblogs.com/zzzhfo/p/6032095.html这个环境配置 在web01和web02上配置基于域名的虚拟主机 web01 [root@web01 /]# ...

  4. 外国类似stackoverflow这样的网站访问慢怎么解决-遁地龙卷风

    第二版 百度搜索蓝灯 下载桌面版 双击运行 如果打开的浏览器不是你想要的 拷贝地址栏地址给你想要的浏览器 一切就ok了!!!!! 建议不访问国外网站时,便将蓝灯关掉,否则在访问一些不开蓝灯能够正常访问 ...

  5. 以下css可以清除浮动

    .clearfix:after { content: ""; clear: both; visibility: hidden; display: block; height: 0p ...

  6. 1.xrange和range不要混了,2.range(len(xx))不如用enumerate

    range()是列表, xrange()是迭代 >>> a = ['Mary', 'had', 'a', 'little', 'lamb'] >>> for i i ...

  7. iOS设计中的“代理”

    “代理”--在iOS的开发设计中是一个非常重要的概念,同时又是十分基础的知识.所以,掌握“代理”势在必行! 以下,结合一个具体的例子,详细认识“代理”: 1, 图例解释: ①:定义两个文本输入框UIT ...

  8. 快速排序(Quicksort)

    快速排序:是对冒泡排序的一种改进. 什么是冒泡排序:简单一点就是冒气泡.极值数据会到达数据的顶端. 实现步骤:建立一个数据排列标准,从大到小还是从小到大. [从大到小排列]:从第一个数据开始遍历,比较 ...

  9. U盘安装ubuntu server 14.04

    U盘安装ubuntu server 14.04 U盘安装ubuntu server 14.04 1.制作启动u盘 2.开始安装 1 将u盘插入主机,重启后从u盘启动 2 选择语言(随便挑,随便选),我 ...

  10. postgresql 函数&存储过程 ; 递归查询

    函数:http://my.oschina.net/Kenyon/blog/108303 紧接上述,补充一下: 输入/输出参数的函数demo(输入作为变量影响sql结果,输出作为结果返回) create ...