《Motion Design for iOS》(三十四)

构建Jakub Antalik的音乐播放器

Jakub是斯洛伐克的一名出色的设计师,已经设计了一些经常发布到Dtibbble去的非常有创造力的界面。其中一个作品非常打动我,那是一个很有趣的例子,证明了界面上每次操作一个元素的断断续续的动画是如何抓住用户的眼球的。在本指南的早期我展示了一个他设计的音乐播放器,含有一些很酷的内置动画,这里我们再看一下。





所以这里他明显使用到的技术是什么?他操纵了动画的开始时间。通过让每个元素比另一个元素慢一点动画到屏幕上的位置,并按照行的顺序操作屏幕上的每一个元素,就形成了一个非常整齐的波浪效果,感觉就像每个元素都被前一个元素用橡皮筋带动的一样。

让我们重建他音乐播放器概念的第二个屏幕:歌曲列表。

首先,我们需要重建设计来切片元素并且尽可能整齐地分开动画它们。我拉出我选择的设计工具:Photoshop,然后开始工作。musicplayer.psd文件是放置该设计文件的地方,如果你喜欢的话可以打开来检出它。我不会详细说明如何用Photoshop创建这个设计,但文件和设计都足够简单和直接。

这里是我重建的第二个屏幕的歌曲列表。





查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS

版权所有:http://blog.csdn.net/cloudox_

时间: 2024-10-22 07:55:56

《Motion Design for iOS》(三十四)的相关文章

《Motion Design for iOS》(四十六(最终章))

所以你应该使用哪个动画框架呢? 我们讨论了iOS7的弹簧动画.JNWSpringAnimation和Facebook的Pop,很自然的你会想知道该使用哪个动画框架.有一个我不是仅仅选一个动画框架并单独专注于它的原因,我想要提供一个大的关于你可以构建动画和iOS原生界面的不同方式的概览. 在我的app中,我倾向于根据不同的目的对三种框架都进行使用.如果我只是非常简单地淡出一个视图,我们直接使用基于block的UIView动画,因为它们的代码很少.如果我在做一个指数延迟类型的动画(缓慢.平稳地移动到

《Motion Design for iOS》(四十四)

我们现在真正想做的是让线动画交叉变成X.所以让我们进入我们的 didTapHamburgerButton: 方法,我们每次点击这个按钮都会调用它,来看一看我们要做什么. - (void)didTapHamburgerButton:(id)sender { if (self.hamburgerOpen) { self.hamburgerOpen = NO; // 添加把X变回三条线的动画 } else { self.hamburgerOpen = YES; // 添加把三条线变成X的动画 } }

《Motion Design for iOS》(四十二)

构建立即响应的按钮 你玩过Loren Brichter的游戏Letterpress吗?我很喜欢的Loren构建的一个关于界面的东西可能不是每个人都明显喜欢的:我喜欢每个按钮在用户按下时立即切换到一个不同的状态的样子.绝对不会延迟.这不是一个简单实现的行为,因为即使你可以将一个图片设为UIButton的UIControlStateHighlighted状态图,它也只会在点击发生后一小会启动,而且它不允许更进一步的代码来运行它.如果我想要在用户点击一个UIButton后立即运行一个动画,我就不得不自

《Motion Design for iOS》(四十五)

我们现在还剩两个动画,但它们比较大,需要一些思考.我们需要将顶部的线顺时针旋转45度(所以右边向下倾斜),然后我们需要底部的线逆时针旋转45度(所以右边向上倾斜).逆时针旋转意味着我们需要旋转一个负值,所以是-45度.当然了,动画不会接受度数值,它们需要角度值,45度在角度上是π/4.来做一些旋转动画. // 旋转顶部的线来构成X POPSpringAnimation *topRotate = [self.top.layer pop_animationForKey:@"topRotate&quo

《Motion Design for iOS》(四十)

让我们看一些简单的Pop动画时如何工作的. // 添加我们的红球到界面上 UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(300, 300, 75, 75)]; redBall.backgroundColor = [UIColor redColor]; redBall.layer.cornerRadius = 75/2; // Half the width [self.window addSubview:redBall]; P

《Motion Design for iOS》(四十一)

就如JNWSpringAnimation一样,你可以调整想要模仿的弹簧动作的属性.这里是上个例子中相关的部分. scale.springBounciness = 20.0f; // Between 0-20 scale.springSpeed = 1.0f; // Between 0-20 Pop允许你调整弹簧的弹性和速度.每个值都可以从0到20.就如iOS 7中基于block的弹簧动画一样,这些值都是算入弹簧动作方程式的真实值的一个抽象.而不同于iOS 7的是,我认为Pop在抽象这些值时做的很

《Motion Design for iOS》(四十三)

构建一个动画的汉堡按钮 汉堡按钮和滑出式菜单可能是整个产业中最两极分化的界面元素.苹果的狂热支持者反对汉堡按钮和相应的滑出式菜单,说设计师(以及工程师.产品经理和CEO们)喜欢在那堆积尽可能多的东西,因为你有了很多垂直地空间. 我不能说我不认同,因为用户测试表明用户其实不太使用滑出式菜单,但可能我是一个伪君子,因为我还是在我的iPhone app Interesting中使用了一个汉堡按钮,这样看来我也是一个问题!不论如何,如果你打算使用一个汉堡按钮,你也要让它有趣.讨喜来让人们点击. 所以一个

Android项目实战(三十四):蓝牙4.0 BLE 多设备连接

原文:Android项目实战(三十四):蓝牙4.0 BLE 多设备连接 最近项目有个需求,手机设备连接多个蓝牙4.0 设备 并获取这些设备的数据. 查询了很多资料终于实现,现进行总结. -------------------------------------------------------------------------------------------------------------------------------------------------------------

Java进阶(三十四)Integer与int的种种比较你知道多少?

Java进阶(三十四)Integer与int的种种比较你知道多少? 前言 如果面试官问Integer与int的区别:估计大多数人只会说到两点:Ingeter是int的包装类,注意是一个类:int的初值为0,Ingeter的初值为null.但是如果面试官再问一下Integer i = 1;int ii = 1; i==ii为true还是为false?估计就有一部分人答不出来了,如果再问一下其他的,估计更多的人会头脑一片混乱.所以我对它们进行了总结,希望对大家有帮助. 首先看代码: package

centos 监控cacti/nagios/zabbix 第三十四节课

centos   监控cacti/nagios/zabbix   第三十四节课 上半节课 下半节课 f