关于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粒子动画特效,这些粒子特效都提供源代码 ...
随机推荐
- 怎样用路由器共享需要网页认证的wifi
设置步骤:第一步:登录管理界面 1.连接电脑使用单机能上网的电脑,通过网线连接到路由器的LAN口.2.登录管理界面打开电脑的浏览器,清空地址栏后,输入路由器的管理地址(以路由器底部标贴标识的管理地址为 ...
- windows和linux文件共享
###Samba安装 [root@samba ~]# yum install -y samba* [root@samba ~]# rpm -qa | grep samba ###开启s ...
- Java多线程基础知识(六)
一. Java中的线程池 线程池的作用: 1. 降低资源消耗 2. 提高响应速度 3. 提高线程的可管理性 线程池处理流程: 1. 线程池判断核心线程池线程是否都在执行任务,如果不是,则创建一个新的工 ...
- leetcode 215. Kth Largest Element in an Array
Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...
- 面向对象的 CSS (OOCSS)
原文链接:来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”?作为一个 Web 开发者,我们的工作与内容创作有着频繁的联系.这是一条经常被引用,并且正确地解释了什么因 ...
- 学习Node.js笔记(一)
一.什么是Node.js 1.1.Node.js是什么 Node.js是用来编写高性能网络服务器的JavaScript工具包 Node.js 是一个基于Chrome JavaScript 运行时建立的 ...
- python 字典 注意点
dict()构造函数直接从键-值对序列创建字典: >>> >>> dict([('sape', 4139), ('guido', 4127), ('jack', 4 ...
- Maven打包排除不需要的文件。
pom.xml <!-- package打包排除掉一些配置文件 --> <plugin> <groupId>org.apache.maven.plugins< ...
- Python分割list
对于一个很大的列表,例如有超过一万个元素的列表,假如需要对列表中的每一个元素都进行一个复杂且耗时的计算,用单线程处理起来会很慢,这时有必要利用多线程进行处理,处理之前首先需要对大的列表进行分割,分割成 ...
- [20160804]synchronized
class Timer{ private static int num; void add(String name){ //synchronized (this){ num++; try{ Threa ...