VG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些?
SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:
1.1、set
set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。
使用语法:
<set attributeName="" attributeType="" to="" begin="" />
eg:绘制一个半径为200的圆,4秒之后,半径变为50。
<svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<set attributeName="r" attributeType="XML" to="50" begin="4s" />
</circle>
</svg>
1.2、animate
是基础的动画元素,实现单属性的过渡效果。
使用语法:
<animate
attributeName="r"
from="200" to="50"
begin="4s" dur="2s"
repeatCount="2"
></animate>
eg:绘制一个半径为200的圆,4秒之后半径在2秒内从200逐渐变为50。
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animate attributeName="r" from="200" to="50"
begin="4s" dur="2s" repeatCount="2"></animate>
</circle>
1.3、animateColor
控制颜色动画,animate也可以实现这个效果,所以该属性目前已被废弃。
1.4、animateTransform
实现transform变换动画效果,与css3的transform变换类似。实现平移、旋转、缩放等效果。
使用语法:
<animateTransform attributeName="transform" type="scale"
from="1.5" to="0"
begin="2s" dur="3s"
repeatCount="indefinite"></animateTransform>
<svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animateTransform attributeName="transform" begin="4s"
dur="2s" type="scale" from="1.5" to="0"
repeatCount="indefinite"></animateTransform>
</circle>
</svg>
1.5、animateMotion
可以定义动画路径,让SVG各个图形,沿着指定路径运动。
使用语法:
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"></animateMotion>
eg:绘制一个半径为10的圆,延迟4秒从左上角运动的右下角。
<svg width="320" height="320">
<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"
></animateMotion>
</circle>
</svg>
实际制作动画的时候,动画太单一不酷,需要同时改变多个属性时,上边的四种元素可以互相组合,同类型的动画也能组合。以上这些元素虽然能够实现动画,但是无法动态地添加事件,所以接下来我们就看看 js 如何制作动画。
上篇文章我们介绍js可以操作path,同样也可以操作SVG的内置形状元素,还可以给任意元素添加事件。
给SVG元素添加事件方法与普通元素一样,可以只用on+事件名 或者addEventListener添加。
eg:使用SVG绘制地一条线,点击线条地时候改变 x1 ,实现旋转效果。
<svg width="800" height="800" id="svg">
<line id="line" x1="100" y1="100"
x2="400" y2="300"
stroke="black" stroke-width="5"></line>
</svg>
<script>
window.onload = function(){
var line = document.getElementById("line")
line.onclick = function(){
let start = parseInt(line.getAttribute("x1")),
end=400,dis = start-end
requestAnimationFrame(next)
let count = 0;
function next(){
count++
let a = count/200,cur = Math.abs(start+ dis*a)
line.setAttribute('x1',cur)
if(count<200)requestAnimationFrame(next)
}
}
}
</script>
js制作的SVG动画,主要利用 requestAnimationFrame 来实现一帧一帧的改变。
我们上述制作的 SVG 图形、动画等,运行在低版本IE中,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素,样式中还需要添加 behavier ,经常用于绘制地图。由于使用太麻烦,所以我们借助 Raphael.js 库。
Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形,在IE浏览器中使用VML,非IE浏览器使用SVG,类似于jquery,本质还是一个javascript库,使用简单,容易上手。
使用之前需要先引入Raphael.js库文件。cdn的地址为:https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js
3.1、创建画布
Rapheal有两种创建画布的方式:
第一种:浏览器窗口上创建画布
创建语法:
var paper = Raphael(x,y,width,height)
x,y是画布左上角的坐标,此时画布的位置是绝对定位,有可能会与其他html元素重叠。width、height是画布的宽高。
第二种:在一个元素中创建画布
创建语法:
var paper = Raphael(element, width, height);
element是元素节点本身或ID width、height是画布的宽度和高度。
3.2、绘制图形
画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为:
paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径
paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径
eg:在div中绘制一个圆形,一个椭圆、一个矩形。
<div id="box"></div>
<script>
var paper = Raphael("box",300,300)
paper.circle(150,150,150)
paper.rect(0,0,300,300)
paper.ellipse(150,150,100,150)
</script>
运行结果如下:
除了简单图形之外,还可以绘制复杂图形,如三角形、心型,这时就使用path方法。
使用语法:paper.path(pathString)
pathString是由一个或多个命令组成,每个命令以字母开始,多个参数是由逗号分隔。
eg:绘制一个三角形。
let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")
还可以绘制文字,如果需要换行,使用 \n 。
文字语法:paper.text(x,y,text)
(x,y)是文字坐标,text是要绘制的文字。
3.3、设置属性
图形绘制之后,我们通常会添加stroke、fill、stroke-width等让图形更美观,Raphael使用attr给图形设置属性。
使用语法:circle.attr({"属性名","属性值","属性名","属性值",...})
如果只有属性名没有属性值,则是获取属性,如果有属性值,则是设置属性。
注意:如果只设置一个属性时,可以省略‘{}’。如:rect.attr('fill','pink')
eg:给上边的矩形添加边框和背景色。
<div id="box"></div>
<script>
var paper = Raphael("box",300,300)
let rect = paper.rect(100,100,150,200)
rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>
3.4、添加事件
RaphaelJS一般具有以下事件:
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件,只要在前面加上“un”就可以了(unclick、undblclick)。
使用语法:
obj.click(function(){
//需要操作的内容
})
3.5、添加动画
animate为指定图形添加动画并执行。
使用语法:
obj.animate({
"属性名1":属性值1,
"属性名2":属性值2,
...
},time,type)
属性名和属性值就根据你想要的动画类型加就ok。
time:动画所需时间。
type:指动画缓动类型。常用值有:
eg:点击矩形,矩形缓缓变大。
<div id="box"></div>
<script>
var paper = Raphael("box",800,500)
let rect = paper.rect(100,100,150,100)
rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
rect.attr('fill','pink')
rect.click(function(){
rect.animate({
"width":300,
"height":300
},1000,"bounce")
})
</script>
复制上边的代码,分别在各个浏览器和低版本IE浏览器运行,发现都可以正常运行。SVG的动画库挺多了,我们介绍了拉斐尔,有兴趣的小伙伴可以自行找找其他库。
代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。
现代移动操作系统将用户接口动画化,并已达到了电脑端交互的标准——精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表,使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。
接受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率——真是绝望啊!
改变
2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。
让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。
CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover CSS。
当缩略图层从开始转变到结束,图像则从一处平滑的移动到另一处,典型的表现为JavaScript DOM动作的结果。
img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }
动画属性最常用于持续运行的动画特效,它还允许自定义中间步骤的动画。
创建一个旋转的图像:
img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}
利用大量CSS属性制作动画具有无限的创造性,你可以根据意图在边框宽度内任意创建动画。 不过,大多数对动画有用的属性都是几何变换和不透明的。CSS3通过易操作的转换属性提供了全系列二维几何变换:平移、旋转、缩放和歪斜。
用旋转、缩放和歪斜创建2D转换:
webkit-transform:旋转30度
webkit-transform:缩小50%
webkit-transform:歪斜-20度,再20度
接下来变得有趣了。如果你觉得在CSS中添加3D效果,技术上是为了粗体和斜体的设计,这很愚蠢,请接着阅读。通过扩展几何转换到三维图像将是一个很自然的方式,相同变换属性还可以做平移X,Y,Z轴以及旋转X,Y,Z轴。
3D旋转图像:
webkit-transform:Y轴旋转45度
再加上点抛出动画效果,看上去就像是一个旋转的三维立方体。
如果确实这般容易的话,就不会有任何趣味性了。设计师留了一点悬念,你可以试一下,只对一个图像进行旋转,浏览器默认渲染出来的效果是不带透视性的:
webkit-transform:Y轴旋转45度
可以添加上透明属性,默认是无穷大极限值也是不带有一点透明效果的。就如同靠近镜头的对象与很远距离外的对象看上去大小一样。
为了确保图像看上去更真实,你还需要指定一个镜头与屏幕之间距离的值。加上-webkitperspective: 1000px就可以了。
要在一块平面屏幕上呈现一个3D对象,首先画出一条线连接眼镜或相机与3D物理上的点。这条线与屏幕的交集就是相应像素所在的位置。为了找到像素在屏幕上的坐标,利用泰勒斯定理,你需要空间中点的3D坐标和相机与屏幕之间的距离(f在光学中也被称为焦距)。这就是视角属性提供的距离。如果这个距离是无限远的,你可以看到所有射线(眼球到3D点线)是水平紧密状的,而且很远很远的对象在屏幕上的大小一样。
现在我们有设置一个3D立方体的所有基础了,利用六个图像以及CSS 3D转换,接下来就可以实现旋转了。
这一步很简单:我们把一个三维旋转封装到一个div,将会产生如下效果:
浏览器执行你让它所做的步骤:在div渲染一个三维立方体,然后像一张平面图片般在自身运用3D旋转。这是默认效果,虽然不是你想要的。你要告诉浏览器运用嵌套div来构成3D转换,-webkit-transform-style: preserve-3d属性。通过这个,我们就能得到想要的旋转立方体了。
很容易在空间失去定位。我的建议是采用一个div,命名为SCENE。这就是透明属性存放的位置。在内部,放置一个命名为OBJECT的div,它应当拥有transform-style: preserve-3d属性,并且该div就是你应用转换移动整个对象的地方。最后,在该div内部,使用3D转换设置你想要的正面图像,创建所需对象。在我们的例子中,立方体的六个面:
.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...
关于3D CSS转换很棒的一点是CSS动画和过渡的完美结合。我们在这留了一个练习,让旋转立方体运动起来,当鼠标光标悬停其上时,立方体自动打开来。操作方法是:把立方体的面移动到与中心一定距离的地方。第二组CSS属性有一个 :hover选择器,将立方体的面放置在更远的距离。通过运用第一种转换属性,你将看到立方体从中心盘旋打开,同时还保持旋转(演示)。
HTML与CSS都是强大的动画技术,但缺乏绘图基元。SVG能够弥补这点,并拥有其独特的动画标签。SVG动画部分被特定称为同步多媒体集成语言(SMIL)。
首先,SVG是用于矢量基元的,比如矩形、圆形和贝塞尔曲线:
<svg> <rect x="5" y="5" width="140" height="140" stroke="#000000" strokewidth="4"fill="#AAAAFF" opacity="1"/></svg>
同样可用于:
<line x1 y1 x2 y2><circle cx cy r><path d><image x y width height xlink:href>
其中一个基元,<path>标签,是SVG中最好用的。它允许你使用直线、弧和贝塞尔曲线定义任意路径。路径定义看上去想一个字母,如同Inkscape矢量图形软件生成的。对于SVG动画,你应该理解这一点。
一个二次和三次贝塞尔曲线的例子:
<svg> <path d="M 30,240 Q 170,40 260,230" stroke="#F00" /> <path d="M 30,240 C 70,90 210,150 260,230" stroke="#F00" /></svg>
语法:
M x,y 新的起点 (标记)
L x,y 到哪里的直线
Q cx, cy, x, y 二次贝塞尔曲线到 (x,y)和一个控制点
C cx,cy, dx,dy, x,y 三次贝塞尔曲线到(x, y)和两个控制点
A 椭圆弧
z 字符串最后,用于结束路径
让我们把这些矢量变得更生动化。你可以查看演示,一个家伙踏着滑板翱翔于白云间。
冲浪板上下摆动,小人的嘴巴在大和更大的笑容间交替变化,眼睛滚动,瞳孔扩张。这是SVG动画四种可能的类型。
最简单的一种SVG动画运用<animate>标签,改变一种几何形状的一个参数,在本例中,就是眼睛的半径。
要使瞳孔扩张,需要改变属性列表值中的半径值。
<circle cx="200" cy="205" r="80" > <animate dur="3s" attributeName="r" values="80; 150; 80" repeatCount="indefinite" /></circle>
方便的是变化的属性还可以成为<path>标签。允许你创建一个动画路径。 唯一的限制是两个曲线之间要进行转换,必须是同一种类型且拥有相同数量的控制点。它们必须由相同位置上的同一个字母定义,唯一不同的只能是参数的改变。当移动小人的嘴巴时,只有“微笑”和“大笑”位置被定义了。SVG动画将完成插值。
<path fill="#fff"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="m 0,0 c 1,15 -13,45 -45,45 -32,0 -44,-28 -44,-44 z; m 0,0 c -4,15 -66,106 -98,106 -32,0 3,-89 9,-105 z" /></path>
当然,SVG还能进行几何变换,也能做成动画。这里的动画标签是<animate Transform>。你必须告诉它想要将哪里的转变做成动画,还要提供一个分号分隔的所有关键位置的值列表。还可以组成动画转换,你告诉浏览器使用additive=”sum” 属性。
几何转换的动画:
<g> ... <!-- SVG primitives group --> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="translate" values="0,0; 200,-130; -100,200; 0,0" /> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="rotate" values="0; 20; -20; 0" /></g>
第三个和最后一个SVG动画标签也很有用。<animateMotion>用来引导对象沿着特定路径运动。 它有一个隐藏的技巧称为rotate=”auto”属性。它让对象不仅能够遵循指定路径,同时自身保持朝前,如同路上行驶的车辆一样。
<g> ... <!-- SVG primitives group --> <animateMotion dur=”1s"repeatCount="indefinite" path="m 0,0 a 15,11 0 1 1 -30,0 15,11 0 1 1 30,0 z" /></g>
SMIL有大量控制动画特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函数在全局性开始/停止/暂停一个动画的功能。还在所有三种动画标签(<animate>, <animateTransform>, <animateMotion>)上指定了begin与end属性。它们可以利用一个事件节点/用户事件/动画事件的强大组合。你可以指定,动画在点击之后的一秒结束或开始。
例如,下面这个SVG按钮被点击后有一个移动的阴影效果:
<g id="buttonID"> <!-- SVG button artwork here --> <animate begin="buttonID.click" dur="1s"\ .../></g>
由声明性动画转换到编程性动画技术,<canvas>标签是你的第一选择。本文所提到的所有技术中,<canvas>标签最具有跨浏览器支持,浏览器厂商做了很多努力使之兼容60fps动画,以下是设置一个画布的方法:
<canvas width="400" height="400" style = "width: 400px; height: 400px;"></canvas>
第一个尺寸(标签属性)设置了画布的分辨率,这就是你所使用的坐标空间。第二个尺寸(CSS属性)是画布出现在屏幕上的形状大小。为什么不把画布物理尺寸设置到100%分辨率,内部坐标空间不变,浏览器为任意窗口都能正确渲染图画?非常遗憾,浏览器将画布内容作为点阵图来扫描的,任何扩大范围的结果都将导致模糊混乱的像素。于是,把这两个值设置成相同的值是唯一可行的选项。
初始化画布需要JavaScript中<canvas>元素,并在其上调用getContext('2d')函数。获得的图画内容对象被用来调用到画布API。内容是状态性的,存储三种不同的状态信息:绘画风格,即时几何转换以及累计绘图路径。在画布上进行绘画的方法是发布绘图指令,不产生任何可见内容,但在内存中已创建了一个路径,然后发布一个油墨指令(ctx.stroke(), ctx.fill() 或两者皆有),就能显示出路径了。
画布动画需要设置一个动画循环,你应当基于requestAnimationFrame()函数(带有正确的前缀)。该函数使浏览器能够管理帧率,在浏览器选项卡隐藏时也能停止动画。
function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}
一般来说,画布被用于动画的时候,对象的位置必须是在逐帧的基础上才行,这是因为它们都是物理仿真的结果。观看box2dweb.js教程。仿真不断改变仿真世界中对象的位置,动画循环周期性的在屏幕上展现当前环境状态。
在画布动画中使用SVG精灵是一种很有用的技巧。一个任意复杂性的静态矢量图片在画布上呈现都是繁琐的,这样做实际上可行,虽然不如发送一个.svg到 ctx.drawImage()简单。出于模糊安全的原因,只有内联SVG支持,你必须在Blob API中使用它(代码)。
SVG精灵能够以任意比例展示其矢量美态,但遗憾的是,只支持Chrome浏览器。
WebGL暴露浏览器运行的JavaScript应用程序OpenGL API,而不需要任何插件。理论上讲,你只需要在<canvas> 元素上调用getContext(‘webgl’)(而不是之前的2d)就可以了。然而,WebGL非常大,并且API等级低。最重要的是,web版本没有默认的渲染路径,这意味着你无法给它一个形状,让它使用适合的默认值展示出来。所以你必须编写着色器,使用GLSL语言编写屏幕上出现的任何内容。
幸运的是我们有Three.js帮助。Three最初是由Mr.doob开发的库,用于一些Chrome演示(www.ro.me/www.chaostoperfection.com),但它是相对独立的。它拥有所有的基础,以及内置独特的着色器,你就可以专注于其他有用的方面:相机、灯光、行动。
首先要做的是编写Three粘合代码(很简单):
var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);
在lights和action之前,需创建camera和位置:
// arguments: FOV,viewAspectRatio, zNear, zFarvar camera = new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z = 300;
然后是light:
var light = new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction
我们试着呈现一个立方体吧,3D对象在Three中被称为网络,都由一个几何体和一个材料构成。
我们使用一个简单的结构:
var texture = THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );
最后添加内容,称为渲染函数。
var scene = new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);
这将为我们的立方体产生一个静态图像,为了让它动起来,我们包裹渲染召集一个动画循环,改变立方体在每一帧的位置。
function runAnimation(t){ // animate your objects depending on time cube.rotation.y = t/1000; cube.position.x = ... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}
推荐使用三维建模软件例如Sketchup。Three识别几类3D模型结构,包括COLLADA(.dae)具有广泛行业支撑。下面是如何在Three中加载一个模型:
var loader = new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model = collada.scene; model.position = ...; // x, y, z model.rotation = ...; // x, y, z scene.add(model);} );
再做一些努力,更换机器人外观花式,Three提供兰伯特和冯氏照明风格,法线贴图,凹凸贴图,环境映射以及更多。
还可以使机器人运动起来,具体步骤参考教程。
原文链接:http://www.gbtags.com/gb/share/2124.htm
网页设计过程中,我们会经常用到一些HTML5特效代码,下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码,可以放心在您的应用程序中使用。
一、Canvas跟随鼠标光标动画特效
演示、下载地址:http://www.php.cn/xiazai/js/845
二、HTML5 Canvas泡泡悬浮鼠标特效
演示、下载地址:http://www.php.cn/xiazai/js/1599
三、HTML5卡通可爱风格网页找不到404错误页面网页模板
演示、下载地址:http://www.php.cn/xiazai/js/2987
四、HTML5-Canvas线条背景动画
演示、下载地址:http://www.php.cn/xiazai/js/2930
五、HTML5-Canvas线条背景动画
演示、下载地址:http://www.php.cn/xiazai/js/2919
六、HTML5-Canvas五彩纸屑飘落动画特效
演示、下载地址:http://www.php.cn/xiazai/js/2917
更多炫酷html5、javascript特效代码,尽在:js特效大全
以上就是html5精选特效代码分享(收藏)的详细内容,更多请关注其它相关文章!
更多技巧请《转发 + 关注》哦!
*请认真填写需求信息,我们会在24小时内与您取得联系。