淘宝代码生成(淘宝代码生成动效分解？)

魁首哥

作者

imgcook 是阿里巴巴旗下的软件即服务产品。它可以通过智能化技术把不同种类的视觉稿(Sketch/PSD/静态图片)一键生成前端代码。一般来说，使用 imgcook 都是用来做一些静态的模块，但随着我们淘宝设计向沉浸式迈入，对于 imgcook 来说就不得不进行一些动效的开发。

动效分解

比如氛围滚动、比如 Feeds 商品的动效切换，比如最近我就在一个模块里开发了一个动效如下：

首先来分解动画，

将原商品图以左上角为基准缩小，同时将状态一的其他部分隐藏
等待1完成后
1. “可能喜欢”渐变显示出来
2. 右侧的推荐商品向左滑动
完成

分解完毕后，是比较简单的，但是实际通过 imgcook 开发时，还是经历了不少学习的过程。

动效实现

首先，对于第一个步骤，切分状态，那么这里我们先创建状态，如下：

为了保证商品图平滑的过渡，需要保证两个商品图（Picture）是一个节点，接下来就可以开始第一阶段。

我们通过 state.recommend 来表示不同的状态，然后通过 imgcook 状态表达式来改变图片的宽高，并且通过设置 transition 属性来设置动效参数，隐藏其他组件就比较简单，直接通过 imgcook 设置是否渲染即可。

接下来就是等待阶段1完成后，显示“可能喜欢”，这一步的难点在于如何设置延时时间，我们可以通过设置 transitionDelay 来完成：

上述的代表表示渐变动效执行 0.3s，延时 0.6s 执行，因为之前我们设置阶段一的过渡时间是 0.6s。再接下来就是改变组件的透明度，这里我们使用了 View 组件的 onAppear 事件来完成。

通过增加 _参数，来获取元素（_event参数，来获取DOM元素（event.target），然后在函数里配置：

当然还有一种写法是：

this.set({ recommendOpacity: 1 });

由于前者比较简单，所以我选择了直接操作 DOM 元素。

接下来就到了最后的一个动画，从实现来说，也能通过 transition 完成，但是这里为了讲解如何使用 imgcook 开发出更为复杂的动效，我使用了 keyframes 来实现。

在开始思考之前，我们就遇到一个问题——如何在 imgcook 直接增加 CSS 样式呢？因为 keyframes 需要定义在 CSS 或 style 标签中，在这个过程中，我想过很多黑科技，比如使用 Rax 的
rax-keyframes-to-animation，以及在模块中动态的增加 style 标签来添加。

这些方案都不是太好，第一个方案会依赖于 Rax 生态，无法复制到其他框架，第二个方案虽然可以，但实在是不优雅，直到最后，我发现了 Element.prototype.animate，它是一项 Web 实验性功能，跟 keyframes 其实是对等的一套 Web API，在每个 DOM 元素对象上，可以通过 animate 方法，将 keyframes 所需的配置设置进行，从而实现与 keyframes 和 CSS animation 等价的功能。

首先呢，还是通过 onAppear 事件，获取到右侧的元素：

然后在函数里如下使用：

const keyframes = [ { transform: `translate3d(100%, 0, 0)` }, // from { transform: `translate3d(0, 0, 0)` } // to ]; target.animate(keyframes, { delay: 600, // 延时600ms duration: 1000, // 设置过渡时间 easing: 'ease', // 设置过渡函数 fill: 'forwards', // 设置动画结束后保持最后一帧的样式 });

除此之外，我们还需要保证元素的默认样式与 keyframes 的第一帧保持一致，所以需要设置：

这样，整个动画效果就完整地实现了，不过其实现在的实现还遗留了一个 Bug，因为我们是使用 onAppear 来触发动效的，所以当元素从屏幕划过再出现时（比如 Feeds 向下滚动再回滚），会再次触发动效，因此我们还需要对我们的实现稍作改进。

定义一个 animStarted，初始状态为 false 或 undefined，在函数内判断 animStarted 是否为 true，如果为 true 代表动效执行过了，就直接 return 出去，否则调用 animate() 开始执行，执行完毕后，设置 animStarted 为 true，这样我们就规避掉了 onAppear 重复执行的问题了。