用咸鱼兄的方式吃苹果

生命不息，代码不止

18日，苹果发布了他们的新iPadPro，我看了眼价格，买不起，看了眼官网，页面一如既往的帅，看了眼推送，发现全新骚操作！

第二天，我发现某公众号编辑器也推送了一条仿苹果推送，我的直觉告诉我，他们能做出来的，我研究研究应该也没啥问题。

于是，我开始使用研究前端网页的一般手段，用浏览器打开文章，然后按下F12。

废话不多说，先上核心代码，如果不想听我讲技术的，复制走代码把图片地址替换掉就可以用了，至于图片地址在哪里还有代码怎么用，直接文章翻到最后几段去看吧：

我们使用标签定义了一个画布，这是所有公众号推文里面骚操作的核心，包括之前有些朋友可能见过的，一开始没有字，点击之后字慢慢出现的那种效果。（不过那些左右滑动看图片的就是更简单的技术了，我们改日再说）

svg后面紧跟的height定义了这个画布的初始高度，这也是你需要让观众一开始就看到的那一部分，这个部分的高度取决于你做的长图上面有多少需要让观众看到。

在标签中间嵌套了一个表情，简单的几个英文单词我们可以轻易看懂，这个动画是click点击的时候开始，画布的height高度会发生改变，动画的dur持续时间是1000s，动画never永远不会restart重新开始，在这段动画里，有几个keyTimes：

keyTimes属性是一个以分号分隔的时间值列表，用于控制动画的执行步骤。列表中的每个值与values中的值一一对应，定义了values中的值在动画中何时执行。

看傻了对吧，我知道你会傻，因为我一开始也没看懂，所以我把那段字变小了。其实呢，理解的关键就在于把整个dur持续时间看做是1，这个keytimes列表一定要从0开始，以1结束，中间的所有数值都要属于（0-1），这是对dur的按比例划分。

然后，在这停顿！思考一下，按照前面所说的，values和keytimes是一一对应的，那么，应该如何取值呢？

思考结束，公布结果，第一个值是起始值，最后一个值是图片的总长度，中间数值只要在这之间，随便取，控制一下动画速度就好。

代码解释完了，我们再解决一开始提出的那两个问题：

1、图片地址在哪里

2、代码怎么用

很多的微信公众号辅助工具都会带有“代码模式”，我用的是新媒体管家（广告费请打到账户上，谢谢），如果有其他的也是可以的，打开代码模式然后把代码粘贴进去就好了。

最后还有两个要注意的问题：

1、前文中我们提到的所有高度，由于手机微信内浏览器的问题，其实都不是图片的真实高度，所以，为了最好的显示效果，推送前一定要发送到手机预览，然后一点一点的调整所有的高度数值；

2、在群发之前，一定不要在编辑器里面手贱点你的图片，因为点完之后你就会发现，初始的height已经改变了。

一边重整旗鼓，一边踉跄前行