侧边栏壁纸
博主头像
钱学超博主等级

火星人,1万小时法则的忠实拥趸。技术宅,象棋和羽毛球爱好者,马拉松PB成绩:4小时零8分。坚持认为算法是计算机的灵魂。喜欢解决问题,喜欢手工,喜欢与朋友们聊天喝酒吹牛X。

  • 累计撰写 64 篇文章
  • 累计创建 352 个标签
  • 累计收到 74 条评论
标签搜索

目 录CONTENT

文章目录

一款使用手势进行控制的相册诞生记

钱学超
2022-06-10 / 0 评论 / 0 点赞 / 637 阅读 / 1,390 字 / 正在检测是否收录...

先看效果:

  1. 谁家现在还没有个几万张照片呢?
  2. 发现一个问题,我家照片全都保存到Nas上了,花了3K多,但是还是没有时间,或者想不起来挨个去翻看。
  3. 虽然我这个博客,也是用nas做的,但不得不承认,买Nas的初衷,就是为了存储照片。
  4. 所以搞一块屏幕,专门当做照片墙,随时随地播放照片,嗯。就像屏保一样。
  5. 试了一下,使用macbook,将照片设置为屏保,效果是真的不错。但是macbook好贵啊,我买了一个Tx3,4+64G的,准备用它来替代macbook屏保。
  6. 嗯,之所以感觉macbook屏保效果好,是因为几个原因:
    1. 照片有动画效果,竖屏的左右滑动,横屏的缓慢放大、缩小
    2. 照片切换平滑,淡入淡出效果非常棒。
    3. 照片随机显示,你不知道你要看的下一张照片是什么时间的。
    4. 可以控制要显示照片的属性。
  7. 我们要实现同样的效果,并且要比苹果的屏保还要棒!因为它只是屏保,我们要做一款产品。
  8. 思考一下改进点。
    1. 屏保只能显示照片,有时候看到照片也不知道是什么时候照的,在什么地方照的。
    2. 照片切换是随机的,每一张照片的显示时间都是固定的,如果突然看到一张照片,勾起了部分回忆,刚想起来一些东西,照片划走了。
    3. 看到一张照片,想看看同一天照的其他照片,或者同一时期照的照片,没有办法去找到它。
    4. 屏保只能使用文件作为源,不能使用nas,或者云存储空间作为来源。(nas映射本地也行,但是过程比较繁琐,且不容易更改)
  9. 因此,我们规划一款产品,用Nas作为照片存储器,用于家庭照片不间断展示,同时有较强的操控性。而家庭展示照片,最佳地点就是餐厅,大家团座一起,边吃饭聊天,边看过去的照片,看到好看的,可以随时停下来讨论一下。
  10. 操控要方便,就不能借助设备,比如手机,遥控器,鼠标键盘等等。所以可选方案有声音、摄像头两种方式。
  11. 考虑到语音识别需要较大声音(人与终端的距离),如果吃饭的时候突然喊一嗓子,有点不太利于消化。所以这部分只能采用摄像头进行图像识别控制app行为了。
  12. 可以配置照片显示的行为,比如每张照片显示的时间长短等等。
  13. 考虑到一屏多用,可以给照片显示的同时,增加一个显示时间的部件,照片墙可以作为时钟使用。
  14. 屏幕应该有两个模式,随机播放模式,按顺序播放模式。随机播放就跟屏保一样,但是看到某一张,暂停的时候,就应该进入这张照片的顺序播放序列。上一张,下一张可以随时翻看。并且翻看的时候,需要可以看到照片的拍摄时间,拍摄地点等等。
  15. 手势识别的话,暂停、上一张、下一张、继续播放。基本就足够了。
  16. 照片的列表展示,需要美观漂亮,借鉴了群晖photos的样式。实现起来还比较费劲呢。踩了不少坑。
  17. 整体来说,制作过程还是比较愉快的,就是耗时有点长,一个多月,改改停停的,废话少说,来吧,展示!

SM901_ScreenShot_20220610_2

列表页的这个也有点小难度,每天排成一个组,这一组当中,可能会有很多行,每一行的照片数量不一样,但是整体的宽度都一模一样,宽高比例都是按照原照片缩小而成的。当一组照片有很多行的时候,这个就不太好计算。

SM901_ScreenShot_20220610_3

SM901_ScreenShot_20220610_4

为了区分顺序播放模式和随机播放模式,这里设计了顺序播放的切换方式为左右切换。随机播放模式的切换方式为淡入淡出。

SM901_ScreenShot_20220610

SM901_ScreenShot_20220610_1

下面这个设置就比较有意思了。列表页是否显示导航栏这种,bool型变量很容易做成点击生效的。但是比如自动播放前的等待时间,照片预下载数量等,就不太好点击选择。但是如果要做成键盘输入的话,你用过电视遥控器,就知道那是一件多么痛苦的事情了。所以这块专门设计了一个可选的数量点击设置工具。前面选择大差不差的数字,后面加减微调。长按还可以刷刷刷的变化。

SM901_ScreenShot_20220610_5

SM901_ScreenShot_20220610_6

最后附上一张靓照,露个脸。

image-1654872814192


0

评论区