分享SVG 交互动画方法的实操案例

_o0峳峳0o_ 2023-03-20 13:29

• 

  ②ing

  2023-03-20 14:01

  svg的几个小案例最近经常用到svg，闲的无聊的时候做了几个简单的小例子，希望能帮到大家，svg会用了之后做动画和图片都方便了好多，接下来就看看小例子吧！！1、例子一

  css代码html, body { width: 100%; height: 100%;}body { background: #131518;}#patt1 path { stroke: #ff509e;}#patt2 path { stroke: #95d13c;}#patt3 path { stroke: #00b6cb;}#patt4 path { stroke: #9753e1;}#mask1 rect { -webkit-animation: pulse 1.90476s infinite; animation: pulse 1.90476s infinite; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#mask2 rect { x: 10; -webkit-animation: pulse 1.90476s infinite 0.47619s; animation: pulse 1.90476s infinite 0.47619s; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#squiggle1, #squiggle2, #squiggle3, #squiggle4 { background-blend-mode: multiply;}@-webkit-keyframes pulse { 0% {x: 10; } 50% {x: -20; } 100% {x: -50; }}@keyframes pulse { 0% {x: 10; } 50% {x: -20; } 100% {x: -50; }}html代码例子二

  css代码.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}.st1{fill:#7100BF;stroke:#000000;stroke-miterlimit:10;}.box{width: 600px;height: 600px;}html代码

  例子三

  css代码.st0{fill:#09E900;}.st1{fill:#9C55FF;}.st2{fill:#FF2A56;}.st3{fill:#FFFE6A;}.st4{fill:#2AFFF5;}#logo.animate #g1 path{animation:2s dong;}#logo.animate #g1 path#h{animation-delay:0.3s;}#logo.animate #g1 path#i{animation-delay:0.6s;}#logo.animate #g1 path#t{animation-delay:0.9s;}#logo.animate #g1 path#u{animation-delay:1.2s;}@keyframes dong{from{transform:scale(1.0);}to{transform:scale(1.1);}}html代码

  js代码var btn = document.querySelector("#btn");var logo = document.querySelector("#logo");var paths = document.querySelectorAll("#g1 path");btn.addEventListener("click", function(){logo.classList.toggle("animate");});var count = 0;for (var i = 0, l = paths.length; i < l;i++) {paths[i].addEventListener("webkitAnimationEnd",function(){count++;if(count>5){logo.classList.toggle("animate");count = 0;}})};

  SVG有什么优势？

  文件体积小，能够被大量的压缩图片可无限放大而不失真(矢量图的基本特征)在视网膜显示屏上效果极佳能够实现互动和滤镜效果

  1. 修改动画中的图片素材

  在设计动画时，需要做的就是使用同一张图来作为动画中的一个图片占位符，合理规范图片层的命名即可。因为Lottie_api 中并没有替换图片素材的方法，所以我们需要使用的是直接修改渲染完的动画中的URL。当SVG动画中有位图元素时，导出动画后会在 data.json 的同级目录下生成一个 images 文件夹，里面就放置了使用的位图。这个就是基本操作，例如青藤小编将需要交互的图片名字命名为sample.jpg，放入动画中后，将图层的名字重命名为「.GiverMark」。当我需要更改这个动画中图片的信息时，我只需要通过 JS 去找到Class=“GiverMark”，然后修改图片的URL就行了。默认情况下，被更新的图片会自动填充满这个容器的宽高。具体的参考代码如下：

  $(‘.GiverMark image’).attr(‘href’,’www.test.com/test.jpg’);

  2. 修改文字内容

  修改动画中的文字内容的方法，我们需要根据具体情况分析，在不同的情况下需要选择不同的交互方法。首先当修改的文字层没有添加文字Animate或者动画中其他部分与之没有任何关联时，修改的方法同图片修改URL，我们只需要给文字图层一个规范的命名即可。这样前端程序就能通过 JS 去更改文字层的内容，参考代码如下：

  $(‘.FeedBackMark text tspan').html(‘测试文字’);

  3. 修改图层的任一属性

  因为 json 文件中保存了所有 AE 中图层的属性和值，所以我们同样可以使用 getKeyPath 方法来定向修改图层中的某一属性，例如可以改变位置，更改缩放大小，更改填充颜***等等。这里要注意的是 AE 中的动画属性的值大多是以数组来保存的，所以我们传递参数的时候要根据该属性的值的类型，来传递修改后的值。另外，修改颜***时我们传递的颜******值必须是 rgba 格式，且需要对颜***进行换算。

  4. 修改动画配***

  虽然我们可以通过 lottie_api 来逐一修改图层的颜***，但是当我想要更改整个动画的配***时，显然这样的方法不合理。这里有一个更科学的方法，那就是在合成中添一个 null 图层，然后为其添加 color control 效果，再把动画的图层中的颜***，通过拉索工具连接到这个 null 颜***控制中。这样前端只需要通过一行代码就可以访问，并改变 color ctrl 图层中的颜***，重渲染时与之有关的动画中的配***即会全部改变。

  总之，作为交互动画的设计师，只用前端程序对接动画，这样最终我们才能做到动画和交互逻辑的完美落地。当然，想要了解更多交互设计相关资讯，请关注我们，下期咱们不见不散哦!
  0 讨论(0)
  发布评论:

  提交评论

  ---

  •  加载中...