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. Ubuntu 下apache2开启rewrite隐藏index.php

    为了实现 http://www.example.com/route/route 而不是 http://www.example.com/index.php/route/route 需要开启apache2 ...

  2. 用 FragmentManager 替换时使用 GoogleMaps 崩溃 app

    我要用下面的代码来加载的片段的项已被选定在 NavigationDrawer,然而 MapFragment 包含它里面的谷歌地图片段和它崩溃后试图打开它第二次. 这里是我使用的代码: @Overrid ...

  3. 手把手教你crontab排障

    导读 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,cr ...

  4. hiho #1114 : 小Hi小Ho的惊天大作战:扫雷·一

    #1114 : 小Hi小Ho的惊天大作战:扫雷·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 故事背景:密室.监视器与充满危机的广场 “我们还是循序渐进,先来考虑这 ...

  5. (集成电路卡)ID卡

    IC卡(intergrated Circuit Card,集成电路卡),又称为智能卡,智慧卡,微电路卡,微芯片卡 等等. 它是将一个微电子芯片嵌入符合ISO 7816标准的卡基中,做成卡片形状. IC ...

  6. BZOJ 4236: JOIOJI

    Description 给出一个字符串,只包含3个字母,询问最长的一个子串,3个字母出现次数相同. Sol map. 如果一个子串满足条件,那么它端点处的三个字母的个数两两差值都是一样的,直接存个状态 ...

  7. Mybatis 3.3.0 Log4j配置

    最近做一个SSM学习项目,配置log4j,mybatis用下面的方式配置,不管用,打印不出执行的SQL语句. log4j.logger.java.sql.Connection=DEBUGlog4j.l ...

  8. 如何发布及部署asp.net网站

    用vs开发完asp.net网站之后如何发布到服务器上去变成正式网站? 1.发布首先需要发布网站,这个步骤就是生成正式网站的目录(把源代码编译成.cs代码文件编译成.dll文件)详细步骤:http:// ...

  9. 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>

    1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...

  10. Nunit-Writing Tests

    Nunit 测试可以被任意支持attributes的.net语言使用 Attributes被用于去标识测试类和测试方法,然后通过不同的方式修改他们的行为 Assertions针对一个或多个约束,测试一 ...