首页 > 网页教程 > 设计分享 > 动效设计:4 个常见且常用的 SVG 交互动画方法分享

动效设计:4 个常见且常用的 SVG 交互动画方法分享

时间:2019-10-18    来源:蛋卷直播实验室

本文介绍了 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,看完你就大致能了解到它的强大之处 。

△ Codepen:七星彩开奖时间登入

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

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

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

△ 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. 修改动画中的图片素材

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

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

在设计动画时,需要做的就是使用同一张图来作为动画中的一个图片占位符,合理规范图片层的命名即可。

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
分享淘宝购便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站

精彩推荐

热门教程

网站地图 金巴黎彩票官方网登入 金巴黎彩票怎么注册登入 金巴黎彩票违法吗登入
申博太阳城网上 申博亚洲娱乐 申博真钱对战游戏 申博娱乐真钱金花
添运app直营网 天天彩票河南快3 利记娱乐怎么玩 lhf乐豪发官网登入
澳彩网彩票游戏登入 金巴黎彩票怎么注册登入 手机东方彩票网登入 东方彩票网址登入
易博彩票游戏登入 金巴黎彩票是违法的吗登入 易博网址登入 易博网址登入
1112125.COM 758sunbet.com 292SUN.COM 898sj.com 88sbsun.com
XSB9999.COM 218sunbet.com 132psb.com XSB6666.COM 598XTD.COM
DC927.COM 378PT.COM ib63.com 888sbib.com 187sunbet.com
451xx.com 1112127.COM 968tt.com 537SUN.COM 97XTD.COM