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

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

下载下来的文件夹内容分为三个部分,play.jsproject.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. MySQL编译安装

    1.准备工作 其官方站点为http://www.mysql.com/ 为了避免发生端口冲突.程序冲突现象.建议先查询MySQL软件的安装情况,确认没有使用以RPM方式安装的mysql-server.m ...

  2. Fedora 25 Alpha版本今天发布啦

    时隔Fedora 24发布后的3个月,Fedora项目团队非常开心的宣布任何感兴趣的用户都能下载和测试即将到来的Fedora 25操作系统的Alpha预发布版本,在Fedora 25 Alpha里程碑 ...

  3. windowSoftInputMode属性讲解

    windowSoftInputMode属性讲解(下面这段内容我参考别人的博客,并加入我的一些意见) 我们从这个属性的名称中,可以很直观的看出它的作用,这个属性就是来设置窗口软键盘的交互模式的.andr ...

  4. android中paint的setXfermode属性

    本文前半部分来自于:http://www.cnblogs.com/rayray/p/3670120.html 1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个 ...

  5. Delphi中Interface接口的使用方法

    示例注释(现在应该知道的): {   1.接口命名约定 I 起头, 就像类从 T 打头一样.   2.接口都是从 IInterface 继承而来; 若是从根接口继承, 可省略.   3.接口成员只能是 ...

  6. HDU 2853 最大匹配&KM模板

    http://acm.hdu.edu.cn/showproblem.php?pid=2853 这道题初看了没有思路,一直想的用网络流如何解决 参考了潘大神牌题解才懂的 最大匹配问题KM 还需要一些技巧 ...

  7. Python面试题库

    1.Python输出中文怎么解决 方法一:用encode和decode如:import os.pathimport xlrd,sys Filename=’/home/tom/Desktop/1234. ...

  8. 7.6--找过点最多的直线(CC150)

    直接两个点确定一条直线.然后两两组合,再写一个看过多少个点的函数.一直更新max就行. import java.util.Arrays; public class Solution { public ...

  9. CentOS 下安装xdebug

    在CentOS 6.x 的系统中,是集成xdebug 的, yum install PHP-pecl-xdebug 如果是CentOS.5 也可能通过安装安装 epel 来安装 rpm -ivh ht ...

  10. 安装完eos出的问题

    Failed to load JavaHL Library.These are the errors that were encountered:no msvcp100 in java.library ...