CN107066178A - 一种实现手机app列表动画展现的方法 - Google Patents

一种实现手机app列表动画展现的方法 Download PDF

Info

Publication number
CN107066178A
CN107066178A CN201710050856.3A CN201710050856A CN107066178A CN 107066178 A CN107066178 A CN 107066178A CN 201710050856 A CN201710050856 A CN 201710050856A CN 107066178 A CN107066178 A CN 107066178A
Authority
CN
China
Prior art keywords
list
mobile phone
uitableviewcell
user
tableviewcell
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710050856.3A
Other languages
English (en)
Inventor
侍国华
亓波
程林
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Business System Co Ltd
Original Assignee
Shandong Inspur Business System Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Business System Co Ltd filed Critical Shandong Inspur Business System Co Ltd
Priority to CN201710050856.3A priority Critical patent/CN107066178A/zh
Publication of CN107066178A publication Critical patent/CN107066178A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Processing Or Creating Images (AREA)
  • Information Transfer Between Computers (AREA)
  • Telephone Function (AREA)

Abstract

本发明特别涉及一种实现手机APP列表动画展现的方法。该实现手机APP列表动画展现的方法，在控制器中导入自定义的UItableViewCell，通过UItableViewCell的代理方法获得用户对UItableViewCell的操作，当用户事件是点击APP列表的时候，改变cell的形变，从而使APP列表显示出动画展现的效果。该实现手机APP列表动画展现的方法，通过为手机APP列表添加动画效果，不仅可以为手机产品增色，给用户带来惊喜，还能使手机产品在众多的品牌中保持一定的差异化，提高产品的市场竞争力。

Description

一种实现手机APP列表动画展现的方法
技术领域
本发明涉及手机APP列表展示技术领域，特别涉及一种实现手机APP列表动画展现的方法。
背景技术
跟着智能手机的迅速推广和应用，如今大多数的手机用户都现已换上了智能手机。无论是IOS系统还是Android系统，用户期望的依然是更便捷的阅览办法。现如今，传统的阅览器访问现已无法满足用户需求，所以各式各样的手机APP应运而生。
由于大多数智能手机原生开发提供的功能比较单一，APP列表展示的动画效果简单，干脆利落直截了当。但是同时，这种展现方式又让用户觉得冰冷，单调，缺乏感情色彩，用户体验较差，不能满足用户日益增长的个性化要求。
基于此，本发明提出了一种实现手机APP列表动画展现的方法，为手机APP列表添加动画效果。不仅可以为手机产品增色，给用户带来惊喜，还能使手机产品在众多的品牌中保持一定的差异化，提高产品的市场竞争力。
发明内容
本发明为了弥补现有技术的缺陷，提供了一种简单高效的实现手机APP列表动画展现的方法。
本发明是通过如下技术方案实现的：
一种实现手机APP列表动画展现的方法，其特征在于：在控制器中导入自定义的UItableViewCell，通过UItableViewCell的代理方法获得用户对UItableViewCell的操作，当用户事件是点击APP列表的时候，改变cell的形变，从而使APP列表显示出动画展现的效果。
所述动画展现的效果是指当用户点击滑动APP列表时产生弹簧效果，弹簧形变大小和滑动速度有关，根据用户滑动列表所产生的距离和滑动速度，通过这两个值的比例设置UITableViewCell的形变量；若采取上滑手势，则改变cell的上边距，若采取下滑手势，则改变cell的下边距，通过cell的外观变化实现APP列表的动画展现。
所述UITableViewCell是构建一个UITableView的基础，UITableViewCell内部的UIView控件作为其他内容的容器，上面有一个UIImageView和两个UILabel，通过UITableViewCellStyle属性可以对其样式进行控制。
所述动画展现的效果通过tableManager和tableviewcell来实现，通过tableManager来管理tableview和tableviewcell；在tableManager中声明代理方法和属性，tableviewcell重写系统cell，在控制器中实现tableManager和tableviewcell的代理方法，将用户滑动列表时产生的速度传给tableManager和tableviewcell，从而实现根据滑动速度产生不同的形变量。
本发明的有益效果是：该实现手机APP列表动画展现的方法，通过为手机APP列表添加动画效果，不仅可以为手机产品增色，给用户带来惊喜，还能使手机产品在众多的品牌中保持一定的差异化，提高产品的市场竞争力。
具体实施方式
为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合实施例，对本发明进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
该实现手机APP列表动画展现的方法，在控制器中导入自定义的UItableViewCell，通过UItableViewCell的代理方法获得用户对UItableViewCell的操作，当用户事件是点击APP列表的时候，改变cell的形变，从而使APP列表显示出动画展现的效果。
所述动画展现的效果是指当用户点击滑动APP列表时产生弹簧效果，弹簧形变大小和滑动速度有关，根据用户滑动列表所产生的距离和滑动速度，通过这两个值的比例设置UITableViewCell的形变量；若采取上滑手势，则改变cell的上边距，若采取下滑手势，则改变cell的下边距，通过cell的外观变化实现APP列表的动画展现。
所述UITableViewCell是构建一个UITableView的基础，UITableViewCell内部的UIView控件作为其他内容的容器，上面有一个UIImageView和两个UILabel，通过UITableViewCellStyle属性可以对其样式进行控制。
所述动画展现的效果通过tableManager和tableviewcell来实现，通过tableManager来管理tableview和tableviewcell；在tableManager中声明代理方法和属性，tableviewcell重写系统cell，在控制器中实现tableManager和tableviewcell的代理方法，将用户滑动列表时产生的速度传给tableManager和tableviewcell，从而实现根据滑动速度产生不同的形变量。
本实施例中，动画展现的效果是使用macOS系统的xcode工具实现的，运行在iPhone模拟器上，对原生APP开发进行了自定义修改实现弹簧效果。
在UITableView中数据只有行的概念，并没有列的概念，UITableView中每行数据都是一个UITableViewCell。在这个控件中为了显示更多的信息，iOS已经在其内部设置好了多个子控件以供开发者使用。如果我们查看UITableViewCell的声明文件可以发现在内部有一个UIView控件（contentView，作为其他元素的父控件）、两个UILable控件（textLabel、detailTextLabel）、一个UIImage控件（imageView），分别用于容器、显示内容、详情和图片。UITableView中可以获取列表滑动时的距离，本方案就是通过计算用户滑动列表的速度，和滑动距离计算出来的值，把这个值作为参数传递给自定义的tableviewcell，拿到这个值改变cell的形变量。
手机列表是手机中最常见的数据展示控件，列表可以丰富的展示各种数据，例如QQ、微信用的好友列表，聊天界面都是用列表来展示的。原生提供的列表用法单一，界面简单，制作出来的APP很枯燥，不能吸引用户。该实现手机APP列表动画展现的方法就是对原生列表进行了自定义，根据用户的点按和滑动操作，是列表的每行产生形变，还会根据列表滑动的速度显示不同的形变。这样是APP的交互性更强，提高APP的用户体验。

Claims (4)

1.一种实现手机APP列表动画展现的方法，其特征在于：在控制器中导入自定义的UItableViewCell，通过UItableViewCell的代理方法获得用户对UItableViewCell的操作，当用户事件是点击APP列表的时候，改变cell的形变，从而使APP列表显示出动画展现的效果。
2.根据权利要求1所述的实现手机APP列表动画展现的方法，其特征在于：所述动画展现的效果是指当用户点击滑动APP列表时产生弹簧效果，弹簧形变大小和滑动速度有关，根据用户滑动列表所产生的距离和滑动速度，通过这两个值的比例设置UITableViewCell的形变量；若采取上滑手势，则改变cell的上边距，若采取下滑手势，则改变cell的下边距，通过cell的外观变化实现APP列表的动画展现。
3.根据权利要求2所述的实现手机APP列表动画展现的方法，其特征在于：所述UITableViewCell是构建一个UITableView的基础，UITableViewCell内部的UIView控件作为其他内容的容器，上面有一个UIImageView和两个UILabel，通过UITableViewCellStyle属性可以对其样式进行控制。
4.根据权利要2所述的实现手机APP列表动画展现的方法，其特征在于：所述动画展现的效果通过tableManager和tableviewcell来实现，通过tableManager来管理tableview和tableviewcell；在tableManager中声明代理方法和属性，tableviewcell重写系统cell，在控制器中实现tableManager和tableviewcell的代理方法，将用户滑动列表时产生的速度传给tableManager和tableviewcell，从而实现根据滑动速度产生不同的形变量。
CN201710050856.3A 2017-01-23 2017-01-23 一种实现手机app列表动画展现的方法 Pending CN107066178A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710050856.3A CN107066178A (zh) 2017-01-23 2017-01-23 一种实现手机app列表动画展现的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710050856.3A CN107066178A (zh) 2017-01-23 2017-01-23 一种实现手机app列表动画展现的方法

Publications (1)

Publication Number Publication Date
CN107066178A true CN107066178A (zh) 2017-08-18

Family

ID=59598852

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710050856.3A Pending CN107066178A (zh) 2017-01-23 2017-01-23 一种实现手机app列表动画展现的方法

Country Status (1)

Country Link
CN (1) CN107066178A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109977164A (zh) * 2019-04-01 2019-07-05 时代数媒科技股份有限公司 一种基于数据驱动的移动端列表开发方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2045700A1 (en) * 2007-10-04 2009-04-08 LG Electronics Inc. Menu display method for a mobile communication terminal
CN104636136A (zh) * 2015-01-12 2015-05-20 沈文策 基于iOS系统中UITableView类型Plain模拟Group的方法
CN105022567A (zh) * 2014-04-30 2015-11-04 惠州市德赛西威汽车电子股份有限公司 一种通过鼠标拖拽滑动切换界面的方法
CN106095283A (zh) * 2016-06-07 2016-11-09 深圳市航盛电子股份有限公司 一种安卓ListView弹性移动方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2045700A1 (en) * 2007-10-04 2009-04-08 LG Electronics Inc. Menu display method for a mobile communication terminal
CN105022567A (zh) * 2014-04-30 2015-11-04 惠州市德赛西威汽车电子股份有限公司 一种通过鼠标拖拽滑动切换界面的方法
CN104636136A (zh) * 2015-01-12 2015-05-20 沈文策 基于iOS系统中UITableView类型Plain模拟Group的方法
CN106095283A (zh) * 2016-06-07 2016-11-09 深圳市航盛电子股份有限公司 一种安卓ListView弹性移动方法

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
KENSHINCUI: "iOS开发系列--UITableView全面解析", 《HTTPS://WWW.CNBLOGS.COM/KENSHINCUI/P/3931948.HTML》 *
ONEV"S DEN: "WWDC 2013 Session笔记-iOS7中弹簧式列表的制作", 《HTTP://WWW.COCOACHINA.COM/ARTICLES/7042》 *
ZHF_ZACHARIAH: ""iOS-UITableViewCell的动画效果(一)"", 《HTTPS://WWW.JIANSHU.COM/P/15878D86E463》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109977164A (zh) * 2019-04-01 2019-07-05 时代数媒科技股份有限公司 一种基于数据驱动的移动端列表开发方法

Similar Documents

Publication Publication Date Title
CN107728905A (zh) 一种弹幕显示方法、装置及存储介质
CN107705193A (zh) 定制商品的展示方法和系统
CN105867931B (zh) 信息展示界面的变更方法和装置
Staiano Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop
CN105938409A (zh) 使用即时消息服务以显示图释的方法及其用户装置
US20160103820A1 (en) Authoring tool for the authoring of wrap packages of cards
WO2016057738A1 (en) Card based package for distributing electronic media and services
CN105103111A (zh) 用于计算设备的用户界面
CN103543925B (zh) 一种操作图片的方法和装置
CN110088718A (zh) 动态生成的界面转换
CN104484810A (zh) 一种基于陶瓷云的陶瓷产品个性化在线定制系统
CN106658204A (zh) 一种视频直播弹幕播放方法及系统
CN109391848A (zh) 一种互动广告系统
CN107294835A (zh) 一种即时通讯中的文件发送方法及装置
Sun et al. 3d-gpt: Procedural 3d modeling with large language models
CN107066178A (zh) 一种实现手机app列表动画展现的方法
CN106878799A (zh) 一种动画显示方法及装置
CN107168606B (zh) 对话框控件显示方法、装置及用户终端
CN114020394A (zh) 图像显示方法、装置及电子设备
CN106790369A (zh) 一种多媒体应用界面装扮方法及装置
US11625869B2 (en) Stroke tapestry methods and systems
CN108228036B (zh) 一种windows中窗口菜单的实现方法及装置
Sosa-Tzec Design tensions: interaction criticism on Instagram's mobile interface
CN112807688A (zh) 游戏内表情设置方法、装置、处理器及电子装置
Morson Learn design for iOS development

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20170818