Web 动画原则及技巧浅析

╰+攻爆jí腚メ 2022-10-12 00:50 143阅读 0赞

在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation\[1\]，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：

*  Animation Principles for the Web\[2\]
 *  \[译文\]网页动画的十二原则\[3\]

其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。

## Squash and stretch -- 挤压和拉伸 ##

挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。

应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。

![3d79b25fb78c1017becf1c4d217a9e96.png][]

看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。

原理动画如下：

![9d82419b27cfe49f9bf8b8fc67961ce3.gif][]

类似的一些比较有意思的 Web 动画 DEMO：

![50cb4247637a1f0aca4ae6af9a621505.gif][] Squash and stretch - 1

CodePen Demo -- CSS Flippy Loader ???? By Jhey\[4\]

仔细看上面这个 Loading 动画，每个块在跳起之前都会有一个压缩准备动作，在压缩的过程中高度变低，宽度变宽，这就是挤压和拉伸，让动画看上去更加真实。

OK，再看两个类似的效果，加深下印象：

![b1685da159ed093b28016b422c3e7d7c.gif][] Squash and stretch - 2

CodePen Demo -- CSS Loading Animation\[5\]

![bcef615d82831890370de143da90eec5.gif][] Squash and stretch - 3

CodePen Demo -- CSS Animation Loader - Jelly Box\[6\]

简单总结一下，挤压和拉伸的核心在于保持对象的体积一致，当拉伸元素时，它的宽度需要变薄，而当挤压元素时，它的宽度需要变宽。

## Anticipation -- 预备动作 ##

准备动作用于为主要的动画动作做好准备，并使动作看起来更逼真。

譬如从地板上跳下来的舞者必须先弯曲膝盖，挥杆的高尔夫球手必须先将球杆向后挥动。

原理动画如下，能够看到滚动之前的一些准备动作：

![2e28e8465226bab8f43517e33a2720f0.gif][]

看看一些实际应用的chang场景，下面这个动画效果：

![d1e2020bb3f8f2f514724e0f149cb59c.gif][] Anticipation 1

CodePen Demo -- Never-ending box By Pawel\[7\]

小球向上滚动，但是仔细看的话，每次向上滚动的时候都会先向后摆一下，可以理解为是一个蓄力动作，也就是我们说的准备动作。

类似的，看看这个购物车动画，运用了非常多的小技巧，其中之一就是，车在向前冲之前会后退一点点进行一个蓄力动作，整个动画的感觉明显就不一样，它让动画看起来更加的自然：

![a299aad454fb025e584e5d0173d3e707.gif][] Anticipation

## Staging -- 演出布局 ##

Staging 意为演出布局，它的目的是引导观众的注意力，并明确一个场景中什么是最重要的。

可以通过多种方式来完成，例如在画面中放置角色、使用光影，或相机的角度和位置。该原则的本质是关注核心内容，避免其他不必要的细节吸引走用户的注意力。

原理动画如下：

![b66057b5fb32644a6cb8d32d37aa6807.gif][]

上述 Gif 原理图效果不太明显，看看示例效果：

![ff56ce2769d54961154412693a9fc630.gif][]

CodePen Demo -- CSS Loading Animation\[8\]

该技巧的核心就是在动画的过程中把主体凸显，把非主体元素通过模糊、变淡等方式弱化其效果，降低用户在其之上的注意力。

## Straight-Ahead Action and Pose-to-Pose -- 连续运动和姿态对应 ##

其实表示的就是逐帧动画和补间动画：

*  **FrameAnimation（逐帧动画）**：将多张图片组合起来进行播放，可以利用 CSS Aniation 的 Steps，画面由一帧一帧构成，类似于漫画书
 *  **TweenAnimation（补间动画）**：补间动画是在时间帧上进行关键帧绘制，不同于逐帧动画的每一帧都是关键帧，补间动画可以在一个关键帧上绘制一个基础形状，然后在时间帧上对另一个关键帧进行形状转变或绘制另一个形状等，然后中间的动画过程是由计算机自动生成。

这个应该是属于最基础的了，在不同场景下有不同的妙用。我们在用 CSS 实现动画的过程中，使用的比较多的应该是补间动画，逐帧动画也很有意思，譬如设计师设计好的复杂动画，利用多张图片拼接成逐帧动画也非常不错。

逐帧动画和补间动画适用在不同的场合，没有谁更好，只有谁更合适，比较下面两个时钟动画，其中一个的秒针运用的是逐帧动画，另外一个则是补间动画：

*  时钟秒针运用的是逐帧动画：

![1fefe60621e4bc2d00364a6079a0dd63.gif][] Straight-Ahead Action and Pose-to-Pose - CSS3 Working Clock

CodePen Demo -- CSS3 Working Clock By Ilia\[9\]

*  时钟秒针运用的是补间动画：

![7d647af12783bcd55c11e28fc3923fc7.gif][] Straight-Ahead Action and Pose-to-Pose - CSS Rotary Clock

CodePen Demo -- CSS Rotary Clock By Jake Albaugh\[10\]

有的时候一些复杂动画无法使用 CSS 直接实现的，也会利用逐帧的效果近似实现一个补间动画，像是苹果这个耳机动画，就是实际逐帧动画，但是看起来是连续的：

![6bccdbbe38ef7f97d394691d5b529cbf.gif][] steps 1

CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen\[11\]

这里其实是多张图片的快速轮播，每张图片表示一个关键帧。

## Follow through and overlapping action 跟随和重叠动作 ##

跟随和重叠动作是两种密切相关的技术的总称，它们有助于更真实地渲染运动，并有助于给人一种印象，即运动的元素遵循物理定律，包括惯性原理。

*  **跟随**意味着在角色停止后，身体松散连接的部分应该继续移动，并且这些部分应该继续移动到角色停止的点之外，然后才被拉回到重心或表现出不同的程度的振荡阻尼；
 *  **重叠动作**是元素各部分以不同速率移动的趋势（手臂将在头部的不同时间移动等等）；
 *  第三种相关技术是**拖动**，元素开始移动，其中一部分需要几帧才能追上。

要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。

原理示意图：

![b055704b739bcdda49c06f375c404138.gif][]

看看下面这个购物车动画，仔细看购物车，在移动到停止的过程中，有个很明显的刹车再拉回的感觉，这里运用到了跟随的效果，让动画更加生动真实：

![ebd341e931c49ab9e846d18da24dae07.gif][] Follow through and overlapping action

## Slow In and Slow Out -- 缓入缓出 ##

现实世界中物体的运动，如人体、动物、车辆等，需要时间来加速和减速。

真实的运动效果，它的缓动函数一定不是 Linear。出于这个原因，运动往往是逐步加速并在停止前变慢，实现一个慢进和慢出的效果，以贴近更逼真的动作。

示意图：

![7e8608bde01372c3bc3bcec985dc5a70.gif][]

这个还是很好理解的。真实世界中，很少有缓动函数是 Linear 的运动。

## Arc -- 弧线运动 ##

大多数自然动作倾向于遵循一个拱形轨迹，动画应该遵循这个原则，遵循隐含的**弧形**以获得更大的真实感。

原理示意图：

![4ca47e03d567c325145d21067caa175d.gif][]

嗯哼，在很多动画中，使用弧线代替直线，能够让动画效果更佳的逼真。看看下面这个烟花粒子动画：

![ab2ea3b5fbb650c644588c9dbf7166e1.gif][]

arc1

CodePen Demo -- Particles, humankind's only weakness By Rik Schennink\[12\]

整个烟花粒子动画看上去非常的自然，因为每个粒子的下落都遵循了自由落体的规律，它们的运动轨迹都是弧线而不是直线。

## Secondary Action -- 次要动作 ##

将次要动作添加到主要动作可以使场景更加生动，并有助于支持主要动作。走路的人可以同时摆动手臂或将手臂放在口袋里，说话或吹口哨，或者通过面部表情来表达情绪。

原理示意图：

![9781a2e4dec052cad86d081702db32bd.gif][]

简单的一个应用实例，看看下面这个动画：

![f927784eb7b011964da622eeeb5ef3b0.gif][] Secondary Action - Submarine Animation (Pure CSS)

CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram\[13\]

这里实现了一个潜艇向前游动的画面，动画本身还有很多可以优化的地方。但也有一些值得学习肯定的地方，动画使用了尾浆转动和气泡和海底景物移动。

同时，值得注意的是，窗口的反光也是一个很小的细节，表示船体在移动，这个就属于一个次要动作，衬托出主体的移动。

再看看下面这打印动画，键盘上按键的上上下下模拟了点击效果，其实也是个次要动作，衬托主体动画效果：

![b52a1a60b3497776d0d45d693afc43ba.gif][] Secondary Action - CodePen Home CSS Typewriter

CodePen Demo -- CSS Typewriter By Aaron Iker\[14\]

## Timing -- 时间节奏 ##

时间是指给定动作的绘图或帧数，它转化为动画动作的速度。

在纯粹的物理层面上，正确的计时会使物体看起来遵守物理定律。例如，物体的重量决定了它对推动力的反应，因为重量轻的物体会比重量大的物体反应更快。

同一个动画，使用不同的速率展示，其效果往往相差很多。对于 Web 动画而言，可能只需要调整 `animation-duration` 或 `transition-duration` 的值。

原理示意图：

![d336f3df6e753f59fe4d6bd354d8075b.gif][]

可以看出，同个动画，不同的缓动函数，或者赋予不同的时间，就能产生很不一样的效果。

当然，时间节奏可以运用在很多地方，譬如在一些 Loading 动画中：

![c50c14467e34e5ec687da0e819e9e103.gif][]

Timing - Only Css 3D Cube

CodePen Demo -- Only Css 3D Cube By Hisami Kurita\[15\]

又或者是这样，同个动画，不同的速率：

![60e2ba5dce21ed5877e4cf941195a283.gif][] Timing - Rotating Circles Preloader

CodePen Demo -- Rotating Circles Preloader\[16\]

也可以是同样的延迟、同样的速率，但是不同的方向：

![bfc05e66e8dbf981cf3db323df5ceeba.gif][] Timing - 2020 SVG Animation | Using pathLength=1 with stroke-dashoffset Tutorial | @keyframers 2.29.0

CodePen Demo -- 2020 SVG Animation By @keyframers\[17\]

## Exaggeration -- 夸张手法 ##

夸张是一种对动画特别有用的效果，因为力求完美模仿现实的动画动作可能看起来是静态和沉闷的。

使用夸张时，一定程度的克制很重要。如果一个场景包含多个元素，则应平衡这些元素之间的关系，以避免混淆或吓倒观众。

原理示意图：

![90d1a2d2f879fc5dd727da7d62996af4.gif][]

OK，不同程度的展现对效果的感官是不一样的，对比下面两个故障艺术动画：

轻微晃动故障：

![cb7f64a2b58cc6ff5424324fa73e0b94.gif][]

Exaggeration 1

严重晃动故障：

![85bb670be0b1eb12f59cda99aa3b755e.gif][]

Exaggeration 2

CodePen Demo -- Glitch Animation\[18\]

可以看出，第二个动画明显能感受到比第一个更严重的故障。

过多的现实主义会毁掉动画，或者说让它缺乏吸引力，使其显得静态和乏味。相反，为元素对象添加一些夸张，使它们更具活力，能够让它们更吸引眼球。

## Solid drawing -- 扎实的描绘 ##

这个原则表示我们的动画需要尊重真实性，譬如一个 3D 立体绘图，就需要考虑元素在三维空间中的形式。

了解掌握三维形状、解剖学、重量、平衡、光影等的基础知识。有助于我们绘制出更为逼真的动画效果。

原理示意图：

![0f263e0f7e81816910aeebc5ba795d02.gif][]

再再看看下面这个动画，名为 Close the blinds -- 关上百叶窗：

![b4c4ff37d3022152b3051c2c7232d452.gif][] Solid drawing - Close the blinds

CodePen Demo -- Close the blinds By Chance Squires\[19\]

hover 的时候有一个关上动画，使用多块 div 模拟了百叶窗的落下，同时配合了背景色从明亮到黑暗的过程，很好的利用了色彩光影辅助动画的展示。

再看看这个摆锤小动画，也是非常好的使用了光影、视角元素：

![fd6be59b4b2b5738c15946f05d018052.gif][] Solid drawing - The Three-Body Problem

CodePen Demo -- The Three-Body Problem By Vian Esterhuizen\[20\]

最后这个 Demo，虽然是使用 CSS 实现的，但是也尽可能的还原模拟了现实中纸张飞舞的形态，并且对纸张下方阴影的变化也做了一定的变化：

![d3139f07357b1ea8b52eddf8c2ca3c01.gif][] Solid drawing - 3D CSS-only flying page animation tutorial

CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers\[21\]

好的动画，细节是经得起推敲的。

## Appeal -- 吸引力 ##

一反往常，精美的细节往往能非常好的吸引用户的注意力。

吸引力是艺术作品的特质，而如何实现有吸引力的作品则需要不断的尝试。

原理示意图：

![be4e10a722cd2357955bb4ffd87cfcd7.gif][]

我觉得这一点可能是 Web 动画的核心，一个能够吸引人的动画，它肯定是有某些特质的，让我们一起来欣赏下。

![444b2d774ebc79de4577f396ad3c0c4e.gif][] Appeal - 1

CodePen Demo -- Download interaction By Milan Raring\[22\]

通过一连串的动作，动画展开、箭头移动、进度条填满、数字变化，把一个下载动画展示的非常 Nice，让人在等待的过程并不觉得枯燥。

再来看看这个视频播放的效果：

![3e041a97fd35d8b83734d2d1534f6dc0.gif][]

Appeal - 2

CodePen Demo -- Video button animation - Only CSS\[23\]

通过一个遮罩 hover 放大，再到点击全屏的变化，一下子就将用户的注意力给吸引了过来。

## Web 动画的一些常见误区 ##

当然，上述的一些技巧源自于**迪士尼动画原则**，我们可以将其中的一些思想贯穿于我们的 Web 动画的设计之中。

但是，必须指出的是，Web 动画本身在使用的时候，也有一些原则是我们需要注意的。主要有下面几点：

*  增强动画与页面元素之间的关联性
 *  不要为了动画而动画，要有目的性
 *  动画不要过于缓慢，否则会阻碍交互

### 增强动画与页面元素之间的关联性 ###

这个是一个常见的问题，经常会看到一些动画与主体之间没有关联性。关联性背后的逻辑，能帮助用户在界面布局中理解刚发生的变化，是什么导致了变化。

好的动画可以做到将页面的多个环节或者场景有效串联。

比较下面两个动画，第二个就比第一个更有关联性：

没有强关联性的：

![069d84e9828a2a20731dd1aa7b79ae38.gif][]

有关联性的：

![142a22a87814c2cbd515c86417a68df0.gif][]

很明显，第二个动画比第一个动画更能让用户了解页面发生的变化。

### 不要为了动画而动画，要有目的性 ###

这一点也很重要，不要为了动画而动画，要有目的性，很多时候很多页面的动画非常莫名其妙。

emm，简单一点来说就是单纯的为了炫技而存在的动画。这种动画可以存在于你的 Demo，你的个人网站中，但不太适合用于线上业务页面中。

使用动画应该有明确的目的性，譬如 Loading 动画能够让用户感知到页面正在发生变化，正在加载内容。

![3325523ab41054e05722926a1325d7f4.gif][]

在我们的交互过程中，适当的增加过渡与动画，能够很好的让用户感知到页面的变化。类似的还有一些滚动动画。丝滑的滚动切换比突兀的内容明显是更好的体验。

### 动画不要过于缓慢，否则会阻碍交互 ###

缓慢的动画，它产生了不必要的停顿。

一些用户会频繁看到它们的过渡动画，尽可能的保持简短。让动画持续时间保持在 300ms 或更短。

比较下面两个动画，第一次可能会让用户耳目一新，但是如果用户在浏览过程中频繁出现通过操作，过长的转场动画会消耗用户大量不必要的时间：

过长的转场动画：

![1becee82ccf1b0d4e6cfed8f12c5bced.gif][]

缩短转场动画时间，保持恰当的时长：

![ff352a290c7f4b784a78f8a45fd22d26.gif][]

## 结合产品及业务的创意交互动画    ##

这一点是比较有意思的。我个人认为，Web 动画做得好用的妙，是能非常好的提升用户体验，提升品牌价值的。

结合产品及业务的创意动画，是需要挖掘，不断打磨的不断迭代的。譬如大家津津乐道的 BiliBili 官网，它的顶部 Banner，配合一些节日、活动，经常就会有出现一些有意思的创意交互动画。简单看两个：

![483f30704d4caa8c659059658447a239.gif][]

以及这个：

![449e4cc560d073dfda1b0659a33e2ed3.gif][]

我非常多次在不同地方看到有人讨论 Bilibili 的顶部 banner 动画，可见它这块的动画是成功的。很好的结合了一些节日、实事、热点，当成了一种比较固定的产品去不断推陈出新，在不同时候给与用户不同的体验。

## 考虑动画的性价比 ##

最后一条，就是动画虽好，但是打磨一个精品动画是非常耗时的，尤其是在现在非常多的产品业务都是处于一种敏捷开发迭代之下。

一个好的 Web 动画从构思到落地，绝非前端一个人的工作，需要产品、设计、前端等等相关人员公共努力， 不断修改才能最终呈现比较好的效果。所以在项目初期，一定需要考虑好性价比，是否真的值得为了一个 Web 动画花费几天时间呢？当然这是一个非常见仁见智的问题。

## 参考文章 ##

*  原理图来源 -- Understand Disney's 12 principles of animation\[24\]
 *  Animation Principles for the Web\[25\]
 *  \[译文\]网页动画的十二原则\[26\]
 *  Twelve basic principles of animation\[27\]
 *  功能性动画设计：优秀的转场效果\[28\]

## 最后 ##

想使用 Web 技术绘制生动有趣的动画并非易事，尤其在现在国内的大环境下，鲜有人会去研究动画原则，并运用于实践生产之中。但是它本身确实是个非常有意思有技术的事情。希望本文能给大伙对 Web 动画的认知带来一些提升和帮助，在后续的工作中多少运用一些。

好了，本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS\[29\] ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

### 参考资料 ###

\[1\]

Twelve basic principles of animation: *https://en.wikipedia.org/wiki/Twelve\_basic\_principles\_of\_animation*

\[2\]

Animation Principles for the Web: *https://cssanimation.rocks/principles/*

\[3\]

\[译文\]网页动画的十二原则: *https://cssanimation.rocks/cn/principles/*

\[4\]

CodePen Demo -- CSS Flippy Loader ???? By Jhey: *https://codepen.io/jh3y/pen/VwLdVoZ*

\[5\]

CodePen Demo -- CSS Loading Animation: *https://codepen.io/Chokcoco/pen/xxqjzVg*

\[6\]

CodePen Demo -- CSS Animation Loader - Jelly Box: *https://codepen.io/Chokcoco/pen/ZEeoRpb*

\[7\]

CodePen Demo -- Never-ending box By Pawel: *https://codepen.io/jh3y/pen/VwLdVoZ*

\[8\]

CodePen Demo -- CSS Loading Animation: *https://codepen.io/Chokcoco/pen/wvJjExj*

\[9\]

CodePen Demo -- CSS3 Working Clock By Ilia: *https://codepen.io/iliadraznin/pen/JcqbE*

\[10\]

CodePen Demo -- CSS Rotary Clock By Jake Albaugh: *https://codepen.io/jakealbaugh/pen/ZYdYRO*

\[11\]

CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen: *https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6*

\[12\]

CodePen Demo -- Particles, humankind's only weakness By Rik Schennink: *https://codepen.io/rikschennink/pen/kAcxu*

\[13\]

CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram: *https://codepen.io/akhil\_001/pen/gQwJPJ*

\[14\]

CodePen Demo -- CSS Typewriter By Aaron Iker: *https://codepen.io/aaroniker/pen/XWWPbep*

\[15\]

CodePen Demo -- Only Css 3D Cube By Hisami Kurita: *https://codepen.io/hisamikurita/pen/LYEWXEW*

\[16\]

CodePen Demo -- Rotating Circles Preloader: *https://codepen.io/Chokcoco/pen/mdWKvJB*

\[17\]

CodePen Demo -- 2020 SVG Animation By @keyframers: *https://codepen.io/team/keyframers/pen/BayJqMX*

\[18\]

CodePen Demo -- Glitch Animation: *https://codepen.io/Chokcoco/pen/gOmdRzE*

\[19\]

CodePen Demo -- Close the blinds By Chance Squires: *https://codepen.io/chancesq/pen/mdejYeQ*

\[20\]

CodePen Demo -- The Three-Body Problem By Vian Esterhuizen: *https://codepen.io/heyvian/pen/KKwoZNX*

\[21\]

CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers: *https://codepen.io/team/keyframers/pen/YzKjoev*

\[22\]

CodePen Demo -- Download interaction By Milan Raring: *https://codepen.io/milanraring/pen/jOEOmbv*

\[23\]

CodePen Demo -- Video button animation - Only CSS: *https://codepen.io/milanraring/pen/QWwyLdp*

\[24\]

Understand Disney's 12 principles of animation: *https://www.creativebloq.com/advice/understand-the-12-principles-of-animation*

\[25\]

Animation Principles for the Web: *https://cssanimation.rocks/principles/*

\[26\]

\[译文\]网页动画的十二原则: *https://cssanimation.rocks/cn/principles/*

\[27\]

Twelve basic principles of animation: *https://en.wikipedia.org/wiki/Twelve\_basic\_principles\_of\_animation*

\[28\]

功能性动画设计：优秀的转场效果: *http://www.woshipm.com/pd/379898.html*

\[29\]

Github -- iCSS: *https://github.com/chokcoco/iCSS*

[![6eaa0b09484faf090a4dd8145c5e4640.png][]][6eaa0b09484faf090a4dd8145c5e4640.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![2e110594e4cc910f5135ac8906d5bf52.png][]

[3d79b25fb78c1017becf1c4d217a9e96.png]: /images/20221005/dcfb1294574f4e74858daf8b1afe3704.png
[9d82419b27cfe49f9bf8b8fc67961ce3.gif]: /images/20221005/a46fa0477e03420796ea7b478b05e129.png
[50cb4247637a1f0aca4ae6af9a621505.gif]: /images/20221005/b605adf08f12490b84adbf0b37810b25.png
[b1685da159ed093b28016b422c3e7d7c.gif]: /images/20221005/d738984d76ab4f3da64ced1e3d3aa839.png
[bcef615d82831890370de143da90eec5.gif]: /images/20221005/d6a333426a4347e9bbe9fdc63104ae3f.png
[2e28e8465226bab8f43517e33a2720f0.gif]: /images/20221005/dcd9833ed39942afb5c3f6f5cf3ea5e1.png
[d1e2020bb3f8f2f514724e0f149cb59c.gif]: /images/20221005/9f46e397733547a1a90a798aa0214112.png
[a299aad454fb025e584e5d0173d3e707.gif]: /images/20221005/50fbb6d14427411ab8f8210d98784e97.png
[b66057b5fb32644a6cb8d32d37aa6807.gif]: /images/20221005/a39bcf221d93486b918bb9a6d32925b1.png
[ff56ce2769d54961154412693a9fc630.gif]: /images/20221005/0ac1e5e0bb3844adb904c0d62ef9b9f5.png
[1fefe60621e4bc2d00364a6079a0dd63.gif]: /images/20221005/93b183f4bd6b480bb7c6ca5299da78cb.png
[7d647af12783bcd55c11e28fc3923fc7.gif]: /images/20221005/d72bdbeef96743678249c69ad25d77f7.png
[6bccdbbe38ef7f97d394691d5b529cbf.gif]: /images/20221005/e3fa0d633746470e8c99b8a8c4980197.png
[b055704b739bcdda49c06f375c404138.gif]: /images/20221005/351968caa19e4c7c872efacfec91645d.png
[ebd341e931c49ab9e846d18da24dae07.gif]: /images/20221005/285e49afae4e4fa5a40f90e79d6217a6.png
[7e8608bde01372c3bc3bcec985dc5a70.gif]: /images/20221005/e76443db4ba6406394936e1111011f5b.png
[4ca47e03d567c325145d21067caa175d.gif]: /images/20221005/46093f2ed5744feca42dfb415e3e7d0f.png
[ab2ea3b5fbb650c644588c9dbf7166e1.gif]: /images/20221005/5bf5cdc60f7947779fca56684a21e01c.png
[9781a2e4dec052cad86d081702db32bd.gif]: /images/20221005/8af90af7e861463986857a87d53bff7c.png
[f927784eb7b011964da622eeeb5ef3b0.gif]: /images/20221005/cbd7b0f2cfcb4eac9ee6e32961c1c02e.png
[b52a1a60b3497776d0d45d693afc43ba.gif]: /images/20221005/151b9c7b1854465498fd507d9750c6c7.png
[d336f3df6e753f59fe4d6bd354d8075b.gif]: /images/20221005/07cfe7778c864e528d337e15409376c2.png
[c50c14467e34e5ec687da0e819e9e103.gif]: /images/20221005/b21a3190fb184b3bbdf21f5d25d7fdbc.png
[60e2ba5dce21ed5877e4cf941195a283.gif]: /images/20221005/0b6621e61f524c659e6f3dbbd89069df.png
[bfc05e66e8dbf981cf3db323df5ceeba.gif]: /images/20221005/639931e2a3914a818efd81a8fafd0022.png
[90d1a2d2f879fc5dd727da7d62996af4.gif]: /images/20221005/17bb4f08f0784ea8b2f914f91b77f5de.png
[cb7f64a2b58cc6ff5424324fa73e0b94.gif]: /images/20221005/41b5c284a11d45ffadfb0f16b52aecd4.png
[85bb670be0b1eb12f59cda99aa3b755e.gif]: /images/20221005/bf73c249fe2547d99133068596698531.png
[0f263e0f7e81816910aeebc5ba795d02.gif]: /images/20221005/2dbca669a1f94f22a864d2c02e51c7cb.png
[b4c4ff37d3022152b3051c2c7232d452.gif]: /images/20221005/430ff14fe98f412cb549f3b9320763d8.png
[fd6be59b4b2b5738c15946f05d018052.gif]: /images/20221005/63050b2299ee4eb980b18473ffea63a4.png
[d3139f07357b1ea8b52eddf8c2ca3c01.gif]: /images/20221005/d652017a98524da3805d7bcc87ca4ae7.png
[be4e10a722cd2357955bb4ffd87cfcd7.gif]: /images/20221005/7dfa196fccdf4003b9658a3821fecb44.png
[444b2d774ebc79de4577f396ad3c0c4e.gif]: /images/20221005/1410f05bba114356b9e2c613e78a96b1.png
[3e041a97fd35d8b83734d2d1534f6dc0.gif]: /images/20221005/eeda36826cee47cbbdfb337f1147873e.png
[069d84e9828a2a20731dd1aa7b79ae38.gif]: /images/20221005/d1a64d6c2e1e48ddba3e099bda85e100.png
[142a22a87814c2cbd515c86417a68df0.gif]: /images/20221005/966e1b8f82944cc2a29a4d3ca50a8d0e.png
[3325523ab41054e05722926a1325d7f4.gif]: /images/20221005/8fe43cfd336d44b685821bc3949b45d9.png
[1becee82ccf1b0d4e6cfed8f12c5bced.gif]: /images/20221005/4fe0fdd6296a4c3298aba57e8eef9380.png
[ff352a290c7f4b784a78f8a45fd22d26.gif]: /images/20221005/6226f7316dc6414e8d59e65cfd4fd284.png
[483f30704d4caa8c659059658447a239.gif]: /images/20221005/c22f7134699d469dac99510f3c118a16.png
[449e4cc560d073dfda1b0659a33e2ed3.gif]: /images/20221005/7e966285a6474daa906737867c6ec82e.png
[6eaa0b09484faf090a4dd8145c5e4640.png]: /images/20221005/cb0eb23f958944c6a7b77feb40c43d9b.png
[6eaa0b09484faf090a4dd8145c5e4640.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[2e110594e4cc910f5135ac8906d5bf52.png]: /images/20221005/4fd91a19d1a844d6b96725f686ffa1d3.png