搜索

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

给产品经理讲技术 · 2016-01-07
动画的意义与原理

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

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

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

Image title

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

Image title

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)了。

+1
0

好文章,需要你的鼓励

参与评论
登录后才能参与讨论哦...
后参与讨论
提交评论0/1000

请回复有价值的信息,无意义的评论将很快被删除,账号将被禁止发言。

下一篇

发力原创内容的同时,进驻各国市场。

2016-01-07

36氪APP让一部分人先看到未来
36氪
鲸准
氪空间

为你推送和解读最前沿、最有料的科技创投资讯

一级市场金融信息和系统服务提供商

聚集全球最优秀的创业者,项目融资率接近97%,领跑行业