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. maven之ubutu安装

    1.下载地址:http://maven.apache.org/download.cgi 2.安装 将下载后的文件解压到你指定的文件即可,命令如下: tar -xzvf apache-maven-3.0 ...

  2. CSS3属性选择通配符

    CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child()等. Attribute selectors:在属性中可以加入通配符,包括^,$,* [att^=val] ...

  3. unity3d 关于断点下载和整个下载(用于更新)

    转自:http://blog.csdn.net/yutyliu/article/details/24346459 string t = ""; //整体下载 IEnumerator ...

  4. 热更新脚本C#light,ulua,Scorpio性能比较

    http://www.unity蛮牛.com/thread-32861-1-1.html 测试环境: unity4.5.2  三个脚本全是源码导入  PC :处理器 Intel(R) Core(TM) ...

  5. Palindrome Partitioning II Leetcode

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  6. 对C++虚函数、虚函数表的简单理解

    一.虚函数的作用 以一个通用的图形类来了解虚函数的定义,代码如下: #include "stdafx.h" #include <iostream> using name ...

  7. POJ 2631 DFS+带权无向图最长路径

    http://poj.org/problem?id=2631 2333水题, 有一个小技巧是说随便找一个点作为起点, 找到这个点的最远点, 以这个最远点为起点, 再次找到的最远点就是这个图的最远点 证 ...

  8. ndk学习7: 使用静态库

    目录: 手工编译静态库 ndk-build编译静态库   手工编译静态库 老规矩还是先手工操作,知其然并知其所以然   需要用到的核心命令: gcc –g –c mod1.c mod2.c mod3. ...

  9. ZJOI day1总结

    虽然没人看,虽然滚了大粗,但还是这样勉励一下自己.. 今年大约是进队无望了. before ZJOI 感觉自己时间很充裕,与lyx大爷一起颓颓颓.. day -3 到xj. day -2 听课.感觉洲 ...

  10. json方式封装接口通信

    编写response类: <?php class response{ /** * 按json方式输出通信数据 * @param integer $code 状态码 * @param string ...