小程序的体验，其实是要和端的体验追齐的，但是发现我目前做的小程序不够好，所以打算逐步提升使用体验，一些场景下要「加入过度效果」，以免太死板。经常听人说，BD小程序的体验相比 WX 的差很多，作为一名 BD 的开发者感到非常愧疚，所以打算提升我所做过的小程序体验。

我给提升体验总结了三把斧，第一把，极致的用户交互体验；第二把：性能问题；第三把：业务，比如不得已的情况下加广告。所以说提升体验是整个团队，甚至是整个公司的事情。

小程序中的动画效果可以通过 CSS 和框架本身提供的 API 来实现，甚至可以使用 JS 来实现，考虑到做前端动画是我目前的弱项，不过由于有以前做动画的经验，学习起来不算吃力。最近打算开一个前端动效专题，系统学一遍前端和小程序中的动画效果。

第一篇热个身，看看如何做一个从底部向上弹出的效果，并加上 mask 层，效果如图：

小程序官方文档关于动画的描述「真是言简意赅，看的我都想哭了」。

做动画效果时关键点是拆分，然后逐步实现，如果不好拆分可以录一个已有动画效果的视频，然后逐帧播放，你就会看到一个动画的完整流程。比如上面这个动画主要分两步：

第一步：弹窗从底部缓慢滑出；

第二步：灰色的蒙层逐渐出现；

思路有了以后，就是找一找有哪些API可以使用，也就是找到做动画的工具，可直接使用 CSS 或者小程序框架提供的能力。

小程序框架提供了一个 swan.createAnimation API，用来创建一个动画实例。代码如下：

创建动画实例时，有下面几个参数：

transformOrigin：这个知识量比较大，后面来说；

duration：动画持续的时间；

timingFunction：动画在进行时按照什么样的规则进行，比如把一个 view 从底部逐渐弹出需要修改 Y 轴的值，假如从 0 - 100，这个数字该如何变化呢，由这个参数来决定；

delay：需要延迟多长时间执行；

然后把这个动画实例交给一个 view，指明要把动画应用到那个元素上。

今天的例子，需要把红色的区域从底部向上逐渐弹出，它的起始位置应该是在最底部，不在可视区域，CSS 如下：

当弹出时需要修改 Y 值和它的透明度：

背景蒙层有两个动作「出现和透明度」，CSS 定义如下，填满整个区域，层级低于红色弹窗，透明度为 0，设置修改透明度时需要有过度效果（transition）第16天：领导说，体验差：

模板定义如下，可以修改高度和透明度：

动画效果非常简单：

至此我们整个动画效果就完成了，当触发按钮时调用：

动画效果的 demo 我上传到了：

https://github.com/lefex/FE/tree/master/animation/day1-sheet。

大家加油！

---

推荐阅读：

网易云音乐背景高斯模糊探索

10x 程序员 · 提高 shell 的使用效率