html5动画制作-现在想要做一个产品的动画演示，想学一个快速上手的，有什么软件推荐

小编 • • 电脑百科

本文目录1、现在想要做一个产品的动画演示，想学一个快速上手的，有什么软件推荐？2、如何使用html5与css3完成google涂鸦动画？3、网页设计什么软件好呢？4、有哪些好用的HTML5绘图工具？5、hype有windows版吗？1、现在想要做一个产品的动画演示，想学一个快速上手的，有什么软件推荐？xp系统的电脑是配置有点低了，用win7的就好了，这里推荐两个操作简单的演示软件：【Focusky

现在想要做一个产品的动画演示，想学一个快速上手的，有什么软件推荐？

xp系统的电脑是配置有点低了，用win7的就好了，这里推荐两个**作简单的演示软件：

【Focusky】

这个是**作简单的动画演示制作软件，最大亮点是镜头切换效果，就是能像放电影一样，3D缩放、旋转，比较能吸引人的目光；在**作上，简单易上手，自带比较多的素材和模板，有脑图功能，做产品流程也方便。在输出上，能输出视频、exe、html5等格式

【Prezi】

原装国外软件，可以通过多种终端创建演示文稿（web网页端、桌面端、移动端），制作演示作品比较方便，但全英版本，如果不懂英文的会比较头疼，使用中文需要通过css编辑器链接字体

就说这俩吧，可以简单做出产品的动画演示

如何使用html5与css3完成google涂鸦动画？

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要：因为浏览器能够优化那些元素的性能(通常是他们的样式，比如CSS)，而我们使用canvas自定义画出来的效果却不能被优化。原因又在于，浏览器使用的硬件主要取决于显卡的能力。目前，浏览器没有给予我们直接访问显卡的权力，比如，每一个绘画**作都不得不在浏览器中先调用某些函数。 1.canvas html代码：

代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animation in HTML5 using the canvas element</title> </head> <body onload=”init();”> <canvas id=”canvas” width=”1000″ height=”600″>Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas> <div id=”controls”> <button type=”button” onclick=”speed(-0.1);”>Slower</button> <button type=”button” onclick=”play(this);”>Play</button> <button type=”button” onclick=”speed(+0.1)”>Faster</button> </div> </body> </html>

js代码： 定义一些变量：

代码如下:

var dx=5, //当前速率 rate=1, //当前播放速度 ani, //当前动画循环 c, //画图(Canvas Context) w, //汽车[隐藏的](Canvas Context) grassHeight=130, //背景高度 carAlpha=0, //轮胎的旋转角度 carX=-400, //x轴方向上汽车的位置(将被改变) carY=300, //y轴方向上汽车的位置(将保持为常量) carWidth=400, //汽车的宽度 carHeight=130, //汽车的高度 tiresDelta=15, //从一个轮胎到最接近的汽车底盘的距离 axisDelta=20, //汽车底部底盘的轴与轮胎的距离 radius=60; //轮胎的半径

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

代码如下:(function(){ var car=document.createElement(‘canvas’); //创建元素 car.height=carHeight+axisDelta+radius; //设置高度 car.width=carWidth; //设置宽度 w=car.getContext(‘2d’); })();

点击“Play”按钮，通过定时重复执行“画汽车”**作，来模拟“帧播放”功能：

代码如下:function play(s){ //参数s是一个button if(ani){ //如果ani不为null，则代表我们当前已经有了一个动画 clearInterval(ani); //所以我们需要清除它(停止动画) ani=null; s.innerHTML=’Play’; //重命名该按钮为“播放” }else{ ani=setInterval(drawCanvas,40); //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一 s.innerHTML=’Pause’; //重命名该按钮为“暂停” } }

加速，减速，通过以下方法，改变移动距离的大小来实现：

代码如下:function speed(delta){ var newRate=Math.max(rate+delta,0.1); dx=newRate/rate*dx; rate=newRate; } 页面加载的初始化方法： //init function init(){ c=document.getElementById(‘canvas’).getContext(‘2d’); drawCanvas(); }

主调方法：

代码如下:function drawCanvas(){ c.clearRect(0,0,c.canvas.width, c.canvas.height); //清除Canvas(已显示的)，避免产生错误 c.save(); //保存当前坐标值以及状态，对应的类似“push”**作 drawGrass(); //画背景 c.translate(carX,0); //移动起点坐标 drawCar(); //画汽车(隐藏的canvas) c.drawImage(w.canvas,0,carY); //画最终显示的汽车 c.restore(); //恢复Canvas的状态，对应的是类似“pop”**作 carX+=dx; //重置汽车在X轴方向的位置，以模拟向前走 carAlpha+=dx/radius; //按比例增加轮胎角度 if(carX>c.canvas.width){ //设置某些定期的边界条件 carX=-carWidth-10; //也可以将速度反向为dx*=-1; } }

画背景：

代码如下:function drawGrass(){ //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标 var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height); //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色 grad.addColorStop(0,’#33CC00′); grad.addColorStop(1,’#66FF22′); c.fillStyle=grad; c.lineWidth=0; c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight); }

画车身：

代码如下:function drawCar(){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //清空隐藏的画板 w.strokeStyle=’#FF6600′; //设置边框色 w.lineWidth=2; //设置边框的宽度，单位为像素 w.fillStyle=’#FF9900′; //设置填充色 w.beginPath(); //开始绘制新路径 w.rect(0,0,carWidth,carHeight); //绘制一个矩形 w.stroke(); //画边框 w.fill(); //填充背景 w.closePath(); //关闭绘制的新路径 drawTire(tiresDelta+radius,carHeight+axisDelta); //我们开始画第一个轮子 drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta); //同样的，第二个 }

画轮胎：

代码如下:function drawTire(x,y){ w.save(); w.translate(x,y); w.rotate(carAlpha); w.strokeStyle=’#3300FF’; w.lineWidth=1; w.fillStyle=’#0099FF’; w.beginPath(); w.arc(0,0,radius,0,2*Math.PI,false); w.fill(); w.closePath(); w.beginPath(); w.moveTo(radius,0); w.lineTo(-radius,0); w.stroke(); w.closePath(); w.beginPath(); w.moveTo(0,radius); w.lineTo(0,-radius); w.stroke(); w.closePath(); w.restore(); }

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！ 2.CSS3 你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果： HTML代码：

代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id=”container”> <div id=”car”> <div id=”chassis”></div> <div id=”backtire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> <div id=”fronttire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> </div> <div id=”grass”></div> </div> <footer></footer> </body> </html> CSS代码： body { padding:0; margin:0; }

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

代码如下:/*定义动画：从-400px的位置移动到1600px的位置 */ @keyframes carAnimation { 0% { left:-400px; } /* 指定初始位置，0%等同于from*/ 100% { left:1600px; } /* 指定最终位置,100%等同于to*/ } /* Safari and Chrome */ @-webkit-keyframes carAnimation { 0% {left:-400px; } 100% {left:1600px; } } /* Firefox */ @-moz-keyframes carAnimation { 0% {left:-400; } 100% {left:1600px; } } /*IE暂不支持,此处定义是为了向后兼容IE10*/ @-ms-keyframes carAnimation { 0% {left:-400px; } 100%{left:1600px; } } @keyframes tyreAnimation { 0% {transform: rotate(0); } 100% {transform: rotate(1800deg); } } @-webkit-keyframes tyreAnimation { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(1800deg); } } @-moz-keyframes tyreAnimation { 0% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(1800deg); } } @-ms-keyframes tyreAnimation { 0% { -ms-transform: rotate(0); } 100% { -ms-transform: rotate(1800deg); } } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对***/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ /*以下内容赋予该元素预先定义的动画及相关属性*/ -webkit-animation-name:carAnimation; /*名称*/ -webkit-animation-duration:10s; /*持续时间*/ -webkit-animation-iteration-count:infinite; /*迭代次数-无限次*/ -webkit-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -moz-animation-name:carAnimation; /*名称*/ -moz-animation-duration:10s; /*持续时间*/ -moz-animation-iteration-count:infinite; /*迭代次数-无限次*/ -moz-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ -ms-animation-name:carAnimation; /*名称*/ -ms-animation-duration:10s; /*持续时间*/ -ms-animation-iteration-count:infinite; /*迭代次数-无限次*/ -ms-animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ animation-name:carAnimation; /*名称*/ animation-duration:10s; /*持续时间*/ animation-iteration-count:infinite; /*迭代次数-无限次*/ animation-timing-function:linear; /*播放动画时从头到尾都以相同的速度*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -webkit-animation-name:tyreAnimation; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name:tyreAnimation; -moz-animation-duration:10s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -ms-animation-name:tyreAnimation; -ms-animation-duration:10s; -ms-animation-iteration-count:infinite; -ms-animation-timing-function:linear; animation-name:tyreAnimation; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function:linear; } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对**在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*轮胎的水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*轮胎的垂直线*/ left:60px; top:0; }

3.JQuery与CSS3 这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言） HTML代码（可以看到与CSS3中的HTML代码并无不同）：

代码如下:<html> <head> <meta charset=”UTF-8″ /> <title>Animations in HTML5 using CSS3 animations</title> </head> <body> <div id=”container”> <div id=”car”> <div id=”chassis”></div> <div id=”backtire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> <div id=”fronttire” class=”tire”> <div class=”hr”></div> <div class=”vr”></div> </div> </div> <div id=”grass”></div> </div> <footer></footer> </body> </html> CSS: <style> body { padding:0; margin:0; } #container { position:relative; width:100%; height:600px; overflow:hidden; /*这个很重要*/ } #car { position:absolute; /*汽车在容器中采用绝对***/ width:400px; height:210px; /*汽车的总高度，包括轮胎和底盘*/ z-index:1; /*让汽车在背景的上方*/ top:300px; /*距顶端的距离(y轴)*/ left:50px; /*距左侧的距离(x轴)*/ } /*车身*/ #chassis { position:absolute; width:400px; height:130px; background:#FF9900; border: 2px solid #FF6600; } /*轮胎*/ .tire { z-index:1; /*同上，轮胎也应置于背景的上方*/ position:absolute; bottom:0; border-radius:60px; /*圆半径*/ height:120px; /* 2*radius=height */ width:120px; /* 2*radius=width */ background:#0099FF; /*填充色*/ border:1px solid #3300FF; -o-transform:rotate(0deg); /*旋转(单位：度)*/ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } #fronttire { right:20px; /*设置右边的轮胎距离边缘的距离为20*/ } #backtire { left:20px; /*设置左边的轮胎距离边缘的距离为20*/ } #grass { position:absolute; /*背景绝对**在容器中*/ width:100%; height:130px; bottom:0; /*让背景色线性渐变,bottom,表示渐变的起始处，第一个颜色值是渐变的起始值，第二个颜色值是终止值 */ background:linear-grdaient(bottom,#33CC00,#66FF22); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); background:-moz-linear-gradient(bottom,#33CC00,#66FF22); background:-ms-linear-gradient(bottom,#33CC00,#66FF22); } .hr,.vr { position:absolute; background:#3300FF; } .hr { height:1px; width:100%; /*水平线*/ left:0; top:60px; } .vr { width:1px; height:100%; /*垂直线*/ left:60px; top:0; } </style>

JS代码： 第一引入在线API：

代码如下:<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

实现动画代码（相当简洁）：

代码如下:<script> $(function(){ var rot=0; var prefix=$(‘.tire’).css(‘-o-transform’)?’-o-transform’:($(‘.tire’).css(‘-ms-transform’)?’-ms-transform’:($(‘.tire’).css(‘-moz-transform’)?’-moz-transform’:($(‘.tire’).css(‘-webkit-transform’)?’-webkit-transform’:’transform’))); var origin={ /*设置我们的起始点*/ left:-400 }; var animation={ /*该动画由jQuery执行*/ left:1600 /*设置我们将移动到的最终位置*/ }; var rotate=function(){ /*该方法将被旋转的轮子调用*/ rot+=2; $(‘.tire’).css(prefix,’rotate(‘+rot+’deg)’); }; var options={ /*将要被jQuery使用的参数*/ easing:’linear’, /*指定速度，此处只是线性，即为匀速*/ duration:10000, /*指定动画持续时间*/ complete:function(){ $(‘#car’).css(origin).animate(animation,options); }, step:rotate }; options.complete(); }); </script>

网页设计什么软件好呢？

一、Dreamweaver CS6

Dreamweaver是一款功能强大的拥有可视化编辑界面的网页设计软件。该软件拥有可响应的自适应网格版面、增强型jQuery移动支持、更新的实时视图等功能，这是一款你值得拥有的网页制作软件。

二、HBuilder

HBuilder是当前最快的HTML开发工具，HBuilder强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。在HBuilder里预置了一个hello HBuilder的工程，用户敲这几十行代码后会发现，比其他开发工具至少快5倍。HBuilder的生态系统可能是最丰富的Web IDE生态系统，因为它同时兼容eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各种技术都有Eclipse插件。

三、WPS秀堂

WPS秀堂是金山WPS推出的一款非常便捷的HTML5页面制作工具，这里提供海量的H5模板及应用场景，简单的**作让你无需花多大力就能做出精美的H5页面。秀堂提供海量H5模板，用户通过简单图文替换，即可实现图文音乐的自由组合，快速生成具备丰富动画效果的在线HTML5页面，一键分享到社交网络。同时，秀堂还可以帮助用户监测传播效果，满足用户的移动传播需求。

有哪些好用的HTML5绘图工具？

HTML5无疑是当前最受宠的一项技术，每个web设计者都在热烈的讨论这种神奇的标记语言的兴起。HTML5是一种学起来毫不费力的标记语言，但它却能提供迷人的、富有艺术性的特征，帮助web设计人员完成他们的构思想象。HTML5对于一个设计人员来说能毫不费力的理解，轻松的掌握。

草绘和制图是设计工作者工作中一个重要的特征。HTML5将会这方面显露出不可**的前途。

今天，我给web设计人员收集了几款最好的HTML5绘图或涂鸦工具。这些绘图工具大多数是用HTML5画布(Canvas)实现的，部分辅以Javascript。我想，对每个web设计者来说，制图和草绘是他们工作中最喜欢的一件事情了。

1. Zwibbler

这款工具提供了各种图形的快捷方式，有点像Photoshop的工具面板。你可以从工具栏上拖着想要的图形形状，第二在画布上修改。方的，圆的，点、线等。这款神奇的HTML5绘图工具还能让你给图形配置阴影效果。拷贝，粘贴，重做，恢复等功能应有尽有。

2. 涂鸦壁

这是一款用纯HTML5实现的强大绘图工具。它的界面看起来很复杂，因为它提供了很多预设定的特殊绘图效果，比如气泡，变形文字，镂空，编织线等，非常的漂亮。如果说这不是用flash实现的，可能有很多人不相信。

3. 游丝定长仪

这是一个非常有趣的绘图工具，它不是由你来使用画笔，而是让设定绘图参数，这个工具能根据你的参数绘制有规律的数学图案，这些图案如果用手绘制可能非常的复杂，但通过自动设定的条件让它重复变换的一遍一遍的重复执行，你会得到各种很神奇的图案。你可以设定它的绘画速度——慢，中，快。设定画笔的颜色，宽度。

4. 多人画板

这是一个谷歌浏览器实验项目，你需要用谷歌浏览器才能获得最佳效果。这个工具是开源的，它使用了node.js，websocket， three.js等先进技术，这款工具的特点是它支持多人分布式绘画，互联网上不认识的几个人可以通过它共同创作一幅画。

5. Bomomo

Bomomo更像是一个涂鸦工具，娱乐性很强，用它可以画出色彩缤纷的各种奇异图案、纹饰，它提供了很多种预设的涂鸦工具。每种工具都具有动画效果，让你快乐的画出赏心悦目的美丽图案。

6. 草绘板

这款绘图工具看起来就更像是Photoshop了，它的工具栏，画笔，配色工具，历史记录都有点Photoshop的味道，当然了，只是像是没有价值的，它的确提供了很多可以替代Photoship的绘画功能，不信你就试一试。

7. Sketchy Structures

这个工具能让会绘制出复杂的由线条组成的各种结构，你可以设置线条的密度以达到不同的效果。

8. Mr. Doob’s Harmony

这个工具的画笔有点像铅笔，但有毛边，而且是不规则的细毛，在我这个不懂绘画的人来说，它更适合画抽象画。但如果放在高人的手中，我想它能创造出惊人的铅笔风格的图案。

9. 贝齐尔画笔

这是一种能非常漂亮的画出贝齐尔线条的绘制工具。你只需要点几下，拖拽几下，再加**的想象力，你就能画出如上图那样有创意的图案。

10. 绘图玩具

这是一个出色的HTML5杰作。你能用它绘制出迷人的作品时而又不失乐趣。你甚至能用它画出3D作品。

hype有windows版吗？

hype没有windows版。hype 4for mac是一款mac上的HTML5动画制作软件，不需要靠flash插件就可以知进行H5的动画制作，并且极具灵活性，hype mac破解版具有所见即所道得的特点，自动的为您创建关键帧、并且能制作各种不同的场专景，还能使用各种动作在不同的场景中转换。

原创文章，作者：小编，如若转载，请注明出处：http://www.wangguangwei.com/545.html

赞 (0)
小编小编
0
上一篇 2022年 11月 16日 pm11:06
下一篇 2022年 11月 16日 pm11:06

相关推荐