先上GIF动图。
gif界面 原版界面首先题主不是处女座,demo的重心,也是放在了左右手势的动画以及歌词处理上,播放逻辑上暂时只有播放功能。。
层级整个demo也并不是很完美,比如背景的模糊处理上,为了达到QQ的效果,最早使用了自带滤镜的高斯模糊,但是效果一般。只能在图片背景层上面 又添加了一层黑色透明的0.7的view,通过2层view的透明度勉强能当个李鬼。
这个播放器界面的亮点是 左滑又滑,以及初始页面(cd封面、歌手名字)的透明度动画处理。
为了实现该效果,定义了一个 UIScrollView 。
_allScrollView=[[UIScrollViewalloc]initWithFrame:CGRectMake(0,64,WIDTH,WIDTH+44)];
//_allScrollView.backgroundColor = [UIColor redColor];
//是否支持滑动最顶端
//scrollView.scrollsToTop = NO;
_allScrollView.delegate=self;
_allScrollView.pagingEnabled=YES;
[_allScrollViewsetContentOffset:CGPointMake(WIDTH,0)];
//设置内容大小
_allScrollView.contentSize=CGSizeMake(WIDTH*3,WIDTH+44);
[self.viewaddSubview:_allScrollView];
这个UIScrollView 宽度为3个屏幕的宽度。中间的区域是留空,为需要做透明动画处理的旋转CD封面做准备的。通话代理实现中间页面的透明度动画。
滚动代理歌词处理部分详情看代码吧。
附上:https://github.com/KKKKaras/QQmusicDemo
另外最近打算去深圳发展,看到文章的同道们,有机会的话可以联系我哈~
网友评论