SVG.js动画系列5-显示/隐藏动画

最新推荐文章于 2024-04-12 16:19:09 发布

三零

最新推荐文章于 2024-04-12 16:19:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： animation SVG.js 文章标签： svg animation

本文链接：https://blog.youkuaiyun.com/wangchangjiang1984/article/details/109633565

本文介绍了如何使用SVG.js库创建一个图元串行显示和隐藏的动画效果，重点关注delay和wait属性的使用，通过调整这两个属性实现不同图元（矩形、三角形、圆形）在特定时间显示和隐藏，提供了详细的demo源码链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来实现图元显示和隐藏的动画。效果图如下：

我们要让矩形、三角形、圆形做一个串行显示的动画；看看用SVG.js是怎么实现的吧。

  var draw = SVG().addTo('body').size(800, 600)

  var circle, rect, triangle;
  function make() {
   
   
    rect = draw.rect(100,100).move(200, 200).attr({
   
   fill: SVG.Color.random(), stroke:'#3c352d'}).css("display", 'none')
    circle = draw.circle(100,100).move