背景 前端动画场景需求多 对众多动画场景的技术实现方案选择上比较模糊 各动画方案的优劣及适用场景认识模糊 现有动画库太多，不知道选哪个 主流动画库的适用场景认识模糊 下面首先让我们从各个角度来对动画整

本文参考 WCAG 2.1 、WAI-ARIA 和 Web 可访问性与无障碍最佳实践，在京喜小程序首页无障碍优化开发中，总结了一些“无障碍优化”在小程序端的实践，希望以此推动无障碍在小程序更多地落地。 据中国盲协的最新数据显示，中国目前视障者有 1700 多万，随着老龄化的严重…

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

CSS3 动画开发指南第二弹

文章首发个人博客 在 Now 直播新版抽奖内，用户进房之后可以点击任意一个地方(金木水土日月雷)进行抽奖。如下图所示: 动画的播放分为两个部分: 闪电的播放以及奖品部分的播放。 闪电部分动画大约有 2

以上各种动画形式都可以制作出一种类型的动画，那就是帧动画，也叫序列帧动画，定格动画，逐帧动画等，这里我们统一用帧动画来表述。 帧动画一般用来实现稍微复杂一点的动画效果，同时希望动画更细腻，设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容，我们一般用帧动画来做页面的Lo…

开发H5活动页面是前端开发中一种比较常见的需求，这种页面业务逻辑较轻，重交互和展示，是一类非常有趣的需求。本文将整理H5开发中常见Web动画的基本原理和简单实现。 最常见的逐帧动画大概就是gif图了，在Mac上使用“预览”工具打开一张gif图片，可以在左侧看见多张静态图片。 逐…

随着互联网的持续发展，H5页面作为与用户直接交互的表现层越来越复杂，呈现的形式也越来越丰富，从而也要求H5页面具有更多的花样性及动画效果。那前端实现动画效果的方式有哪些呢，大致有如下几种：一、GIF图

以一定的速度切换几张连续图像，让它动起来。 理论上说，帧率越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲帧率为 60 帧时动画效果最好，也就是每帧的消耗时间为 16.67ms。 帧率波动很大的动画，亦会使人感觉到卡顿。 GIF是一种位图，最高支持2…