{"id":15050753,"url":"https://github.com/tigerandbull/tabanimated","last_synced_at":"2025-05-14T12:07:57.163Z","repository":{"id":37752456,"uuid":"148901420","full_name":"tigerAndBull/TABAnimated","owner":"tigerAndBull","description":"A skeleton screen loading framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)","archived":false,"fork":false,"pushed_at":"2024-09-19T10:23:09.000Z","size":40520,"stargazers_count":3401,"open_issues_count":36,"forks_count":538,"subscribers_count":56,"default_branch":"master","last_synced_at":"2025-05-10T00:11:07.207Z","etag":null,"topics":["animation","animation-component","animation-group","drop-animation","facebook-animation","ios","ios-animation","ios-networking","loading","loading-animation","loading-animations","objective-c","placeholder","pull-requests","pull-to-refresh","skeleton","skeleton-screen","uicollectionview","uitableview"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tigerAndBull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-15T12:47:29.000Z","updated_at":"2025-05-08T12:17:42.000Z","dependencies_parsed_at":"2022-07-14T04:50:31.064Z","dependency_job_id":"877f10f7-f62f-44f7-86c3-725975ddbd74","html_url":"https://github.com/tigerAndBull/TABAnimated","commit_stats":null,"previous_names":[],"tags_count":104,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tigerAndBull%2FTABAnimated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tigerAndBull%2FTABAnimated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tigerAndBull%2FTABAnimated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tigerAndBull%2FTABAnimated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tigerAndBull","download_url":"https://codeload.github.com/tigerAndBull/TABAnimated/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140756,"owners_count":22021219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-component","animation-group","drop-animation","facebook-animation","ios","ios-animation","ios-networking","loading","loading-animation","loading-animations","objective-c","placeholder","pull-requests","pull-to-refresh","skeleton","skeleton-screen","uicollectionview","uitableview"],"created_at":"2024-09-24T21:29:12.713Z","updated_at":"2025-05-14T12:07:57.123Z","avatar_url":"https://github.com/tigerAndBull.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"align: center\"\u003e\n\u003cimg src=\"https://upload-images.jianshu.io/upload_images/5632003-14498d8a6c786224.png\"/\u003e\n\u003c/div\u003e\n\n\u003cp style=\"align: center\"\u003e\n    \u003ca href=\"https://github.com/tigerAndBull/TABAnimated\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/platform-iOS-blue.svg?style=plastic\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/tigerAndBull/TABAnimated\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/language-objective--c-blue.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://cocoapods.org/pods/TABAnimated\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/cocoapods-supported-4BC51D.svg?style=plastic\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/tigerAndBull/TABAnimated\"\u003e\n       \u003cimg src=\"https://img.shields.io/badge/support-ios%208%2B-orange.svg\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e + [English Documents](https://github.com/tigerAndBull/TABAnimated/blob/master/README_EN.md)\n\n## 骨架屏\n\n骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案。在弱网情况下，客户端获取到服务器数据的时间会比较长，通过骨架屏来减缓用户等待的焦躁情绪。\nTABAnimated是提供给iOS开发者自动生成骨架屏的一种解决方案。开发者可以将已经开发好的视图，通过配置一些全局/局部的参数，自动生成与其结构一致的骨架屏。开发者用较少的开发成本，就可以获得和需求一致的骨架屏。  \n\n## 优势\n\n-  自动化、低耦合\n-  列表视图、嵌套视图\n-  支持上拉加载\n-  支持暗黑模式\n-  自定制动画及其序列化\n-  实时预览\n\n## 效果展示\n\n| 闪光动画 | 经典动画 | 下坠动画 | \n| ------ | ------ | ------ | \n| ![闪光动画.gif](https://upload-images.jianshu.io/upload_images/5632003-8ebdc1e964fcfbb5.gif?imageMogr2/auto-orient/strip) | ![经典动画.gif](https://upload-images.jianshu.io/upload_images/5632003-8025a04102572ed4.gif?imageMogr2/auto-orient/strip) | ![下坠动画.gif](https://upload-images.jianshu.io/upload_images/5632003-5277740f43880cde.gif?imageMogr2/auto-orient/strip) | \n\n| 呼吸动画 | 上拉加载 | 复杂场景 |\n| ------ | ------ | ------ | \n| ![呼吸动画.gif](https://upload-images.jianshu.io/upload_images/5632003-8edf170c90e18b4b.gif?imageMogr2/auto-orient/strip)| ![上拉加载.gif](https://upload-images.jianshu.io/upload_images/5632003-72265e19c84fe415.gif?imageMogr2/auto-orient/strip) | ![复杂场景.gif](https://upload-images.jianshu.io/upload_images/5632003-e5500766b4f66f14.gif?imageMogr2/auto-orient/strip) | \n\n**暗黑模式：**\n\n| 工具箱切换 | setting页面切换 |\n| ------ | ------ | \n| ![工具箱切换.gif](https://upload-images.jianshu.io/upload_images/5632003-cf5c4f50eac6fe6c.gif?imageMogr2/auto-orient/strip) | ![setting设置切换.gif](https://upload-images.jianshu.io/upload_images/5632003-2d1fb96ec07d6bca.gif?imageMogr2/auto-orient/strip) | \n\n**实时预览：**\n\n![实时预览.gif](https://upload-images.jianshu.io/upload_images/5632003-4161e026819b7739.gif?imageMogr2/auto-orient/strip)\n\n## Usages\n\n### 流程图\n\n![流程图.png](https://upload-images.jianshu.io/upload_images/5632003-0c16a40e0bbd78d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)\n\n### 一、导入\n\n- CocoaPods\n\n```\npod 'TABAnimated', '2.6.3'\n```\n\n- Carthage\n\n```\ngithub \"tigerAndBull/TABAnimated\"\n```\n\n- 手动将TABAnimated文件夹拖入工程\n\n### 二、设置全局参数(可选)\n\n在 `didFinishLaunchingWithOptions` 中设置全局参数\n\n```\n[TABAnimated sharedAnimated].openLog = YES;\n[TABAnimated sharedAnimated].openAnimationTag = YES;\n...\n```\n\n### 三、初始化\n\n`NewsCollectionViewCell`就是业务方自己的cell，也可以绑定其他任意类型cell！\n\n```\n_collectionView.tabAnimated = \n[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] \ncellSize:[NewsCollectionViewCell cellSize]];\n```\n\n- 有其他初始化方法，针对不同结构的列表视图，在框架中都有注释\n- 有针对这个控制视图的局部属性，在框架中都有注释\n\n### 四、控制骨架屏开关\n\n1. 开启动画\n\n```\n[self.collectionView tab_startAnimation];  \n```\n\n2. 关闭动画\n\n```\n[self.collectionView tab_endAnimation];\n```\n\n### 五、预处理回调+链式语法用于修改骨架元素的属性\n\n使用变量名修改\n\n```\n_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {\n    manager.animationN(@\"titleImageView\").down(3).radius(12);\n    manager.animationN(@\"nameLabel\").height(12).width(110);\n    manager.animationN(@\"timeButton\").down(-5).height(12);\n};\n```\n\n使用index修改\n\n```\n_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {\n    manager.animation(1).down(3).radius(12);\n    manager.animation(2).height(12).width(110);\n    manager.animation(3).down(-5).height(12);\n};\n```\n\nSwift\n\n```\ntableView.tabAnimated?.adjustBlock = { manager in\n   manager.animation()?(1)?.down()(3)?.radius()(12)\n   manager.animation()?(2)?.height()(12)?.width()(110)\n   manager.animation()?(3)?.down()(-5)?.height()(12)\n}\n```\n\n## FAQ\n\n### 1. `manager.animation(x)`和 `manager.animationN(@\"x\")`，x是几？\n\nmanager.animation(x)其实是视图addSubView尾递归排序。\n在appDelegate设置TABAnimated的`openAnimationTag`属性为YES，框架就会自动为你指示，究竟x是几。\n\n```\n[TABAnimated sharedAnimated].openAnimationTag = YES;\n```\n\nanimationN(@\"x\")的x是变量名，不支持局部变量。\n\n### 2. 通过几个示例，了解预处理回调和链式语法\n\n- 假如第0个元素的高度和宽度不合适\n\n```\nmanager.animation(0).height(12).width(110);\n```\n\n- 假如第1个元素需要使用占位图\n\n```\nmanager.animation(1).placeholder(@\"占位图名称.png\");\n```\n\n- 假如第1，2，3个元素宽度都为50\n\n```\nmanager.animations(1,3).width(50);\n```\n\n- 假如第1，5，7个元素需要下移5px\n\n```\nmanager.animationWithIndexs(1,5,7).down(5);\n```\n\n![下标示意图.png](https://upload-images.jianshu.io/upload_images/5632003-2842bd54e80dd9ef.png?imageMogr2/auto-orient/strip%7CimageView2/3/w/300)\n\n### 3. 列表集成问题\n\n在你集成列表视图之前，一定要理清列表视图结构。分为以下三种：\n\n+ 以section为单元，section和cell样式一一对应\n+ 视图只有1个section, 但是对应多个cell\n+ 动态section：section数量是网络获取的\n\n明确自身需求\n\n+ 设置多个section/row，一起开启动画\n+ 设置多个section/row，部分开启动画\n\n最后到框架内找到对应的初始化方法、启动动画方法即可！\n\n### 4. 详细说明文档列表\n\n\u003e + [缓存策略和线程处理](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5%E5%92%8C%E7%BA%BF%E7%A8%8B%E5%A4%84%E7%90%86.md)\n\u003e + [架构设计和性能测试](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%92%8C%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95.md)\n\u003e + [预处理回调动画元素下标问题](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%8A%A8%E7%94%BB%E5%85%83%E7%B4%A0%E4%B8%8B%E6%A0%87%E9%97%AE%E9%A2%98.md)\n\u003e + [问题答疑文档](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E9%97%AE%E9%A2%98%E7%AD%94%E7%96%91%E6%96%87%E6%A1%A3.md)、[版本信息记录文档](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%8D%87%E7%BA%A7%E6%96%87%E6%A1%A3%E5%92%8C%E5%85%B6%E4%BB%96%E4%BF%AE%E5%A4%8D.md)\n\u003e + [全局:局部属性、链式语法api](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%85%A8%E5%B1%80:%E5%B1%80%E9%83%A8%E5%B1%9E%E6%80%A7%E3%80%81%E9%93%BE%E5%BC%8F%E8%AF%AD%E6%B3%95api.md)\n\u003e + [豆瓣动画详解](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E8%B1%86%E7%93%A3%E5%8A%A8%E7%94%BB%E8%AF%A6%E8%A7%A3.md)\n\u003e + [不再hook setDelegate和setDataSource](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E4%B8%8D%E5%86%8Dhook%20setDelegate%E5%92%8CsetDataSource.md)\n\u003e + [上拉加载更多](https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E5%8A%9F%E8%83%BD.md)\n\n## Tips\n\n- 有问题优先查看issues和documents\n- demo提供的只是不同结构视图的集成方案，开发者可以自己定制出更精美的效果\n- 如有使用问题、优化建议等，可以关注公众号：tigerAndBull技术分享，加群解决\n\n## Stargazers over time\n\n[![Stargazers over time](https://starchart.cc/tigerAndBull/TABAnimated.svg)](https://starchart.cc/tigerAndBull/TABAnimated)\n\n## License\n\nAll source code is licensed under the [License](https://github.com/tigerAndBull/TABAnimated/blob/master/LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftigerandbull%2Ftabanimated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftigerandbull%2Ftabanimated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftigerandbull%2Ftabanimated/lists"}