DouYinComment

iOS Widget Video Gif Play Animation 1. gif视频播放小组件, 帧动画小组件, 摇摇乐小组件, 网易云iOS小组件,动态Widget,时钟组件,风扇组件,滚动照片组件; 2.抖音视频转场动画,抖音左滑push进个人主页, 评论手势拖拽效果 , 视频播放, 边下边播, 预加载, TikTok ; 3.铃声多多,上传铃声音频到库乐队(GarageBand) 4.微博主页、简书主页等。多页面嵌套列表分页滚动，上下滑动，左右滑动切换页面。类似TableView共用HeaderView悬浮,仿头条标签编辑,铃声多多音乐播放界面(豆瓣电影主页)。

语言Objective-C
默认分支master
大小135.7 MB
更新8月24日
Issues8

在 GitHub 打开

tangtiancheng

技术解读

以下内容由 GitRead 中文社区编辑团队基于项目 README 与官方资料整理，结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

GitHub 仓库 “tangtiancheng/DouYinComment” 深度技术分析

项目背景与痛点

在当前移动互联网时代，短视频应用如抖音、TikTok 等已经深深地嵌入了我们的生活。而这些应用的用户体验，不仅体现在视频播放效果上，还要求流畅的动画效果和互动性。项目 “tangtiancheng/DouYinComment” 正是围绕这一需求而来的。开发这样一个可以集成多种动画效果的小组件库，不仅能够丰富应用界面的表现力，还能为用户带来更丰富的互动体验。

核心技术揭秘

架构与实现

该项目实现的小组件，从技术上说是将不同风格的动画效果封装成可复用的 UI 组件。通过这些组件的组合与配置，开发者只需简单加入，即可显著提升 APP 的交互性和美观度。在项目设计中，经典的设计模式和数据流处理，使得不同动画之间的整合更加灵活和高效。

以 TikTok 风格的转场动画为例，动画不仅包含简单的滑动效果，还有更加复杂的帧动画和预加载处理技术，使得视频播放更加流畅。在视频下拉滚动时，边下载边播放的机制极大提升了用户体验，而在预加载区域中，提前加载下一帧，让用户感觉到无缝的播放。

以下是该项目的关键数据流过程，展现了若干组件之间协同工作的架构：

graph TD A[用户输入] --> B("动画组件初始化") B --> C("动画播放") C --> D{"用户操作?"} D -->|"是"| E[更新动画状态] D -->|"否"| F[维持当前动画] E --> C F --> C

关键技术与组件

Gif视频播放小组件：这个组件内嵌支持 Gif 图片的播放，提供了不同动画帧的展示方式，增强页面动态效果。
帧动画小组件：该组件可以定制不同卡通动画效果，内含多种基础动画，如摇摆动画、循环动画等。
新闻/内容滚动组件：用于滚动展示多内容页面，上下滑动以及左右切换，类似于表格视图的悬浮表头功能。
视频播放组件：通过对视频预加载技术处理，保证用户的无缝观看体验。
铃声管理器组件：该组件允许用户上传音频到本地库，及库乐队这样的简单操作平台。

功能亮点与差异

在众多动画及交互组件库中，此项目做得尤为不一样的是为了抖音风格这种现代短视频交互体验特别设计的组件，弥补大量现有组件库这类组件的缺失。特别的是，视频组件的边下边播特性，大大提升了用户体验的流畅程度。从用户交互到视觉体验，这一系列组件提供了更像是"插件式"的解决方案，以便更容易地集成和开发。

应用场景与落地建议

此组件库适用于任何需要丰富动画效果以及交互功能的应用。尤其适用于短视频应用的开发，能极大提升了应用的视觉吸引度和用户粘性。在生产环境中，建议：

重量考量：集成组件时要考虑全量引入是否导致 APP 的重量变化及加载时间。
内存管理：在视频的预加载和帧动画的播放中合理管理内存。
网络条件适应性：预加载视频时，要考虑不同网络环境下的优化加载。

综合评价

优点：

提供了大量现代短视频应用急需的动画组件。
动画效果多样且高动态，极大提升了应用交互体验。
易于集成，无需从头开始编写这些复杂动画效果的功能。

不足：

集成的重量会提升开发者的打包体积。
需要在与项目业务适配时更灵活地选择和使用组件。

作为一款专注于小组件动画实现的框架，“tangtiancheng/DouYinComment” 提供了丰富的酷炫功能模块，在短视频和互动应用开发中表现出了不俗的竞争力。

关于

animation douyin frame garageband gif header ios pan push rotate scroll shake tiktok transition ttctool video viewpage wangyiyun widget

Apache License 2.0
716 Stars
117 Forks
9 Watching

简要分析

热度分

959

价值分

465

活跃状态

活跃

GitHub

语言占比

DTrace

Objective-C

Objective-C++

Ruby

Swift

贡献者

tangtiancheng

yoiuerw

DouYinComment

English

支持pod导入:
pod 'TTCTool
或者只导入单个功能
抖音评论效果: pod ‘TTCTool/TCCommentsPopView’
抖音转场动画: pod ‘TTCTool/TTCTransition’
抖音左滑进入个人主页: pod ‘TTCTool/TTCPanPush’
分页: pod ‘TTCTool/TCViewPage’
标签管理: pod ‘TTCTool/TagChannelManager’

这些功能大部分都是我在 "铃声多多"APP里已经用了,iOS端日活有70万左右, 常年保持AppStore 排行榜100多名, 不是让你们当小白鼠哈，仅仅为了自己记录(装逼)一下, 外加能帮别人一点是一点吧,有需要就拿去用!

这个Demo主要功能:

(新版xcode26.1不支持在iOS26上的小组件旋转功能,xcode26.1之前的老版本xcode没问题)

2.这个Demo有仿照抖音的小视频评论手势拖拽效果 (直接将TCCommentsPopView这个类拖入您的项目即可使用,很简单)

可以说完全和抖音的效果一模一样,该功能我已经在"铃声多多"项目中使用. 我在github,cocoachina,coco4app等网址上找了很久,都没有一个demo是能完全和抖音的一致的.如果觉得好用希望给一个star

3.一行代码实现仿抖音左滑Push进个人主页功能

一行代码实现仿抖音左滑 push进入个人主页,
1.把TTCPanPushTransition文件夹拖入你的项目中,
2.在需要push的控制器类中 #import “UIViewController+TTCPanPush.h”
3.然后在videDidLoad方法中调用getpanPushToViewController:方法, block返回你的个人主页控制器类
不会侵入你自己的原有代码,详细看demo

[self getpanPushToViewController:^UIViewController * _Nonnull{
    //这个应该是你的个人主页控制器
    Type4ViewControllerThird *vc = [[Type4ViewControllerThird alloc] init];
    return vc;
}];

4.抖音视频播放转场动画(github上其它demo并未做到和抖音一样,或者耦合度太高需要侵入你的代码,让你改很多东西才能实现,我自己封装了一个,只需将TTCTransition文件夹拖入你的项目,然后添加两行代码就行,完全不需要侵入修改你原有的代码. 希望大佬们多提意见)

一行或者两行代码实现抖音视频播放转场动画,支持push和present,两行代码脑残式操作,自己看下代码首先将TTCTransition文件夹拖入你的项目中, #import “TTCTransitionDelegate.h”

第一行:假设需要转场的控制器叫myVC, 那么调用myVC.ttcTransitionDelegate = [[TTCTransitionDelegate alloc] init];

第二行:抖音的转场动画效果是一个小窗口cell扩大到全屏播放界面,所以需要将小窗口cell传给我,不传也可以,默认就是从中心开始扩大,myVC.ttcTransitionDelegate.smalCurPlayCell = cell

5.模仿抖音播放小视频功能;(这个功能网上有很多其它更优秀的Demo,所以大家可能需求不大)

(1).支持边下边播

(2).支持视频预加载

6.和铃声多多一样,支持上传音频到库乐队(GarageBand)直接设置手机铃声

鉴于之前有好几位iOS开发者通过简书找到我, 都是公司需要做这个功能但是不知道怎么实现, 这个小众功能我做的时候网上没有任何资料,当时我自己也是迷迷糊糊琢磨了一些时间才弄出来的. 今天把这个功能实现方法写出来把,希望能帮到大家.如果确实解决了您的燃眉之急,希望能点一个star,感谢.

一开始铃声多多中只有分页功能，没有需要加入headerView悬浮嵌套的功能，所以就只写了TCViewPager，用于处理分页功能，后来个人主页需要做成headerView悬浮的效果，但是我又不想修改之前TCViewPager已经写好的代码，而且肯定有其他开发者已经有了自己的分页控件（改样式改代码肯定是改自己的代码比较熟悉比较快），只想添加一个headerView悬浮功能，不想用我的TCViewPager，所以我就索性写了TCNestScrollPageView用于处理嵌套headerView滚动悬浮，把TCNestScrollPageView和TCViewPager完全拆开。如果你已经有了自己的分页控件,但是想在其基础上再添加header悬浮滚动的功能,那么你就只需要使用TCNestScrollPageView即可,不需要用到TCViewPager.用法非常非常简单,直接参照demo（github上有一些一两千star的项目我觉得无论是代码还是使用都有丢丢复杂，对新手不太友好，看起来一脸懵逼，想做一些改动都无从下手，TCNestScrollPageView和TCViewPager相对来说思想思路和代码都很简单，想做一些修改看看代码就能改，有需要的就用起来吧）

(1).简单分页

(2).headerView随时变动

(3).headerView吸顶

(4).改变headerView高度

(5).headerView不吸顶,下拉变大

(6).Header滚动延续(实现方法和网上其它的不太一样,可以看看)

https://github.com/tangtiancheng/DouYinComment/archive/refs/tags/0.0.7.zip 新版没了,老版本有实现代码

(7).标签编辑功能

(8).铃声多多音乐播放界面,(类似豆瓣电影主页)

另外还有其他的效果自己去看demo,使用起来很简单, 我写这些东西都是尽力朝着让使用者一两行就能用, 不侵入使用者的代码,实现原理也不难,自己去看代码也肯定能看懂 (好用请给个star,谢谢)

暂无评论

DouYinComment

技术解读