<rp id="9thzz"><acronym id="9thzz"></acronym></rp>
    1. <dd id="9thzz"></dd>
    2. 首页 > 网页教程 > 设计分享 > 动效设计: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:https://codepen.io/airnan/pen/gvBMPV

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

      △ 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浏览体验设计的思考:如何理解用户的眼?
      网页设计怎么破?创新式布局与交互的设计
      四大网页设计秘诀:让用户第一眼就爱上你的网站

      精彩推荐

      热门教程

      99热 久久99热视频只有精品 玖玖热爱视频精品 99热这里只有精品 久久re热这里只是精品