文档章节

动画分析步骤“三步曲”

云栖运营小编
 云栖运营小编
发布于 2017/01/24 15:25
字数 1146
阅读 5
收藏 0

首先先来看看动画设计中的三个角色:产品设计师、算法分析师以及伟大的程序员都有哪些职责。
(1)产品设计师:告诉大家想做一个什么样的动画。
(2)算法分析师:分析动画的实现原理并设计相应的动画算法。
(3)程序员:思考如何用代码实现算法。
  在一般中小规模的公司中,开发人员往往都是身兼数职。不仅要编写代码还要参与到算法的设计中去,甚至参与到动画原型的设计中去。所以弄清楚动画设计过程中的不同角色,以及搞清楚动画的分析过程是非常有必要的。

1 动画分析方法

  下图是我们想要实现的动画效果,那么如何来分析它呢?其实产品设计师在设计动画时,如果能够将动画分解为单帧图像,或者能够较为慢速地展现动画的变化过程,那么对于算法分析师和程序员分析动画的原理,以及设计合适的展现算法起着非常重要的作用。下图描述了登录按钮从左到右逐渐移动的效果,并最后停留在视图层中间位置这一过程。
【图1】

  这个动画效果非常简单,可以用一句话来描述其实现算法,即图像的水平方向位置坐标和时间呈线性渐变关系。接下来思考如何用代码实现这个效果。按照动画的展示过程,这里将动画分为:动画起始阶段、动画进行阶段和动画结束阶段。

1.动画起始阶段

  在动画启动的瞬间,希望动画从屏幕可视界面外飞入进来。如下图所示的登录按钮是需要实现的动画起始位置。
【图2】
  在iOS视图中,左上角为视图的原点(0,0),水平向右为x轴递增方向,竖直向下为y轴递增方向,只有当View视图位于手机屏幕展示坐标系之内,大家才能看到(虚线区域内控件不可见),否则登录按钮是不可见的。所以在动画的起始阶段可以将动画的位置属性设置在界面之外。

2.动画进行阶段

经过前面的分析,大家已经了解了这个动画效果的实现算法,即登录按钮的坐标沿水平方向随时间线性变化。如表1.1所示描述了不同时间段登录按钮的坐标变化情况。幸运的是大家不需要手动设计这一过程,甚至不需要手动写线性渐变的方法,因为iOS在UIView的显示层已经帮我们把这个功能集成了。iOS在UIView图层中不仅集成了动画的线性渐变方法,而且动画的加速、减速以及复杂的动画变化时间函数、运动路径函数也已经为大家集成好了,所以只需要学会如何使用这些丰富的API即可,且这个功能只需要几行代码就可以实现。
  表1.1 6S下QQ图标移动效果:QQ图标x、y坐标随时间变化关系表
图片描述

3.动画结束阶段

  在动画效果结束之后没有触发新的回调事件,只是更新了当前登录按钮的最后位置,所以图片最终停留在视图层的中间位置。

2 登录按钮移动动画效果:闭包形式

首先创建一个单视图工程,创建好之后可以看到下图的工程文件目录结构:
【图3】
  动画实现的第一阶段:动画起始阶段
  在开始正式添加动画代码之前需要为应用添加一个背景图片。在Main.storyboard中为整个工程添加一个已经准备好的背景图片,背景图片依托在UIImageView上。

阅读全文直接点击:http://click.aliyun.com/m/9758/

© 著作权归作者所有

云栖运营小编
粉丝 7
博文 97
码字总数 52676
作品 0
朝阳
运营/编辑
私信 提问
使用 Eclipse Memory Analyzer 进行堆转储文件分析

简介: Eclipse Memory Analyzer(MAT)是著名的跨平台集成开发环境 Eclipse Galileo 版本的 33 个组成项目中之一,它是一个功能丰富的 JAVA 堆转储文件分析工具,可以帮助你发现内存漏洞和减...

红薯
2010/07/26
1.7K
0
爬取美团网美食数据,看北京上海都爱吃些啥

数据爬取三步曲之前方有坑 工作需求需要采集 OTA 网站的美食数据,某个城市的饭店类型情况等。对于老饕来说这不算个事,然而最后的结果是午饭晚饭都没有时间去吃了……情况如下: Chrome F12...

CSDN资讯
2019/01/01
0
0
LINQ简记(2):重要概念

为了能让初学者更快速地掌握,在系列文章中,我尽可能地避开理论讲解,一则对于入门者来说,过多的理论叙述反而会降低大家学习编程的兴趣,二则,官方文档的资料很详细,我说了也是废话。因此...

junwong
2012/04/18
78
0
汇报时,如何让老板快速抓住重点? | 黄金三步法 - 知乎

阿里妹导读:对事物的归类分组是我们人类的天性,我们的大脑会自动将发现的所有事物以某种持续组织起来。但如何组织才能帮助我们解决工作和生活中出现的各种复杂问题?今天,我们请阿里高级技...

我是程序员
2019/10/23
0
0
汇报时,如何让老板快速抓住重点? | 黄金三步法

阿里妹导读:对事物的归类分组是我们人类的天性,我们的大脑会自动将发现的所有事物以某种持续组织起来。但如何组织才能帮助我们解决工作和生活中出现的各种复杂问题?今天,我们请阿里高级技...

阿里云云栖社区
2019/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring AOP-06-切入点类型

切入点是匹配连接点的拦截规则。之前使用的是注解@Pointcut,该注解是AspectJ中的。除了这个注解之外,Spring也提供了其他一些切入点类型: • 静态方法切入点StaticMethodMatcherPointcut •...

moon888
昨天
90
0
Class Loaders in Java

1. Introduction to Class Loaders Class loaders are responsible for loading Java classes during runtime dynamically to the JVM (Java Virtual Machine). Also, they are part of the ......

Ciet
昨天
68
0
以Lazada为例,看电商系统架构演进

什么是Lazada? Lazada 2012年成立于新加坡,是东南亚第一电商,2016年阿里投资10亿美金,2017年完成对lazada的收购。 业务模式上Lazada更偏重自营,类似于亚马逊,自建仓储和为商家提供服务...

春哥大魔王的博客
昨天
60
0
【自用】 Flutter Timer 简单用法

dart: void _startTime() async { _timer = Timer(Duration(seconds: sec), () { fun(xxx,yyy,zzz); }); } @override void dispose() { _timer.cancel()......

Tensor丨思悟
昨天
65
0
计算机实现原理专题--自动化(六)

目前实现的加减法器可以扩充到更高位宽的数值范围,不仅可以实现连续n个数的相加减,还可以实现其中几个数的相加减,并保存相应的结果。但是还不能应对某些场景,例如需要复用中间的临时结果...

FAT_mt
昨天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部