# CocosCreatorHowToUse

**Repository Path**: matrixhawk/cocos-creator-how-to-use

## Basic Information

- **Project Name**: CocosCreatorHowToUse
- **Description**: 大道至简，殊途同归。
CocosCreatorHowToUse是希望简化用户理解Cocos Creator API某些功能的使用。
Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: v3.4.x
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 136
- **Created**: 2022-03-11
- **Last Updated**: 2022-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Cocos Creator How To Use
#### Write by yeshao2069.
#### Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
#### Cocos Creator V3.4.x+
 

## Quick
| A | B | C | D | E |
| :-----------------------: | :-----------------------: | :-----------------------: | :-----------------------: | :-----------------------: | 
| [1. 用户界面 UI](#ui) |   | [3. 音频 Audio](#audio) | [4. 视频 Video](#video) | [5. 帧动画 Animation](#animation)|
| [6. Spine动画](#spine) | [7. 龙骨动画 DragonBone](#dragonbone) | [8. 绘图 Graphics](#graphics) | [9. 物理 Physics](#physics) | [10. 缓动 Tween](#tween) |
| [11. 渲染 Render](#render) | [12. 模型 Model](#model) | [13. 粒子 Particle](#particle) | [14. 需求 DemandCase](#demandcase) | |
 
## Examples

### UI
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 1  |   | [UI示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI) |   | [返回顶部](#quick)  |
|   | 1.1 | Label | [超大文本](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/LargeSystemFontText)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030201.jpg" width="400" height="300" /></div>  |
|   | 1.2 | Button | [简单按钮](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/SimpleButton)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030201.gif" width="400" height="300" /></div>  |
|   | 1.3 | ListView | [列表视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/ListViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030202.gif" width="400" height="300" /></div>  |
|   | 1.4 | WebView | [网页视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/WebViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030202.jpg" width="400" height="300" /></div>  |
|   | 1.5 | RichText | [富文本示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/RichTextUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030203.jpg" width="400" height="300" /></div>  |
|   | 1.6 | PageView | [页面视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/PageViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030204.jpg" width="400" height="300" /></div>  |
|   | 1.7 | Mask | [遮罩示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/MaskUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030205.jpg" width="400" height="300" /></div>  |
|   | 1.8 | UI | [更新列表信息](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/UpdateListWithData)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030206.png" width="400" height="300" /></div>  |
|   | 1.9 | Camera | [摄像机示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/UI/CameraUseSample)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030203.gif" width="400" height="300" /></div>  |

### Audio
| 编号 | 子编号 | 类目 | 子项 | 备注 |  演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 3  |   | [音频示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Audio) |   | [返回顶部](#quick)  |
|   | 3.1 | 音频示例 | [多个音效同时播放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Audio/PlayOneShot)  |   |   |
|   | 3.2 | 音频示例 | [添加全局按钮音效](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Audio/AddGlobalButtonSound)  |   |   |
|   | 3.3 | 音频示例 | [模拟钢琴播放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Audio/PianoPlayTest)  | 官方DEMO  |  <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030211.png" width="400" height="300" /></div> | 

### Video
| 编号 | 子编号 | 类目 | 子项 | 备注 |  演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 4  |   | [视频示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Video) |   | [返回顶部](#quick)  |
|   | 4.1 | 视频示例 | [视频使用](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Video/VideoPlayer)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030207.jpg" width="400" height="300" /></div>  |
|   | 4.2 | 视频示例 | [视频置于UI之下](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Video/VideoStayOnBottom)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220302/2022030208.jpg" width="400" height="300" /></div>  |

### Animation
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 5  |   | [帧动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Animation) |   | [返回顶部](#quick)  |   |
|   | 5.1 | 帧动画 | [精灵帧动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Animation/SpriteFrameAnimation)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030211.gif" width="400" height="300" /></div> |
|   | 5.2 | 帧动画 | [精灵帧移动动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Animation/SpriteMoveAnimation)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030212.gif" width="400" height="300" /></div> |
|   | 5.3 | 帧动画 | [精灵帧动画动态创建](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Animation/CreateAnimationClip)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030213.gif" width="400" height="300" /> </div> |

### Spine
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 6  |   | [Spine](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine) |   | [返回顶部](#quick)  |   |
|   | 6.1 | Spine | [加载Spine动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/LoadSpine)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030221.gif" width="400" height="300" /></div>  |
|   | 6.2 | Spine | [Spine挂点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/SpineAttach)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030222.gif" width="400" height="300" /></div>  |
|   | 6.3 | Spine | [Spine特效](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/SpineMesh)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030223.gif" width="400" height="300" /></div> |
|   | 6.4 | Spine | [Spine换肤](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/SpineSkin)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030224.gif" width="400" height="300" /></div> |
|   | 6.5 | Spine | [Spine碰撞检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/SpineCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030225.gif" width="400" height="300" /></div> |
|   | 6.6 | Spine | [Spine动作切换](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Spine/SpineBoy)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220302/2022030226.gif" width="400" height="300" /></div> |

### DragonBone
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 7  |   | [龙骨动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones) |   | [返回顶部](#quick)  |   |
|   | 7.1 | 龙骨动画 | [替换龙骨动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones/Creator3.4.1_2D_DragonBonesReplaceSlot)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030402.gif" width="400" height="300" /></div> |
|   | 7.2 | 龙骨动画 | [加载龙骨动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones/Creator3.4.1_2D_LoadDragonBones)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030401.gif" width="400" height="300" /></div> |
|   | 7.3 | 龙骨动画 | [龙骨动画碰撞检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones/Creator3.4.1_2D_DragonBonesCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030403.gif" width="400" height="300" /></div> |
|   | 7.4 | 龙骨动画 | [龙骨动画挂点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones/Creator3.4.1_2D_DragonBonesAttach)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030404.gif" width="400" height="300" /></div> |
|   | 7.5 | 龙骨动画 | [切换龙骨动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/DragonBones/Creator3.4.1_2D_DragonBones)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030405.gif" width="400" height="300" /></div> |

### Graphics
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 8  |   | [Graphics](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics) |   | [返回顶部](#quick)  |   |
|   | 8.1 | Graphics | [画饼状图](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsArc)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220304/2022030401.png" width="400" height="300" /></div> |
|   | 8.2 | Graphics | [画正方形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsRect)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220304/2022030402.png" width="400" height="300" /></div> |
|   | 8.3 | Graphics | [画菱形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsLineTo)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220304/2022030403.png" width="400" height="300" /></div> |
|   | 8.4 | Graphics | [画椭圆形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsEllipse)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220304/2022030404.png" width="400" height="300" /></div> |
|   | 8.5 | Graphics | [三点画圆](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsDrawCircle)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030411.gif" width="400" height="300" /></div> |
|   | 8.6 | Graphics | [涂鸦](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_Doodle)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030412.gif" width="400" height="300" /></div> |
|   | 8.7 | Graphics | [画Sine曲线](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsSineWaves)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030413.gif" width="400" height="300" /></div> |
|   | 8.8 | Graphics | [自由画线](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_DrawLine)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030414.gif" width="400" height="300" /></div> |
|   | 8.9 | Graphics | [烟花爆炸](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Graphics/Creator3.4.1_2D_GraphicsFireworksExplosion)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030415.gif" width="400" height="300" /></div> |

### Physics
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 9  |   | [物理示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics) |   | [返回顶部](#quick)  |   |
|   | 9.1 | 物理示例 | [检测碰撞体是否存在](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsRaycastClosest)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220304/2022030411.jpg" width="400" height="300" /></div>  |
|   | 9.2 | 物理示例 | [射线检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsRaycast)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030421.gif" width="400" height="300" /></div> |
|   | 9.3 | 物理示例 | [使用物理材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsMaterial)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030422.gif" width="400" height="300" /></div> |
|   | 9.4 | 物理示例 | [使用网格碰撞器组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsMeshCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030423.gif" width="400" height="300" /></div> |
|   | 9.5 | 物理示例 | [物体旋转跳跃](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsRotateJumpWithVelocity)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030424.gif" width="400" height="300" /></div> |
|   | 9.6 | 物理示例 | [使用触发器-触发事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsTriggerEvent)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030425.gif" width="400" height="300" /></div> |
|   | 9.7 | 物理示例 | [运行时更新碰撞体数据](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsRuntimeUpdate)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030426.gif" width="400" height="300" /></div> |
|   | 9.8 | 物理示例 | [使用平面碰撞器组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsPlaneCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030427.gif" width="400" height="300" /></div> |
|   | 9.9 | 物理示例 | [物理同步](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsSync)  | 官方DEMO | <div align=center<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030428.gif" width="400" height="300" /></div> |
|   | 9.10 | 物理示例 | [物理分组掩码](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsGroupMask)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030429.gif" width="400" height="300" /></div> |
|   | 9.11 | 物理示例 | [物理动态运行](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsRunDynamic)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030430.gif" width="400" height="300" /></div> |
|   | 9.12 | 物理示例 | [不规则物体碰撞](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsConvexColliders)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030431.gif" width="400" height="300" /></div> |
|   | 9.13 | 物理示例 | [点对点约束](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsPointToPointConstraint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030432.gif" width="400" height="300" /></div> |
|   | 9.14 | 物理示例 | [碰撞点数据测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsContactData)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030433.gif" width="400" height="300" /></div> |
|   | 9.15 | 物理示例 | [链条约束](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsHingeConstraint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030434.gif" width="400" height="300" /></div> |
|   | 9.16 | 物理示例 | [使用恒力组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsForceConstant)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030435.gif" width="400" height="300" /></div> |
|   | 9.17 | 物理示例 | [使用碰撞器-碰撞事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsCollisionEvent)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030436.gif" width="400" height="300" /></div> |
|   | 9.18 | 物理示例 | [胶囊体触发器测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Physics/Creator3.4.1_3D_PhysicsCapsuleTrigger)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220304/2022030437.gif" width="400" height="300" /></div> |

### Tween
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 10  |   | [Tween](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween) |   | [返回顶部](#quick)  |   |
|   | 10.1 | Tween | [透明度渐变](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/Creator3.4.1_2D_TweenOpacityChange)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030501.gif" width="400" height="300" /></div> |
|   | 10.2 | Tween | [旋转](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/Creator3.4.1_3D_TweenRotateChange)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030502.gif" width="400" height="300" /></div> |
|   | 10.3 | Tween | [环形运动](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/Creator3.4.1_2D_TweenCircleMove)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030503.gif" width="400" height="300" /></div> |
|   | 10.4 | Tween | [旋转并缩放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/Creator3.4.1_2D_TweenRotateAndScaleForever)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030504.gif" width="400" height="300" /></div> |
|   | 10.5 | Tween | [使用Easing示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/Creator3.4.1_2D_TweenShowMonster)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/gif/20220305/2022030505.gif" width="400" height="300" /></div> |
|   | 10.6 | Tween | [CCUtils封装库(常用TweenAPI扩展)](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Tween/CCUtilsDemo)  |   |   |

### Model
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 11  |   | [Model](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model) |   | [返回顶部](#quick)  |   |
|   | 11.1 | Model | [表情动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/Creator3.4.1_3D_MorphHead)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030511.gif" width="400" height="300" /></div> |
|   | 11.2 | Model | [跳舞的女人](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/Creator3.4.1_3D_DanceWoman)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030512.gif" width="400" height="300" /></div> |
|   | 11.3 | Model | [使用卡通材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/Creator3.4.1_3D_Toon)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030513.gif" width="400" height="300" /></div> |
|   | 11.4 | Model | [动态加载材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/DynamicLoadMaterial)  | 官方DEMO  |   |
|   | 11.5 | Model | [冬来了](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/Creator3.4.1_3D_Winter)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030501.png" width="400" height="300" /></div>  |
|   | 11.6 | Model | [骑士](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Model/Creator3.4.1_3D_Knight)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030511.png" width="400" height="300" /></div>  |

### Renderer
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 12  |   | [Renderer](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Renderer) |   | [返回顶部](#quick)  |
|   | 12.1 | Renderer | [2D在3D中渲染](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Renderer/Creator3.4.1_2dRenderingIn3d)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030521.gif" width="400" height="300" /></div> |
|   | 12.2 | Renderer | [Web截图](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Renderer/Creator3.4.1_Capture)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030522.gif" width="400" height="300" /></div>  |

### Particle
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 13  |   | [粒子示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle) |   | [返回顶部](#quick)  |   |
|   | 13.1 | 粒子示例 | [火焰](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_FlameSimulation)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030531.gif" width="400" height="300" /></div> |
|   | 13.2 | 粒子示例 | [粒子拖尾1](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleTrails01)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030532.gif" width="400" height="300" /></div> |
|   | 13.3 | 粒子示例 | [粒子拖尾2](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleTrails02)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030533.gif" width="400" height="300" /></div> |
|   | 13.4 | 粒子示例 | [粒子拖尾3](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleTrails03)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030534.gif" width="400" height="300" /></div> |
|   | 13.5 | 粒子示例 | [粒子拖尾4](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleTrails04)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030535.gif" width="400" height="300" /></div> |
|   | 13.6 | 粒子示例 | [颜色模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleColor)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030536.gif" width="400" height="300" /></div> |
|   | 13.7 | 粒子示例 | [加速度模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleForce)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030537.gif" width="400" height="300" /></div> |
|   | 13.8 | 粒子示例 | [限速模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleLimitVelocity)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030538.gif" width="400" height="300" /></div> |
|   | 13.9 | 粒子示例 | [主模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleMain)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030539.gif" width="400" height="300" /></div> |
|   | 13.10 | 粒子示例 | [渲染模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleRenderer)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030540.gif" width="400" height="300" /></div> |
|   | 13.11 | 粒子示例 | [旋转模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleRotation)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030541.gif" width="400" height="300" /></div> |
|   | 13.12 | 粒子示例 | [发射器模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleShape)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030542.gif" width="400" height="300" /></div> |
|   | 13.13 | 粒子示例 | [大小模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleSize)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030543.gif" width="400" height="300" /></div> |
|   | 13.14 | 粒子示例 | [贴图动画模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleTextureAnimation)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030544.gif" width="400" height="300" /></div> |
|   | 13.15 | 粒子示例 | [速度模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_3D_ParticleVelocity)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030545.gif" width="400" height="300" /></div> |
|   | 13.16 | 粒子示例 | [2D粒子显隐](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_2D_ToggleParticle)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030546.gif" width="400" height="300" /></div> |
|   | 13.17 | 粒子示例 | [2D粒子完成后自动移除](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Particle/Creator3.4.1_2D_AutoRemoveParticle)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030547.gif" width="400" height="300" /></div> |

### DemandCase
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :----------------------: |:----------------------: |:----------------------: |:----------------------: |
| 14 |   | [需求案例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo) |   | [返回顶部](#quick)  |   |
|   | 14.1 | 需求 | [物体是否在摄像机范围内](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/Creator3.4.1_3D_ObjectIsInCameraView)  |  |<div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030551.gif" width="400" height="300" /></div> |
|   | 14.2 | 需求 | [使用动画帧事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/Creator3.4.1_UseAnimationFrameEvents)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030561.gif" width="400" height="300" /></div> |
|   | 14.3 | 需求 | [动态获取脚本的方法名](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/GetScriptFunction)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030521.png" width="400" height="300" /></div> |
|   | 14.4 | 需求 | [动态获取AnimationClip中属性数据](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/Creator3.4.1_GetAnimationClipDataByTime)  |  |  <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030536.png" width="400" height="300" /></div> |
|   | 14.5 | 需求 | [点击响应测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/PressResponseTest)  |   |   |
|   | 14.6 | 需求 | [物体始终在人物右侧](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/ObjectAlwaysFollow)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030562.gif" width="400" height="300" /></div> |
|   | 14.7 | 需求 | [圆形进度条](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/CircularProgressBar)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030563.gif" width="400" height="300" /></div> |
|   | 14.8 | 需求 | [椭圆轨迹运动](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/EllipseMove)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030564.gif" width="400" height="300" /></div> |
|   | 14.9 | 需求 | [贝塞尔曲线路径在线绘制工具](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/BezierCurvePathCreator)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030565.gif" width="400" height="300" /></div> |
|   | 14.10 | 需求 | [动态加载FBX模型中的Mesh](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/DynamicLoadMesh)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030566.gif" width="400" height="300" /></div> |
|   | 14.11 | 需求 | [旋转后矩形是否包含点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/AbovePointTest)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030541.png" width="400" height="300" /></div> |
|   | 14.12 | 需求 | [弯曲的道路](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/RoadCurved)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030542.png" width="400" height="300" /></div> |
|   | 14.13 | 需求 | [3D位置转化](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/ScreenToWorldPoint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030567.gif" width="400" height="300" /></div> |
|   | 14.14 | 需求 | [动态生成单色精灵](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/Creator3.4.1_2D_Sprite_AutoGenerateSpriteframe)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/20220305/2022030543.png" width="400" height="300" /></div> |
|   | 14.15 | 需求 | [不规则按钮](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.4.x/Demo/Creator3.4.1_2D_IrregularButton)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/20220305/2022030568.gif" width="400" height="300" /></div> |