美文网首页iOSiOS资源库iOS技能收藏
模仿QQ音乐的播放器demo

模仿QQ音乐的播放器demo

作者: KKKKaras | 来源:发表于2015-09-25 16:48 被阅读1221次

    先上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

    另外最近打算去深圳发展,看到文章的同道们,有机会的话可以联系我哈~

    相关文章

      网友评论

        本文标题:模仿QQ音乐的播放器demo

        本文链接:https://www.haomeiwen.com/subject/roqwcttx.html