LI 开发日记

3.6

失败的作品-freeUI

因为其有太多复杂结构让人难以编写下去。而且类名,函数,结构均混乱,等待以后的重构。不过幸好还是留下了一些有用的经验与API。
新项目:暂时还没想好,不过应该和HTML5有关。

ok!

19:00 已经确认已「网易云」做模板,取名为「LI云音乐」。还有一张不宽的图片愣是被我拉长好多哈哈哈

效果预览

背景

20:30(我猜应该是这个时候)P图做完背景之后的效果,有3张壁纸可选
欢迎来到LI云音乐!.png

22:49 终于弄好导航栏了


主界面

3.7

10:56 LI云音乐初稿完成(滑稽)


LI云音乐初稿.png

13:34
1.主界面拖动
2.一些动画效果以及思考轮播图中

14:58
复稿完成(调整了一下色调,让其更鲜艳)


LI云音乐复稿.png

16:20
真的能放歌了,(HTML5

18:42
轮播图(顺便吃了个饭回来,有点累了)


轮播.png

19:54
电脑死机一次。。。
音乐播放、暂停音量渐变,可以获得丝滑的听觉体验哦!

20:13
再次死机,无更新

21:00
进度条以及歌曲时间(js秒化分)


进度条.png

23:00
梦游了两个小时。。。
完整的播放组件,两张新的轮播图,加了音量组件,但是还没调整好

3.8

9:43
刚吃完早饭回来,还是有点饿呃...开工

12:50
修复一些播放策略(音量阈值以及渐变),音量组件,花了大量时间在如何改变滑块颜色,未果


音量.png

12:55
中饭时间。。。顺便该换首歌了,这两天为了调试一直在听同一首歌。。。。

13:53
一些动画效果以及简化css(同化类名以及flex化,去除了N多多余的边距以及浮动)

14:08
调整了一下主界面大小以及位置
新的歌曲以及新的轮播图

15:42
找模糊壁纸找了好久,自己当美工太费时费力了
后来发现可以用css渐变实现,当然了,现在还什么都没有,接下来设计转盘

16:51
换歌,转盘设计(暂时还没弄好)
大部分时间花在P图上面了。。。为了那张唱片外壳。。。


单人旅途.png

17:30
一个棘手的问题。。。不能销毁播放界面,因为这会破坏动画
不销毁又觉得占地方。。。

17:52
吃完饭回来,逛逛NGA

20:12
电脑疯狂死机,可能用的时间太长。刚从网吧回来,现在不想开工,今天就到这里吧
明天计划:

  1. 重做登录界面
  2. 继续设计播放界面
  3. 主题功能。目前想到的有网易红白,玻璃质感,少女粉,夜间模式

23:29
加了点班,刚好停电
抛弃了之前播放界面独立成一个整体的设计,因为这么做我还需要再添加播放按钮以及进度条,而不能借用已经弄好的footer里面的组件。所以我将之调整了一下,header以及footer内容不变,仅覆盖中间的区域。另外通过css美化以后,新界面与之前界面相差无几

3.9

12:46
今天更新幅度较大

  1. 主题「玻璃」


    玻璃主题
  2. 「全屏显示」

  3. 融合界面,就是昨天晚上叙述的。增加组件利用率,减少不必要的重新设计。

14:50
梳理了一遍js,晚上再过一遍css。再次换歌


Heartbeats.png

18:20
css过了一遍。这电脑老是死机真让人恼火。等会补齐一些昨天想的主题。但愿电脑不再死机。。。如果还有时间的话就重做一下登录界面

19:45
audio.oncanplay事件。优化了加载提示。

22:48
发现网易云外链,甚喜。

23:30
优化总文件大小至3.3M,统一了一些图的大小,所有的歌曲删了。改为外链播放。

00:19
外链真的很快。4G网络下0.5s就能播放。明天继续完善播放信息以及过程
dot点加载动画,点击进度条可以直接改变进度等
最后不得不吐槽一下github校园网的速度,几K/S的速度

3.10

10:07
实在是想不出什么结构来设计后台了,要不先看看数据结构?

11:00
浏览了一圈后,还是决定先把前端的事干完。数据模型什么的,太复杂了。头晕

15:16
dot完整的动画
歌曲列表,目前一共是5首歌,等把播放列表界面做出来再截图
切换歌曲
完整的加载以及触发流程
后端还是个大问题,一首「凉凉」送给自己QAQ


凉凉.png

16:04
火狐ie兼容问题。无奈ie11不兼容箭头函数,最终失败。
火狐不支持disabled属性,导致无法更换主题,后修改为修改rel属性

17:44
2套新主题:Star和purple
优化修改主题策略与兼容,现在更改为固定加载一个default.css,然后通过修改下面的空css的src来更换主题。

22:24
重新过一遍php。

23:57
成功引入阿里图标链接,计划所有图标与音乐全部在线化

3.11

10:02
所有资源规范化
优化总大小至1.08M
主题文件更新,减少大量无用代码

10:51
想过再写一个最小化的功能,因为老是忍不住想点最小化。后来发现没什么用,就放弃了。
准备重写登录界面,正在过一遍php中。。。可能时间会较长,太久没碰了

13:10
播放模式(列表循环,单曲循环,随机播放)
正在重做登录界面。。。


再见理想.png

13:39
核心js文件全部组件化,将拖动组件?移动到了global.js。

(function(){
$(document).ready(function(){
    //准备工作
    console.log('Github网速报警系统');

    //音乐
    function({...
    }())

    //UI
    function({...
    }())

    //网络
    function({...
    }())

    //存储
    function({...
    }())

    //主题
    function({...
    }())

    //轮播
    function({...
    }())
  
}())

13:47
检验
资源规范化后,Github加载快了n倍,现在只要1.5s即可完全加载。

16:22
重做登录界面,沿用freeUI的翻转设计,登录成功就会「翻转」登录界面,显示你已经登录成功


登录成功.png

16:59
fix玻璃主题,看起来颜色更深邃一些

19:01
镜头来到了学校图书馆
因为再次死机。。。不过却发现了一个问题,除了ie之外,还有其他的兼容性问题。因为我的电脑是1080P,所以我并没有考虑到低分辨率的效果。所以在低分辨率设备上整个音乐盒偏大。图书馆电脑性能太低,回寝室等电脑CPU冷却再修改。(没错,就是每天写代码时间太长。。。)
3.12亲测浏览器可见区域只有600px。。。
目前的修改方案是按照%百分比大小来设计。
不过图书馆电脑打开github挺快。

21:03
日常死机,只能去网吧了

3:22
千呼万唤始出来
播放列表
点击音量图标静音
彻底解决主题css重复问题,具体方法是将主题分为light和dark,后续更新的新主题均需要修改很少的代码即可(之前的star主题就一直在重复这个错误)
晚上写代码效率有点低,再加上网吧键盘不顺手,所以大部分时间在梦游,不过还是坚持写完了


播放列表.png

4:13
一首「晚安」送给自己。


晚安.png

3.12

13:29
暗色的登录主题


登录主题.png

14:23
不行了,得先休息一下,感觉明显思维跟不上来,反应迟钝。

16:30
开工,精神好点了
修复一个列表点击无效的bug:
原因:在其生成之前就绑定了事件,结果无效

16:57
今日计划:
歌单
评论

18:38
歌单


歌单.png

20:17
在图书馆把所有的readme改了一遍,舒服多了

3.13

9:00
精神好了很多,吃完早餐开工

13:30
MV
融合音乐与MV写法,现统一为media方法,但是对细节也进行了区分。


MV.png

16:08
陆陆续续的修正media部分方法
进度条点击现在可以立即跳转
接下来的想法:
弹幕,歌曲评论,MV界面优化,小分辨率优化

21:04
小分辨率优化,现在会自动缩放
MV界面。。。我尽力了,然而还是想不出怎么排才好看
而且我发现网易云会经常更换mv地址,目前无法破解
评论界面
弹幕放弃了


评论.png

21:58
从3.6开始,差不多每天写8+小时,历时7天。突然就结束了,嗯,不过过程还是很完美的。
Github地址
好吧,完结了,撒花!
嘤嘤嘤
人生若只如初见,何事秋风悲画扇。
等闲变却故人心,却道故人心易变。

你可能感兴趣的:(LI 开发日记)