“LovelyWeather”的总结介绍

一、“LovelyWeather”应用简介

“LovelyWeather”这款App是一款轻型天气相关的应用,能查询大部分城市的天气情况与气温变化,同时能够根据当前天气状况查询一些简易的生活信息,方便日常出行。

整个App应用的核心设计理念就是用最少的操作获取最多的信息,同时还要有个养眼舒适的界面,让界面上的一些元素不再是冷冰冰的数据,而是能够和使用者产生良好互动的活性元素。同时各个交互之间又存在意识上的层级关系,从当前的地表到无限星空,尽力用简约的方式营造出立体的视图感受。


二、项目成果展示

             

 App的启动画面 

  

 app的首页

       

app中下雨时场景的转换                        

 

侧滑栏划开的左边视图

                                                          

首页的详情页面


   

个人中心页面

        

个性标签页面                                                       

 生活指数弹出画面


三、项目完成内容的具体介绍

整体架构:

整体上每个小模块的实现用了MVC的设计模式,将数据请求与传递,与视图的显示有机的统一在一起。共实现了天气情况首页、左侧滑栏、个人中心、和个性签名4个模块。此应用用了很多关键帧动画是页面的元素的能够生动展现的前提。

页面结构主体上分为2大块,一个是天气页面,一个是菜单页面。菜单页面和主页面之间的切换用侧滑栏实现。

其中,天气情况的视图共分了三个层次,分别是底层背景动画层,中间天气详情显示层 最上层生活指数层。最上层的数据在开始是隐藏的,当点击出现的时候会变为显示,并将中间层页面弹出去。让页面的表达情况更加丰富,传递的信息更加详实。

菜单界面共实现了2个下层视图,分别是个人中心和个性签名。均用模态视图方式弹出。采用了不同的弹出效果。

个人中心页面中用点击手势弹出页面,实现昵称等个人信息的修改。还有利用UIPickerView实现天气心情的修改。

个人标签中用了一组动画,实现了动态显示个性标签。不同的点击事件会有不同的点击效果。

菜单页面自定义了一个父类是UIIMageView的控件,用来显示图标的点击的波纹效果。

细节技术点:

1、开场动画,用新建的视图控制器LanuchViewcontroller在Appdelegate中获取主window,然后再此控制器中完成关键帧动画。在动画结束的Block中调用将keyWindow给主页视图。也就是给侧滑栏类的Viewcontroller。

2、侧滑栏,原理是封装一个容器类的视图控制器,作为中间视图和左右侧滑控制器的容器。本应用只用了左侧滑效果,为更好的实现主题相符的动画效果,在侧滑中将中心视图控制器加入了放大缩小效果。在此引用了一个YRSideViewController的第三方的类。

3、主页效果介绍:整个主页的各个部分都充分的匹配了不同时间段的不同效果。同时也匹配了不同天气下的不同效果。主要分为以下几个部分:

a、背景层,分为四大时段:早晨、中午、傍晚和夜晚。每个时段都有不同的背景风景图,而且还实现了同一时段下的不同风景图的切换。

b、天气层,分为三大类:白天、晚上和特殊天气(雨、雪)。分别适配了不同的动画,当天气变化会引起相应的动画效果的改变。

要实现这两层的视图效果,首先封装了一个时间段判断的类,可以自己设定我要选择的时间段。此类是用的类目文件直接扩展的NSObject的方法,十分实用。此时间段判定类作为第一层判定条件,用于判定四大时段的背景图片,同时分出白天和傍晚。

其次,是天气的判定。我是直接采用利用AFNetworking请求下来的数据来判定天气效果的,通过解析分解出来的天气情况,用此天气的字符串做为判定的关键字,当满足 isEqualtoString:时即调用当前的效果。通过以上2层判定来确定每个时段的相应的动画效果。

动画的实现:大量使用了关键帧动画,CAKeyFrameAnimation,实现了云的左右漂浮和太阳(月亮)的轻微摇晃。同时,使用【UIViewanimateWithDuration:】动画实现下雨和下雪的效果。在这其中雨点位置是随机生成的,尽力接近真实。

c、切换城市用了一个MXPullDownMenu.h的第三方的类,能够通过添加数组的方式加入城市。同时自定义此菜单的出现动画,用导航栏上的自动以button的点击事件实现此菜单的出现和消失。在被切换的的协议方法中添加一个通知,此通知用来调用刷新数据的方法。

d、天气页面的分层情况:

1、底层天气显示层,中层数据显示层,上层生活指数层,此三层首先显示的是底层天气和数据显示层,当手势点击在屏幕下方的时候最上层的弹出,数据显示层隐藏,底层显示被模糊。此处实现,在底层上创建子视图的遮罩,利用透明度的变化形成遮罩。达到模糊的效果。

2、在上层生活指数是用一个UITableview实现的,同时应用了一个DXAlertView.h的第三方类,有特效的AlertView来显示,不同生活指数的详情。


        总结:在此次App应用的制作过程中,并没有参考模板,自己天马行空的想到哪儿做到哪儿。历时数10天勉强实现了其中大部分的功能,但是十分遗憾的是没有详尽的规划和开发文档最后想的太多实现的太少。没有达到自己预想的效果。还有第三方框架使用最好使用轻量级的,能够自己修改其中的数据的,这样便于自己控制自我特殊定制的功能。而且当程序Crash的时候调试要简单的多。开发的知识是学不完的但是学到的知识长期不用就会很容易忘记,所以最终的结果还是edcoding的越多,开发的越简单。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值