采用Cover Flow缩略设计 iPad商店曝光_中国经济网??国家经济门户
商务进行时
&&&&&&&&&&&&&&&&&&&&Cover Flow基本原理及Tapku实现方法
招聘信息：
本文由论坛会员分享
Cover Flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。如下图所示：
从图中可以看到，显示在中间的图片为目标图片，两侧的图片在y轴都旋转了一定的角度，并且每两张图片之间都保持了一定的距离。在交互（如点击两侧的图片）的时候，滑动到中间的图片会逐渐放大，旋转的角度由原来的旋转角度a变为0，且位置上移动中间，变成新的目标图片；同时原处于中间位置的图片则缩小、旋转一定的角度、位置偏移到一侧。所以在整个过程中，主要有两个属性发生了变化：角度与位置(缩放只是视觉上的，并没有进行缩放操作)。
在每次点击一张图片时，如果这张图片在目标图片的左边，则所有的图片都会向右移动，同时做相应的旋转；相反，点击目标图片右侧的图片时，所有图片都会向左移动并做相应的旋转。
从如上描述的效果，可以看出在Cover Flow中最主要的的操作有两个：3D仿射变换与动画。仿射变换实质上是一种线性变换，通常主要用到的仿射变换有平移(Translation)、旋转(Rotation)、缩放(Scale)。
对于这两种操作，iOS都提供了非常简便的接口来实现。接下来我们便以tapku的实现方法为例，来说明实现Cover Flow的基本过程。
一、图片的布局
从效果图可以看出，图片是按一条直接排列，图片与图片之间有一定的间距，目标图片是正向显示，两侧的图片则按一定的角度进行了旋转，与目标图片形成一定的角度。同时我们还能看到每个图片都有一个倒影，并且这个倒影是渐变的，由上而下逐渐透明度逐渐减小。
1、 Cover Flow单元的定义
在tapku中，每一个图片附属于一个视图(TKCoverflowCoverView)，这个视图相当于UITableViewCell，它包含了三个要素：图片(imageView)，倒影图片(reflected)，渐变层(gradientLayer)。渐变层覆盖于倒影图片上，且大小位置一致。
TKCoverflowCoverView的声明及布局代码如下所示：
@interface TKCoverflowCoverView : UIView {
UIImageView *imageV
UIImageView *
CAGradientLayer *gradientL
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];
self.layer.anchorPoint = CGPointMake(0.5, 0.5);
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.width)];
[self addSubview:imageView];
reflected = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.frame.size.width, self.frame.size.width, self.frame.size.width)];
reflected.transform = CGAffineTransformScale(reflected.transform, 1, -1);
[self addSubview:reflected];
gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithWhite:0 alpha:0.5].CGColor,(id)[UIColor colorWithWhite:0 alpha:1].CGColor,nil];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 0.4);
gradientLayer.frame = CGRectMake(0, self.frame.size.width, self.frame.size.width, self.frame.size.width);
[self.layer addSublayer:gradientLayer];
注意：此次将视图的锚点(anchorPoint属性)设置为(0.5, 0.5)，即视图的中心点，目的是让视图以中心点为基点进行旋转。
在进行仿射变换时，视图作为一个整体进行变换。
2、图片的布局
tapku中，图片的布局与交互是在TKCoverflowView类中完成的。类TKCoverflowView继承自UIScrollView，相当于是TableView。
该类中定义是两个仿射变量：
CATransform3D leftTransform, rightTransform
这两个变量分别设置了两侧图片的仿射变换，具体的设置方法为
- (void) setupTransforms{
leftTransform = CATransform3DMakeRotation(coverAngle, 0, 1, 0);
leftTransform = CATransform3DConcat(leftTransform,CATransform3DMakeTranslation(-spaceFromCurrent, 0, -300));
rightTransform = CATransform3DMakeRotation(-coverAngle, 0, 1, 0);
rightTransform = CATransform3DConcat(rightTransform,CATransform3DMakeTranslation(spaceFromCurrent, 0, -300));
其中coverAngle为旋转的角度。对每个仿射变量同时设置了旋转也平移变换。
Cover Flow单元是存储在一个数组中：
NSMutableArray *coverV
初始化时设置数组的大小，并存入空对象。在后期获取某个索引位置的单元时，如果该单元为空，则生成一个新的TKCoverflowCoverView并放入相应位置。
if([coverViews objectAtIndex:cnt] == [NSNull null]){
TKCoverflowCoverView *cover = [dataSource coverflowView:self coverAtIndex:cnt];
[coverViews replaceObjectAtIndex:cnt withObject:cover];
每个Cover Flow单元的位置计算如下
CGRect r = cover.
r.origin.y = currentSize.height / 2 - (coverSize.height/2) - (coverSize.height/16);
r.origin.x = (currentSize.width/2 - (coverSize.width/ 2)) + (coverSpacing) *
cover.frame =
其中currentSize,coverSize,coverSpacing都是固定值。从中可以看出所有单元的y值都是一样的，而x值则与其在数组中的索引值相关，索引越大，x值也越大。而这就涉及我们之后的一个问题。一会再讲。
假定目标图片的索引为currentIndex，则目标图片两侧的仿射属性设置如下：
if(cnt > currentIndex){
cover.layer.transform = rightT
cover.layer.transform = leftT
如上即为Cover Flow的基本布局，可以与UITableView比较一下。
Cover Flow的基本交互是点击两侧的图片，则被点击的图片成为新的目标图片并移动中屏幕中间，而其它图片一起移动，在这个过程中所需要做的就两件事：旋转与平移。
方法很简单：在动画块中重新设置Cover Flow单元的transform属性，这样就可以缓动实现这个动画的过程。实际上只有新旧目标图片及中间的图片需要做这种变换，其余图片的transform属性都是不变的。
float speed = 0.3;
[UIView beginAnimations:string context:nil];
[UIView setAnimationDuration:speed];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
for(UIView *v in views){
int i = [coverViews indexOfObject:v];
if(i < index) v.layer.transform = leftT
else if(i > index) v.layer.transform = rightT
else v.layer.transform = CATransform3DI
[UIView commitAnimations];
但这在做的只是旋转了Cover Flow的内容，并没有对Cover Flow进行水平平移，Cover Flow水平位置已由其origin.x值固定。那么水平上的平移是如何实现的呢，我们看下面的代码：
- (void) snapToAlbum:(BOOL)animated{
UIView *v = [coverViews objectAtIndex:currentIndex];
if((NSObject*)v!=[NSNull null]){
[self setContentOffset:CGPointMake(v.center.x - (currentSize.width/2), 0) animated:animated];
[self setContentOffset:CGPointMake(coverSpacing*currentIndex, 0) animated:animated];
其所做的就是以目标图片为中心，整体平移TKCoverflowView视图。
由上可以看出，Cover Flow特效的原理很简单：对新旧目标图片及中间的图片以动画的形式做仿射变换。至于仿射变换如何处理，有不同的方法。tapku所实现的方法可以说相对简单灵活。
Android, Flash都有类似的Cover Flow特效实现方法，有兴趣的童鞋可以参考一下。
原帖地址：
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量9363点击量7437点击量7366点击量4540点击量4096点击量3799点击量3254点击量3139点击量2806
&2016 Chukong Technologies,Inc.
京公网安备89继续完善Mac系统 苹果获得CoverFlow专利
来源：pconline 原创&
责任编辑：luofushan&
　　【PConline 资讯】苹果今日已对媒体发送了新品发布会的邀请函，发布会上的一大主角便是新品MacBook系列和OS X Mavericks系统。虽然新版OS X系统将发布，但苹果并没有停止其脚步。美国专利商标局公布了苹果获得的一项关于Mac系统的新专利，这项专利的编号为NO.8,560,960，名为&浏览并与打开窗口进行互动&，指代的是一种浏览网页或程序窗口的新方式。实际上，苹果新专利描述的就是一种与Cover Flow极其相似的3D浏览方式。Cover Flow浏览方式　　苹果在专利文件中表示，类Cover Flow的浏览体验将会出现在桌面系统上。也就是说，未来的Mac很可能会出现一种全新的界面，用户在浏览网页或应用程序时的视觉将会更为丰富。Cover Flow目前主要运用在苹果的iTunes商店当中。比如App Store，用户一打开主页就可以在顶部看到这一种设计。　　不过专业申请是一回事，实际应用又是一回事。目前我们还不知道苹果是否会将这一技术运用到实现产品中来。如果以后你购买的Mac拥有一个类似Cover Flow的浏览界面，你是否喜欢呢？目前越来越多的消息称未来的OS X将会采用如今iOS 7的扁平风格，假如配上Cover Flow，不知道会是一种什么样的体验？相关阅读:绝不食言 黑莓CEO表示iOS版BBM即将来临为迎接Mavericks 苹果更新Mac版Java 6iOS版GoogleMaps更新 新添驾驶小提示邀请函来了！Mavericks将随iPad5同发布汽车商力挺！通用汽车将推SiriEyesFree&
相关软件：
大小：57.26 MB
授权：免费
大小：791.38 MB
授权：共享孩子被绑在父亲腰间，骑摩托车400多公里跋涉回家。
得知儿子即将与她团聚，老人感动的泣不成声。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　&!DOCTYPE html& &html lang=&en&& &head& &meta charset=&UTF-8&& &title&coverflow-demo&/title& &style& div.innerWrapper{ perspective: 300 width: 600 height: 300 margin: 100 display: align-items:flex- background-color: #000; overflow: padding-top: 5%; } div.cover{ height: 50%; flex-grow:1; transition: all .5 background-size: 100% 100%; background-repeat:no- margin: 0; -webkit-box-reflect:below 5% linear-gradient(transparent, white); border: 1px solid # } div.cover:nth-child(1){ background-image: url('covers/computergraphics-album-covers-2014-15.jpg'); } div.cover:nth-child(2){ background-image: url('covers/Funkadelic-Maggot-Brain-album-covers-billboard-.jpg'); } div.cover:nth-child(3){ background-image: url('covers/Green-Day-American-Idiot-album-covers-billboard-.jpg'); } div.cover:nth-child(4){ background-image: url('covers/insurgency-digital-album-cover-design.jpg'); } div.cover:nth-child(5){ background-image: url('covers/Pink-Floyd-Dark-Side-of-the-Moon-album-covers-billboard-.jpg'); } div.cover:nth-child(6){ background-image: url('covers/sonic-quiver-time-and-space1-.jpg'); } div.cover:nth-child(7){ background-image: url('covers/tumblr_inline_nydppi1Mp91t7tdyh_500.jpg'); } button[required='required']{ background-color: #000; } &/style& &/head& &body& &div class='container'& &div class=&innerWrapper&& &div&&/div& &div&&/div& &div&&/div& &div&&/div& &div&&/div& &div&&/div& &div&&/div& &/div& &/div& &button required='required'&222&/button& && ;(function(parent){ var cards = parent.querySelectorAll('div'), coverCount = cards.length, middleIndex = (coverCount-1)/2, middleCover = cards[middleIndex], parentWidth = middleCover.parentNode.clientWidth, currentIndex = middleI var maxRotate = 42, stepper = maxRotate/middleIndex, maxZIndex = middleIndex + 1; var rotateReg = /rotateY\((\-?\d{1,3}\.?\d*)deg\)/, translateReg = /translateX\((\-?\d{1,3}\.?\d*)px\)/; // for(var i = 0; i&coverC i++){ var elem = cards[i]; elem.classList.add('cover'); elem.style.transform = 'translateX(0px) rotateY(' + (maxRotate-(i*stepper).toFixed(0)) + 'deg)'; elem.style.flexGrow = 1; if(i&middleIndex){ elem.style.zIndex = i+1; }else if(i == middleIndex){ elem.style.zIndex = i+1; elem.style.flexGrow = 2; }else{ elem.style.zIndex = coverCount - } } function move(direction){ if(currentIndex==(direction=='right'?0:coverCount-1)) direction=='right'?currentIndex--:currentIndex++; maxZIndex++; [].forEach.call(cards, function(element, index) { var previousRotate = parseInt(element.style.transform.match(rotateReg)[1]); var previousTranslate = parseInt(element.style.transform.match(translateReg)[1]); // translateX + 80 px one right button is clicked var currentRotate, currentT if(direction=='right'){ currentRotate = previousRotate- currentTranslate = previousTranslate+(parentWidth/(coverCount+1)); }else{ currentRotate = previousRotate+ currentTranslate = previousTranslate-(parentWidth/(coverCount+1)); } element.style.transform = 'translateX(' + currentTranslate + 'px) rotateY('+ currentRotate +'deg)' // element.style.zIndex = if(index == currentIndex){ element.style.flexGrow = 2; element.style.zIndex = maxZI }else{ element.style.flexGrow = 1; } }); } document.addEventListener('keyup', function(e){ if(e.which == 37){ move('right'); }else if(e.which == 39){ move('left'); } }) })(document.querySelector('.innerWrapper')); &/& &/body& &/html&
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：}