关于HTML5在动画制作工具Animatron的一些问题
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的一些问题的更多相关文章
- MFC实现Gif动画制作工具
每天来博客园逛,看里面各种好文章,发现自己已经许久没有分享点什么了. 前几天用MFC设计了一个小型的Gif动画制作工具,思路如下: 1.支持图片格式:"*.jpg","* ...
- SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...
- [置顶] 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...
- 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...
- css3动画制作工具
1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...
- HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页 制 ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- 7款让人惊叹的HTML5粒子动画特效(转载)
1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...
- 7款让人惊叹的HTML5粒子动画特效
HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...
随机推荐
- Ubuntu 下apache2开启rewrite隐藏index.php
为了实现 http://www.example.com/route/route 而不是 http://www.example.com/index.php/route/route 需要开启apache2 ...
- 用 FragmentManager 替换时使用 GoogleMaps 崩溃 app
我要用下面的代码来加载的片段的项已被选定在 NavigationDrawer,然而 MapFragment 包含它里面的谷歌地图片段和它崩溃后试图打开它第二次. 这里是我使用的代码: @Overrid ...
- 手把手教你crontab排障
导读 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,cr ...
- hiho #1114 : 小Hi小Ho的惊天大作战:扫雷·一
#1114 : 小Hi小Ho的惊天大作战:扫雷·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 故事背景:密室.监视器与充满危机的广场 “我们还是循序渐进,先来考虑这 ...
- (集成电路卡)ID卡
IC卡(intergrated Circuit Card,集成电路卡),又称为智能卡,智慧卡,微电路卡,微芯片卡 等等. 它是将一个微电子芯片嵌入符合ISO 7816标准的卡基中,做成卡片形状. IC ...
- BZOJ 4236: JOIOJI
Description 给出一个字符串,只包含3个字母,询问最长的一个子串,3个字母出现次数相同. Sol map. 如果一个子串满足条件,那么它端点处的三个字母的个数两两差值都是一样的,直接存个状态 ...
- Mybatis 3.3.0 Log4j配置
最近做一个SSM学习项目,配置log4j,mybatis用下面的方式配置,不管用,打印不出执行的SQL语句. log4j.logger.java.sql.Connection=DEBUGlog4j.l ...
- 如何发布及部署asp.net网站
用vs开发完asp.net网站之后如何发布到服务器上去变成正式网站? 1.发布首先需要发布网站,这个步骤就是生成正式网站的目录(把源代码编译成.cs代码文件编译成.dll文件)详细步骤:http:// ...
- 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>
1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...
- Nunit-Writing Tests
Nunit 测试可以被任意支持attributes的.net语言使用 Attributes被用于去标识测试类和测试方法,然后通过不同的方式修改他们的行为 Assertions针对一个或多个约束,测试一 ...