动画类型
width/height animation
通过擦出/刷新等效果，实现产品的多图轮播、细节对比、文字高亮——这是 Apple 公众号特别偏爱的一种 SVG 交互设计方式。那么它的技术本质是什么？Apple 的编辑又是如何持续创新应用在 SVG 图文内的？本期我们结合具体实例总结。
简单的技术本质
从技术上讲，擦出/刷新类动画相对主要应用的是 width（宽度）和 height（高度）动画。若对照《SVG AttributeName 白名单》查询，我们不难发现它就位于表单的前列，技术本质不算复杂（点击放大查看）：
应用方式一：多图丝滑轮播
Apple 公众号最初基于 GIF 实现该效果，结合巧妙的视觉设计给到读者别样的图片轮播体验：
经过黑科技 SVG 编辑器设计师的创造性开发，我们推出了基于 SVG 代码完成的四张静态图刷新特效，并在 2021 年 3 月 26 日将其命名为「无限往返刷新器」。（详情阅读《黑科技编辑器 | 无限往返刷新器教程》）
此后，Apple 公众号也转而采用了黑科技 SVG 编辑器的技术思想，在第二年的《其余 364 天，你也一样值得被在乎。》中直接将四张静态插画以 SVG 代码形式惊艳开场：
应用方式二：产品细节对比
在近期的《Apple 新品，全高光亮相。》中，这种往返擦出/刷新的效果再次出现，并以产品细节对比为目的向用户展示新一代产品 Apple Watch 的轻薄优点。不同之处在于，刷新的效果集中在画面中央，这时候我们就可以通过「无限往返刷新器」组件筛选中的「2图1次停顿」实现（以下示意采用了更高清的素材）：
它的操作自由度极大，你可以定义包括：
1）起点坐标
2）停顿点坐标
3）终点坐标
4）扫描线颜色
不仅适合于产品细节对比，你还可以将它应用在如剖面图、爆炸图等场景之中，发挥你的创意思维让它在更广的宣传面发挥精彩的 SVG 动画特性吧！
文本着重涂亮
凭借 perspective 3D 视差滑动技术，Apple 公众号还实现过一种趣味的滑动文字高亮互动，横向滑动下方画面查看：
这种巧妙的擦出/涂亮效果需通过「视差滑动」SVG 组件完成，具体可对照以下视频进行操作：
超越 Apple，谁说你不行？
Apple 的每期发布都让用户啧啧称奇，但细心的编辑器会员很容易发现不少交互在编辑器内其实都预备有同类组件。这里我们推荐由大神 @2H 发明的 UGC 组件「循环刷新切换」，它完全超越了自动动画形式，支持手动触控点击，往返刷新画面：
切莫再待到 Apple 公众号已发布，才想起机会其实一直就在眼前喔！
其他 Apple 同款 SVG 互动特效在 E2.COOL 编辑器中均早有组件预备，或形态趋同或优于 Apple 公众号，不妨尝试并跟随练习：
1）Apple图文新特效「宫格弹跳」模版｜免费使用｜黑科技编辑器
2）Apple「展开说说」特效模板｜黑科技编辑器｜花式排版组件
3）组件同款特效亮相Apple公众号｜无限展开-收缩｜科蚪原创
4）好家伙，5分钟排版Apple「好家伙」开场动画
5）Apple同款｜长图横滑排版，让布局更自由
6）Apple同款｜SVG无限往返刷新排版，就在E2黑科技编辑器
7）Apple同款｜「等分容器滑动」组件制作「变色进度滑动」SVG排版特效
8）Apple同款｜5秒内完成「限时可见」SVG 排版特效
9）Apple同款｜滚动暂停放大 - 这款轮播 SVG 动画有新意
10）比 Apple 排版做更好｜SVG 无限选择器模版
11）比 Apple 排版更有趣｜SVG 全局滑动模版妙用
12）Apple同款｜SVG无限选择器效果与操作演示
13）Apple同款｜SVG扑克序列横向展开只需5分钟搞定
14）Apple同款开场动画｜SVG扑克连续飞出
15）Apple 同款｜无限移动-开关弹窗教程｜黑科技编辑器
16）Apple公众号自由视差滑动，轻松实现。
17）SVG弹窗｜Apple也爱的E2编辑器同款排版「卡氏弹窗」
18）Apple 同款文字涂亮特效（横向视差滑动）更新
19）黑科技编辑器｜双图往返挤压教程（Apple同款）
20）Apple公众号横向卡片SVG往返设计详解
21）Apple也爱用｜E2编辑器子弹时间SVG特效模版｜公众号黑科技排版
22）视频教学｜Apple 公众号扑克序列横向展开（E2.COOL 黑科技编辑器）
23）Apple同款｜3D小人立体视差滑动｜E2编辑器SVG教程
24）Apple同款多层卡片伸长SVG教程｜视频教学
黑科技编辑器秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，编辑器将竭诚思考代码转化的可行性。
