文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何实现svg动画

2024-04-02 19:55

关注

这篇文章主要为大家展示了“如何实现svg动画”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现svg动画”这篇文章吧。

  一、SVG 的 animation

  SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为:

  set

  animate

  animateColor

  animateTransform

  animateMotion

  set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。

  使用语法:

  attributeName :是要改变的元素属性名称。

  attributeType :是表明attributeName属性值的列表,支持三个固定参数 CSS/XML/auto,如x,y以及transform属于XML,opacity属于CSS。auto是浏览器自动判别的意思,也是默认值,如果你不知道该选哪个就填auto,浏览器自己判别。

  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>

  ?

  是基础的动画元素,实现单属性的过渡效果。

  使用语法:

  from :过渡效果的属性开始值。

  to:过渡效果的属性结束值。

  begin:动画开始时间。

  dur:动画过渡时间,控制动画速度。

  repeatCount:动画重复次数。

  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>

  ?

  控制颜色动画,animate也可以实现这个效果,所以该属性目前已被废弃。

  实现transform变换动画效果,与css3的transform变换类似。实现平移、旋转、缩放等效果。

  使用语法:

  repeatCount:重复次数,设置为 indefinite 表示无限循环,一直执行。

  type:添加 transform 变换类型。

  eg:绘制一个半径为200的圆,4秒之后开始缩放,在2秒内从1.5缩小到0倍。

  <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>

  可以定义动画路径,让SVG各个图形,沿着指定路径运动。

  使用语法:

  path:定义路径,使用语法与《HTML5(八)&mdash;&mdash;SVG 之 path 详解》path的d属性一致。

  begin:延迟时间。

  dur:动画执行时间。

  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 如何制作动画。

  二、JavaScript 控制

  上篇文章我们介绍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 库。

  三、Rapha?l.js (拉斐尔)

  Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形,在IE浏览器中使用VML,非IE浏览器使用SVG,类似于jquery,本质还是一个javascript库,使用简单,容易上手。

  使用之前需要先引入Raphael.js库文件。cdn的地址为:

  Rapheal有两种创建画布的方式:

  第一种:浏览器窗口上创建画布

  创建语法:

  var paper=Raphael(x,y,width,height)

  x,y是画布左上角的坐标,此时画布的位置是绝对定位,有可能会与其他html元素重叠。width、height是画布的宽高。

  第二种:在一个元素中创建画布

  创建语法:

  var paper=Raphael(element, width, height);

  element是元素节点本身或ID width、height是画布的宽度和高度。

  画布创建好之后,该对象自带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:绘制一个三角形。

  还可以绘制文字,如果需要换行,使用 \n 。

  文字语法:paper.text(x,y,text)

  (x,y)是文字坐标,text是要绘制的文字。

  图形绘制之后,我们通常会添加stroke、fill、stroke-width等让图形更美观,Raphael使用attr给图形设置属性。

  使用语法:circle.attr()

  如果只有属性名没有属性值,则是获取属性,如果有属性值,则是设置属性。

  注意:如果只设置一个属性时,可以省略&lsquo;{}&rsquo;。如: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>

  ?

  RaphaelJS一般具有以下事件:

  click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件,只要在前面加上“un”就可以了(unclick、undblclick)。

  使用语法:

  animate为指定图形添加动画并执行。

  使用语法:

  属性名和属性值就根据你想要的动画类型加就ok。

  time:动画所需时间。

  type:指动画缓动类型。常用值有:

  linear - 线性渐变

  ease-in | easeIn | < - 由慢到快

  ease-out | easeOut | > - 由快到慢

  ease-in-out | easeInOut | <> - 由慢到快再到慢

  back-in | backIn - 开始时回弹

  back-out | backOut - 结束时回弹

  elastic - 橡皮筋

  bounce - 弹跳

  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的动画库挺多了,我们介绍了拉斐尔,有兴趣的小伙伴可以自行找找其他库。

以上是“如何实现svg动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯