网页中复杂伴随式动画的分析

栏目: Html · 发布时间: 5年前

内容简介:动画能够给平淡的交互增彩不少,利用好动画,能够设计出很棒的交互,增强产品体验。我们常常会为一些炫酷的效果而惊叹,这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外,交互和体验也是一个很重要的方向,但这却被很多前端所忽视,国内的产品交互大多也比较平淡无奇,可能是考虑到迭代速度,可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。说实话我很少接触到一些复杂的交互效果的需求,可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求,花了一天多的时间

动画能够给平淡的交互增彩不少,利用好动画,能够设计出很棒的交互,增强产品体验。我们常常会为一些炫酷的效果而惊叹,这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外,交互和体验也是一个很重要的方向,但这却被很多前端所忽视,国内的产品交互大多也比较平淡无奇,可能是考虑到迭代速度,可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。

说实话我很少接触到一些复杂的交互效果的需求,可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求,花了一天多的时间基本实现,过程中收获很多,让我对交互动画有了更深的认识。

触发式动画和伴随式动画

动画分为触发式动画和伴随式动画,触发式动画是指当用户触发之后,动画就从开始一直运行到结束,不需要再次交互,比如基于css3的animation实现的各种动画。而伴随式动画是随着用户的交互过程而逐步进行,用户可以控制动画的过程,比如滚动视差动画。伴随式动画因为用户可以控制动画的过程,交互性和体验更强,当然难度也会更大一些。

复杂伴随式动画的分析

复杂的动画都是有很多变化的,到了某个值或者百分之多少换成另一种效果。就像滚动视差动画,滚动的不同方向,滚动的不同位置会有不同的动画效果。

从设计图开始,通过样式和模版组合各种资源形成静态的页面,之后的动画和业务逻辑都是对这些模版、样式、资源的处理。动画其实就是某一些样式从某个值变化到某个值的过程,当然这里指的是属性动画。

分析一个复杂的伴随式动画,首先要找出主要变化的是什么属性,然后这个属性变化有哪些阶段,每个阶段有哪些属性值变化,是以怎么样的规律变化的。也就是“阶段”、“属性”、“变化规律”这3个要点。

伴随式动画实例分析

网页中复杂伴随式动画的分析

比如这个动画,阶段分为向上和向下两个阶段。向上阶段变化的属性是蒙层的透明度和图片的位置,蒙层透明度变化规律是从0到1匀速变化,图片位置的变化规律是scrollTop变化值的一半。向下的阶段变化的属性是图片的高度,变化的规律是初始高度加scrollTop的绝对值。

我最近做的那个动画比这个例子更复杂一些,向上的阶段又细分成了2个小阶段,第一个阶段是不变的,到第二个阶段才开始变。

这里变化的属性中有图片的位置和显示范围,比如向上的过程中图片位置上移,向下的过程中显示范围变大。这种效果通过图片标签做起来比较麻烦:位置的改变还可以通过改变图片标签的位置来实现,但是显示范围的变化却需要开始隐藏部分显示部分,然后交互的时候通过改变位置来显示全部,比较麻烦。如果通过背景图片来实现会简单很多:位置的变化直接修改background-position,不需要修改元素位置所以也不会触发reflow;显示范围的变化可以通过修改元素高度,不需要考虑隐藏和位置的变化。

划分清楚有几个大小阶段,每个阶段有哪些属性值变化,每个属性值变化的规律是什么之后实现就变得简单了。

小程序实现伴随式动画的坑

在h5中实现了比较满意的效果,但放到小程序中发现有很大问题。因为小程序是把渲染和逻辑分来处理的,两者需要异步的传消息来通信,随着滚动,逻辑进程计算出很多新的属性值,通过setData异步批量的传给渲染进程,在高端机中几乎是同步的实时地,但在一些性能较差的手机中能明显感觉出这种异步来,现象是我滚动完了一段时间之后,相关的元素的位置和其他属性才开始变化,慢很多拍。

小程序这种逻辑和渲染分开然后异步通信的方式是独一份,所以这样的坑我也是第一次遇见,目前在想解决的方式,估计要改变交互效果的方案了。

总结

合理的设计一些动画能增强产品的体验。动画分为触发式动画和伴随式动画,分析伴随式动画需要先划分出有哪几个阶段,然后每个阶段有哪些属性值变化,变化规律是什么。如果涉及到图片位置和显示范围的变化,用背景图片实现会简单很多。另外,小程序的渲染和逻辑分离的特殊性,会导致低端机下伴随式动画的和交互行为的不同步,需要特别注意。


以上所述就是小编给大家介绍的《网页中复杂伴随式动画的分析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

xHTML+CSS+Dreamweaver CS3标准网站构建实例详解

xHTML+CSS+Dreamweaver CS3标准网站构建实例详解

李晓斌 / 第1版 (2007年9月1日) / 2007-9 / 49.9

《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》特别适合网站美工、网站前端架构师、网页设计爱好者、Wap页面设计师作为学习Web标准网页制作的入门图书,也适合Web标准网站高手作为案头随手查询手册,也适合作为美术院校和培训学校相关专业的培训教材。一起来看看 《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具