内容简介:动画能够给平淡的交互增彩不少,利用好动画,能够设计出很棒的交互,增强产品体验。我们常常会为一些炫酷的效果而惊叹,这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外,交互和体验也是一个很重要的方向,但这却被很多前端所忽视,国内的产品交互大多也比较平淡无奇,可能是考虑到迭代速度,可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。说实话我很少接触到一些复杂的交互效果的需求,可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求,花了一天多的时间
动画能够给平淡的交互增彩不少,利用好动画,能够设计出很棒的交互,增强产品体验。我们常常会为一些炫酷的效果而惊叹,这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外,交互和体验也是一个很重要的方向,但这却被很多前端所忽视,国内的产品交互大多也比较平淡无奇,可能是考虑到迭代速度,可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。
说实话我很少接触到一些复杂的交互效果的需求,可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求,花了一天多的时间基本实现,过程中收获很多,让我对交互动画有了更深的认识。
触发式动画和伴随式动画
动画分为触发式动画和伴随式动画,触发式动画是指当用户触发之后,动画就从开始一直运行到结束,不需要再次交互,比如基于css3的animation实现的各种动画。而伴随式动画是随着用户的交互过程而逐步进行,用户可以控制动画的过程,比如滚动视差动画。伴随式动画因为用户可以控制动画的过程,交互性和体验更强,当然难度也会更大一些。
复杂伴随式动画的分析
复杂的动画都是有很多变化的,到了某个值或者百分之多少换成另一种效果。就像滚动视差动画,滚动的不同方向,滚动的不同位置会有不同的动画效果。
从设计图开始,通过样式和模版组合各种资源形成静态的页面,之后的动画和业务逻辑都是对这些模版、样式、资源的处理。动画其实就是某一些样式从某个值变化到某个值的过程,当然这里指的是属性动画。
分析一个复杂的伴随式动画,首先要找出主要变化的是什么属性,然后这个属性变化有哪些阶段,每个阶段有哪些属性值变化,是以怎么样的规律变化的。也就是“阶段”、“属性”、“变化规律”这3个要点。
伴随式动画实例分析
比如这个动画,阶段分为向上和向下两个阶段。向上阶段变化的属性是蒙层的透明度和图片的位置,蒙层透明度变化规律是从0到1匀速变化,图片位置的变化规律是scrollTop变化值的一半。向下的阶段变化的属性是图片的高度,变化的规律是初始高度加scrollTop的绝对值。
我最近做的那个动画比这个例子更复杂一些,向上的阶段又细分成了2个小阶段,第一个阶段是不变的,到第二个阶段才开始变。
这里变化的属性中有图片的位置和显示范围,比如向上的过程中图片位置上移,向下的过程中显示范围变大。这种效果通过图片标签做起来比较麻烦:位置的改变还可以通过改变图片标签的位置来实现,但是显示范围的变化却需要开始隐藏部分显示部分,然后交互的时候通过改变位置来显示全部,比较麻烦。如果通过背景图片来实现会简单很多:位置的变化直接修改background-position,不需要修改元素位置所以也不会触发reflow;显示范围的变化可以通过修改元素高度,不需要考虑隐藏和位置的变化。
划分清楚有几个大小阶段,每个阶段有哪些属性值变化,每个属性值变化的规律是什么之后实现就变得简单了。
小程序实现伴随式动画的坑
在h5中实现了比较满意的效果,但放到小程序中发现有很大问题。因为小程序是把渲染和逻辑分来处理的,两者需要异步的传消息来通信,随着滚动,逻辑进程计算出很多新的属性值,通过setData异步批量的传给渲染进程,在高端机中几乎是同步的实时地,但在一些性能较差的手机中能明显感觉出这种异步来,现象是我滚动完了一段时间之后,相关的元素的位置和其他属性才开始变化,慢很多拍。
小程序这种逻辑和渲染分开然后异步通信的方式是独一份,所以这样的坑我也是第一次遇见,目前在想解决的方式,估计要改变交互效果的方案了。
总结
合理的设计一些动画能增强产品的体验。动画分为触发式动画和伴随式动画,分析伴随式动画需要先划分出有哪几个阶段,然后每个阶段有哪些属性值变化,变化规律是什么。如果涉及到图片位置和显示范围的变化,用背景图片实现会简单很多。另外,小程序的渲染和逻辑分离的特殊性,会导致低端机下伴随式动画的和交互行为的不同步,需要特别注意。
以上所述就是小编给大家介绍的《网页中复杂伴随式动画的分析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 对2个网页帧动画框架的调研
- 如何在网页中做出炫酷的动画(使用Spine)
- 防止网页被其他网页iframe嵌套的思考与实现
- 响应式网页设计–css设置网页字体大小自适应
- R网页采集:解决网页分页与网址超链接问题
- 网页制作用什么软件?制作网页的常用软件工具分享
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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 代码
RGB HSV 转换
RGB HSV 互转工具