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

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

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

2. 修改文字内容

修改动画中的文字内容的方法,在不同的情况下需要选择不同的交互方法。首先当修改的文字层没有添加文字 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. 修改动画配色

虽然我们可以通过 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

 

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

精彩推荐

热门教程