赞助商
立即赞助

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

UI设计3年前 (2021)更新 流光
12.5K 0 0

文介绍 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互画的原和简单方法。

优秀交互和舒适合理动画,是 UX 设计师孜孜不倦追求目标。 UX 设计师天都遇到能做出效,和程序交接、案落地时却困难情况。要么是程序觉这么多动画会很卡,要么认为 UX 案花里胡哨根本做不出来。在 Behance 或者 Dribbble 上看到优秀交互设计稿,友都会戏称程序员说:「来来来,键盘给你好,你来写。」从这些戏言中难看 UX 和程序落地实没有很好的技术沟通桥梁。

目前,SVG 动画案已可以解决部分 UX 设计师和程序交接落地问题,是这些动画出现场景往往是图标、引导页等,到核心程序交互是靠程序员去写交互逻辑动画。其原是可交互 SVG 动画案尚不普及,国内都没有很好公开资料。所以这来和大家分享下,我已经掌握可交互 SVG 动画可案。

由 lottie 的方案相比 SVG 有更的自由度,在互面是完胜的。所以次我将以 lottie 为方案背,来分享互 SVG 动画的原理和案例。由我们团目前主要是帮主播定直播礼物特效和直播 UI,所以我希望在能减少设计工量的同时,为礼物动效增加互,从而让礼物特效变得更变,更加有意思。下面我们进正题,首先来下,什么是互的 SVG 动画?

什么是可交互的SVG动画

之前的案例我们做的是固定不变的动画,假我希望动画内容是个化的信息填充,样我们就需要让 SVG 动画变成框架动画,动画的内容由台给出填充动画,最呈现给使用者。最简单的例子就是产品的轮播图。假,我希望动画的播放进程是根据页面滚动来触播放,同时动画和页面的高度百分比同步进度。想法的落地就需要为 SVG 动画插上互的翅膀,让它能够提高用户验。

我们先看 3 由 lottie-web 的发者 hernan,制作的一些可交互 SVG 动画 demo,看完就致能了解到它的强之处 。

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

△ Codepen:https://codepen.io/airnan/pen/gvBMPV

变色会根据鼠标指向的叶片颜色来改变身体的颜色,当鼠标移动叶片中间,鼠标指针会被吃掉。

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

△ Codepen:https://codepen.io/airnan/pen/bmvegP

机器人会根据控制面的一些属性,来变换走路或者跑步的姿态,中画的 rigging 使的是 Duik。

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

△ Codepen:https://codepen.io/airnan/pen/rvQrKL

动画会根据输入内容和鼠标击来完成分阶段动画。

由三个例子的互方法是比复,其中涉及到种互方法的叉应用,所以我认为并不适合用三个例子做初步技术分享。一篇我以更加浅显的案例,来分享互动画技术。

访问并修改动画的可行方案

在使用 AE 完动画,并使用 Bodymovin 导出动画,我们获得一个 data.json 文件。个文件包含 AE 中关动画的所有属和对应的值,当前端加载动画时,就读取 json 文件中的数据并时计重绘动画。

根据这流程,如果我临时改动画的某一属性,那么可操作的方案致三种:

  • 一种是直接访问请求到的 json 文件中的键并修改它的值,修改完渲染播放动画。
  • 第二种使用 lottie_api.js(https://github.com/bodymovin/lottie-api)访问修改 json 文件中的内,修改完后再重新渲染动画。
  • 第三种是直通过 JS 去更改网页中 DOM 素的内容。

第一方案可以对动画的所的行修改,可调整的自由度非常,但缺点也很明显,那就端程序必须十分熟悉导出的 json文件的数据结构,同时这样的交互方案很难速抽象通用的方法,从导致几乎每动画都写不同的 JS 达到动画交互的目的。

第二个方案其实就是 lottie 的开发者基于第一个方案写的一个现成的 JS 库,使用难度和学习成本较低。程序只需要使用这些 API 的方法,就能写出符大多数业交互的方法函数。相较之前第二个方案的缺点也显,那就是目前 API 的公开方法并不是多,且只适用于 web 端,安卓和苹果等并不能直使用这个 JS 库(据所知)。另外有一些较为复杂的交互还是需要第一种方案结来完成。

第个方案简单快捷但是只成极分的交互效果,较的案例是替换画中的图片素材,具体的方法会再介绍。

在 Lottie_api  github 网站上,有开发者写简单案例代码和法,所以这里不纯搬运展开了。过 Lottie_api 去改动画文件某属性时,需要它传递这个属性在动画绝位。例如想要改合成3形状2填充颜色,那么我们需要将(‘Comp 3,shape 2,Contents, Rectangle 1 ,Fill 1,Color’)这个作为参数传递到函数,以让函数去定位动画文件这个属性。由此设计师在将动画文件交付程序时,需要将合成层级逻辑图或者接将这个参数写出来起交付。绝大部分有使用到 SVG 动画商用项目,含动画肯定不止两个,为了减轻前端开发交互工作量,议在制作动画时于要改相类予以相名称,这样普遍交互法可以再抽象为个函数。比如需要改文内容图层名称命名为「.FeedbackMark」,在图层名前加「.」会让动画在网页加载时生成个标签[class=“FeedbackMark”],前端能过这个属性来筛选并改内容。另,图层名称前加「#」会让动画在生成时添加个[id=“FeedbackMark”], id 在网页端是唯,多个动画都用相 id 会导致网页报,法正常加载动画。

综上,为 UX 设计师在互动画时,首要任务就是正确的统一命名图,给续的程序互奠定一个良的基石。下面来看看际的例子。

实操案例

1. 改动画图片素材

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

由于 Lottie_api 中并没有替换图片素材的方法,这里使的是直接修改渲染的画中的 URL。当 SVG 画中有位图元素时,导画后会在 data.json 的同级目录生成一个 images 件夹,里面就放置了使的位图。如这里我就将需要交互的图片名字命名为 sample.jpg,放入画中后,将图层的名字重命名为「.GiverMark」。当我需要更改这个画中图片的信息时,我只需要通过 JS 到Class=“GiverMark”,然后修改图片的 URL 就行了。默认情况,被更的图片会自填充满这个容器的宽。 参考代码如:

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

在设计动画时,需要做的就是使用同一图来为动画中的一个图占位符,合理规范图的命名即。

2. 修改文字内容

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

改动画文内容法,在不情况下需要选择不交互法。首先改文层没有添加文 Animate,或者动画其他部分与没有任何关联时,改法图片改 URL,我们需要文图层个规范命名即可。这样前端程序能过 JS 去更改文层内容,参考代码如下:

 $(‘.FeedBackMark text tspan').html(‘卷直播验室测试文字’);

当动画中对文字添加了 mask 动画,或者其他元素于文字层的属性了表达式的关联,那么就需使用到 lottie_api 完修改,以让动画常的作。例如:文字随 mask 径下起伏的运动,这动画实际网页中将每字符独立渲染,所以简单的 JS 就不能到改内,同时让新的文字动画常作。原因就于面的方法只修改网页中已加载的内,使用 lottie_api 则修改动画内并重新算渲染。参考码如下:

var animapi=lottie_api.createAnimationApi(anim);//anim为默认动画的程序名字
var animkp=animapi.getKeyPath(‘.FeedBackMark’’);
animkp.getElements()[0].setText(‘这是新的文字内容’,0);

3. 修改图层的任一属性

因为 json 文件中保存了所有 AE 中图层的属性和值,所以同可以使用 getKeyPath 方法来定向修改图层中的某一属性,例如可以改变位置,更改缩放大,更改填充颜色等等。这还是以上面的更改文字动画为例,这次来更改动画的位置,参考代码如下:

var  animapi=lottie_api.createAnimationApi(anim);//anim为默认画的程序名字     
var  animkp=animapi.getKeyPath('.FeedBackMark,Transform,Position');
animapi.addValueCallback(animkp,[0,0]);

这里要注意是 AE 动画属性值大多是以数组来保存,所以我们传递参数时候要根据该属性值类型,来传递改后值。另,改颜色时我们传递颜色色值必须是 rgba 格,需要颜色进换算,例如 #333333  RGB 值为(50,50,50),那么传递参数时 rgba(50/255,50/255,50/255,255/255)。

4. 改动画配色

让动效更酷炫!4 个常见且常用的 SVG 交互动画方法

虽然我们可通过 lottie_api 来逐一修改图层的颜色,但是当我想要更改整个画的配色时,显然这样的方法合。更科的方法是在合成中添一个 null 图层,然后为添 color control 效果,再把画的图层中的颜色,通过拉索工具连接到这个 null 颜色控制中。这样前端只需要通过一行代码就可访问,并改变 color ctrl 图层中的颜色,重渲染时与之有的画中的配色即会全改变。参考代码如:

var  animapi=lottie_api.createAnimationApi(anim);//anim为默认动画程序名
var animkp=animapi.getKeyPath('color ctrl,Effects,C1,0');
animapi.addValueCallback(animkp, function(){  return [0.1,0.2,0.3,1]});

当我们需要更改 Effects 中的值时,最的一个参数值是属的索引值。与直接访问属有点不同。

总结一下,作 UX 设师制作交互动画时,需的事就根据团队的命规则,去规范命需交互修改的图层。其次就与程序交接时,提供给他对应动画的交互属性绝对置信息,同时,我们可以将可变信息的交互逻辑通过表达式写动画中。这样端程序只需对接动画即可,终到动画交互逻辑的完落。

附源文件下载:https://pan.baidu.com/s/13bU7CelVG7_bkrsuAjBmZA

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

写这篇文章的起因是前段时间在 Meidum 上读到的一篇驳斥 Dribbble 发展现状的文章。文章发表在 16 年,其中提到:「我不认为 ...
AE动效
在设计中,一些异常情况经常很容易被忽略,在后期的实践过程才发现原来还有这种状态……本篇文章汇总了常见的异常情况及处理方...
交互设计
网易 UEDC  – 崇书庆 :经常被人问起「如何入门交互设计」,也做过很多次解答,今天便系统地和大家聊聊。 提示:这篇文章会...
交互设计
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计
随着用户体验被愈发的重视,更多的 App 偏向于使用多手势优化用户的操作流程,降低使用阻力。点击某个确定的按钮的手势操作虽...
交互设计
《设计师如何自我评价和规划?KASH能力图谱来帮你》系列又和大家见面了,本期分享的是我对「交互设计」的理解,以及简单说说...
交互设计
缘起 最近组内设计评审,视频和小说两个业务都涉及到在图片上显示标签(Tag)的设计,但是Tag的样式和位置却不完全不同,如下...
ui设计
声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作...
AlibabaDesign