当我们谈论动画的时候，我们在谈论什么

本文来自微信公众号“给产品经理讲技术”（pm_teacher)，欢迎大家关注。

小弟一直以来都有个习惯，就是在用APP的时候，发现一个酷炫拉风的动画效果，都忍不住多点两下欣赏一番。不知道各位有没有同样的感受，一个恰到好处、华丽而又舒服的动画，可以给一个APP加分不少。今天我们就来谈谈这些动画背后的技术。

说到动画我想起了小时候玩过的手翻书，把一幅一幅动作连贯的小人画在一张张纸上，然后迅速翻页，就会看到小人仿佛真的动了起来。其实屏幕上的动画也是一样的道理，只不过我们手绘的小人变成了程序绘制的画面，快速翻页的纸张变成了不断刷新的屏幕。动画就是这么个原理，它把一些静止的画面快速的一张张的展示出来，当速度超过人眼可以识别的极限之后，人就会觉得它本来就是连续的。

我们先来说几个简单的概念。动画过程中的某一张静止画面叫做一帧，一个动画每秒钟播放的帧数叫做帧率，一般来说当帧率达到30帧每秒的时候，人们就会觉得这个动画很连贯了，当帧率达到60帧每秒的时候，这个动画就会非常流畅了。像下面这个点击按钮弹出菜单的动画，要达到每秒钟60帧的帧率流畅运行，每一帧要花多久来展示呢？如果我没算错的话，应该是16毫秒左右。

16毫秒，也就是留给是你的手机渲染一帧的时间。还记得我们之前讲过的渲染的概念吗？在这16毫秒期间，你需要为屏幕上的所有图片、按钮、文字测量好大小，排布好位置，然后交给显卡绘制出来。现在手机配置越来越强大，但是屏幕分辨率也越来越大。分辨率越大意味着每一帧要画的像素越多，CPU和显卡的负担也越重。这时候万一哪个2B程序员插了一段从网络上同步下载苍老师.avi的代码进去，导致每一帧绘制都需要100多毫秒，这时候用户就会看到动画一卡一卡的，这个用户多半是要流失了。

那么从技术上来讲如何实现一个动画呢？这里需要操作系统提供三个东西，一个是刷新屏幕的命令，我们假设叫refresh，我们的程序发出了这个命令后，手机就会刷新一次屏幕。另一个是绘制图形的命令，假设叫drawFrame，这个是一个代表，具体可以是drawCircle(在屏幕上画个圆圈)、drawRect(画个长方形)、drawText(画一段文字)等等。最后一个是定时器，假设叫scheduleNextFrame，它的作用是告诉操作系统下一帧的时间。

假设我们要绘制一个500毫秒的动画，它展示一个圆放大30倍的过程。这个流程是这样的：

• 第一帧:drawCircle(1倍)--->refresh--->scheduleNextFrame
• 第二帧: drawCircle(2倍)--->refresh--->scheduleNextFrame...
• 第30帧: drawCircle(30倍)--->refresh--->结束。

这种动画实现起来非常简单，iOS和Android都内置了几种常见动画类型，如缩放、平移、渐变、旋转等等。程序员只需要设置好动画时长(前面的500毫秒),动画中要变化的东西(前面放大多少倍)，然后发出start的命令就可以了。

还有一种动画叫有交互的动画。它由用户手指的操作触发刷新屏幕，一个典型的场景是我们滑动朋友圈列表的时候，列表之所以跟着手指动，就是因为手指的移动触发了屏幕的刷新。这个场景延伸出去就是游戏了，游戏的界面刷新也是由用户控制的。从实现成本上来说，程序要要实现一个没有交互的动画很简单的，如果动画不是特别复杂，基本上从设计师那里拿到资源和设计稿，就可以大概做出个雏形。有交互的动画因为要处理用户手指的触摸事件，会稍微麻烦一点，但基本原理都是相通的。

了解了这些动画的知识，现在你就可以愉快的和程序员们沟(si)通(bi)了。