分类: 技术

单页视图引擎(SPA)添加视图切换动画

1. 背景

9月的时候,为单页试图引擎 Cyra 2.1.0 版本增加了一个创建视图切换动画的功能,使得 i 版页面之间切换也可以有一个滑入滑出的效果。一直没有时间做一个梳理,现在记录一下。最终的效果如图:

Cyra Animation

补充:悲剧,刚修复了一个 bug,如果想要设置ANIMATION_FUNC,则需要升级到v2.1.4

2. 思路

其实思路比较简单,就是在 Router 中控制。首先,将所有视图容器position都设置为absolute。当切入视图完全渲染出来后(也就是执行完willAppear钩子函数),设置当前展示视图和即将展示的视图两者的 animation CSS 属性,在 animation 中修改视图容器的translateX来实现动画效果。

因为每个视图容器是单例的(Mix 页除外),当项目中出现循环路径,如:

View A -> View B -> View C -> View A

或者当 A 和 C 是同一个视图,只是数据不同。这种情况下,如果视图右滑,也就是用户主动通过点击“返回”按钮进入(返回)前一个视图时,当前视图向右滑出。如果滑出后不修改它的样式,就还要记录每个视图容器当前位置。

鉴于上面的原因,考虑只保留两个位置:

  1. 屏幕内位置:展示当前视图;
  2. 屏幕外左侧位置:用来存放除当前视图外的所有视图。

这样,所有动画抽象为4个类型,对应的 animation @keyframes 分别为:

  1. left-move-in:视图从屏幕左侧滑入屏幕;
  2. left-move-out:视图从屏幕内滑出到屏幕左侧;
  3. right-move-in:视图从屏幕右侧滑入屏幕;
  4. right-move-out:视图从屏幕内滑出到屏幕右侧。

注意:因为所有非当前视图都需要堆叠在屏幕外左侧,所以对于right-move-out需要特殊处理,即在动画执行到 99% 时就要将视图完全滑出到屏幕外,最后再将视图移动到屏幕外左侧。为了增强效果,还可以同时为4个动画还设置opacity。四个动画对应的 CSS 如下:

以上样式需要业务手动添加到自己的项目代码中。然后,在下一个视图执行willAppear之后,根据用户是点击“返回”按钮进入新页面还是通过switchRoute执行跳转进入新页面,判断当前视图和新视图即将移动的方向direction并设置对应的动画,最后的 CSS 设置为:

其中ANIMATION_PREFIX用来为上述4个 keyframes 加前缀避免混淆,SWITCH_DURATION设置动画时间,ANIMATION_FUNC设置 timing function。它们都可以通过传入参数进行配置。最后添加一个开关用来打开或关闭动画效果。

3. 总结计划

其实,还有两个功能可以后续优化:

  1. 视图切换不一定只能左右滑动,也就是不局限在修改translateX属性,可以通过参数进行配置;
  2. 多测试一些不同机型,尤其是一些 Android 机器,可能无法流畅展示动画,由框架进行判断自动针对这部分机型做降级。

这就是此次实现视图切换动画的全部思路和实现,Cyra 2.1.0 开始支持。

注:转载注明出处并联系作者,本文链接:https://nodefe.com/single-page-app-engine-animation/

发表评论

评论

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax