在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

在上一节，我们分析了LottieView的playAnimation()的整体流程，我们在最后也提到了，Lottie的动画就是通过一层一层的Layer实现的，其中有CompositionLayer、BaseLayer比较重要，起到了通知更新、分发更新的作用。 但是上一节没有具体…

一. 展示型动画 VS 交互性动画 展示型动画在实际使用的场景中，实现的方法很多，比如用gif图，canvas，css3动画等，但是最终输出的结果是不带有交互的，也就是从动画起始状态到结束状态一气呵成，这个过程用户可以感知，但是无法参与。对于交互性动画而言，我们可以在动画播放的…

0. 前言 自我在内网发布了一篇关于 Lottie 的原理分析的文章之后，就不断有同事来找我询问关于 Lottie 的各种东西，最近又有同事来问，就想着可能对大家也会有所帮助，就稍作处理后分享出来。 需要注意的是，这文章写于两年前，基本版本 2.0.0-beta3，虽然我看过最…

帧动画的缺点和局限性比较明显，合成的雪碧图文件大，且在不同屏幕分辨率下可能会失真。经调研发现，Lottie是个简单、高效且性能高的动画方案。 Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和we…

因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试, 最近终于有时间机会于是尝试了一把, 在这里分享一下。 一. Intro to Lottie Lottie 是 Airbnb 开源的一个支持 Web、Andr…

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用过都说好。完全解耦开发人员和设计师，让设计师设计的动画，在程序中无缝还原，真是一旦拿起绝不放下。 之前也写过两篇关于 Lottie 基础的文章，还不了解的可以先看看。 Lottie 虽然非常好用，但是从…

1. lottie 简介 Lottie是一个iOS，Android和React Native库，可以实时渲染After Effects动画，并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JS…