{"id":14960342,"url":"https://github.com/setchi/fancyscrollview","last_synced_at":"2025-05-15T05:04:19.109Z","repository":{"id":45695172,"uuid":"83178374","full_name":"setchi/FancyScrollView","owner":"setchi","description":"A versatile Unity scroll view component that enables highly flexible animations.","archived":false,"fork":false,"pushed_at":"2022-07-08T01:35:12.000Z","size":4010,"stargazers_count":3187,"open_issues_count":12,"forks_count":399,"subscribers_count":74,"default_branch":"master","last_synced_at":"2025-04-07T00:12:51.293Z","etag":null,"topics":["csharp","infinite-scroll","scroller","scrollview","ugui","unity","unity-asset","unity-scripts","unity3d","unity3d-games"],"latest_commit_sha":null,"homepage":"https://setchi.jp/FancyScrollView/","language":"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/setchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-26T02:52:04.000Z","updated_at":"2025-04-05T03:19:07.000Z","dependencies_parsed_at":"2022-08-12T12:00:54.866Z","dependency_job_id":null,"html_url":"https://github.com/setchi/FancyScrollView","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setchi%2FFancyScrollView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setchi%2FFancyScrollView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setchi%2FFancyScrollView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setchi%2FFancyScrollView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/setchi","download_url":"https://codeload.github.com/setchi/FancyScrollView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824856,"owners_count":21167378,"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":["csharp","infinite-scroll","scroller","scrollview","ugui","unity","unity-asset","unity-scripts","unity3d","unity3d-games"],"created_at":"2024-09-24T13:22:04.980Z","updated_at":"2025-04-14T05:19:52.855Z","avatar_url":"https://github.com/setchi.png","language":"C#","readme":"# FancyScrollView\n\n[![license](https://img.shields.io/badge/license-MIT-green.svg?style=flat\u0026cacheSeconds=2592000)](https://github.com/setchi/FancyScrollView/blob/master/LICENSE)\n[![WebGL Demo](https://img.shields.io/badge/demo-WebGL-orange.svg?style=flat\u0026logo=google-chrome\u0026logoColor=white\u0026cacheSeconds=2592000)](https://setchi.jp/FancyScrollView/demo)\n[![API Documentation](https://img.shields.io/badge/API-Documentation-ff69b4.svg?style=flat\u0026logo=c-sharp\u0026cacheSeconds=2592000)](https://setchi.jp/FancyScrollView/api/FancyScrollView.html)\n[![openupm](https://img.shields.io/npm/v/jp.setchi.fancyscrollview?label=openupm\u0026registry_uri=https://package.openupm.com\u0026style=flat)](https://openupm.com/packages/jp.setchi.fancyscrollview/)\n\n[English](https://translate.google.com/translate?sl=ja\u0026tl=en\u0026u=https://github.com/setchi/FancyScrollView) (by Google Translate)\n\n高度に柔軟なアニメーションを実装できる汎用の ScrollView コンポーネントです。 無限スクロールもサポートしています。\n\n\u003cimg src=\"https://user-images.githubusercontent.com/8326814/69004520-d2b36b80-0957-11ea-8277-06bfd3e8f033.gif\" width=\"320\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8326814/70638335-0b571400-1c7c-11ea-8701-a0d1ae0cb7e3.gif\" width=\"320\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8326814/59548448-a3549900-8f8a-11e9-9a27-b04f1410a7b5.gif\" width=\"320\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8326814/59548462-b8c9c300-8f8a-11e9-8985-5f1c2e610309.gif\" width=\"320\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8326814/59550410-7f528100-8fa5-11e9-8f1b-41e59b645571.gif\" width=\"320\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8326814/59550411-7f528100-8fa5-11e9-8bfb-bd42da47f7a0.gif\" width=\"320\"\u003e\n\n## Requirements\n[![Unity 2019.4+](https://img.shields.io/badge/unity-2019.4+-black.svg?style=flat\u0026logo=unity\u0026cacheSeconds=2592000)](https://unity3d.com/get-unity/download/archive)\n[![.NET 4.x Scripting Runtime](https://img.shields.io/badge/.NET-4.x-blueviolet.svg?style=flat\u0026cacheSeconds=2592000)](https://docs.unity3d.com/2018.3/Documentation/Manual/ScriptingRuntimeUpgrade.html)\n\n## Installation\n### Unity Asset Store\n[Unity Asset Store](https://assetstore.unity.com/packages/tools/gui/fancyscrollview-96530) から購入して、さらなる開発のサポートを検討してください。\n\n### OpenUPM\n[OpenUPM](https://openupm.com/) レジストリからパッケージを Unity Project に追加します。\n\n```\nopenupm add jp.setchi.fancyscrollview\n```\n\n### Unity Package Manager\nプロジェクトディレクトリの [`Packages/manifest.json`](https://docs.unity3d.com/Packages/com.unity.package-manager-ui@1.8/manual/index.html#project-manifests) ファイルにリポジトリへの参照を追加します。\n\n```json\n{\n  \"dependencies\": {\n    \"jp.setchi.fancyscrollview\": \"https://github.com/setchi/FancyScrollView.git#upm\"\n  }\n}\n```\n\n## Features\n### 自由にスクロールアニメーションを実装できます\nFancyScrollView はスクロール位置を更新するとき、ビューポート範囲の正規化された位置を各セルに渡します。セル側では `0.0` ~ `1.0` の値に基づいてスクロール中の位置や見た目を[セル自身で制御](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyCell-2.html#FancyScrollView_FancyCell_2_UpdatePosition_System_Single_)します。サンプルでは Animator や数式を使用してスクロール中の動きを実装しています。\n\n### データ件数が多くても軽快に動作します\n表示に必要なセル数のみが生成され、セルは再利用されます。 [Demo](https://setchi.jp/FancyScrollView/demo/) で実際にデータ件数を増やしながら動作を確認できます。 [FancyScrollRect](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyScrollRect-2.html) および [FancyGridView](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyGridView-2.html) では、[スクロール中にセルが再利用されるまでの余白](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyScrollRect-2.html#FancyScrollView_FancyScrollRect_2_reuseCellMarginCount)も指定できます。\n\n### セルとスクロールビュー間で自由にメッセージのやりとりができます\n`Context` 経由で、セルがクリックされたことをスクロールビューで検知したり、スクロールビューからセルに指示を出す処理がシンプルに実装できます。実装例（[Examples/02_FocusOn](https://github.com/setchi/FancyScrollView/tree/master/Assets/FancyScrollView/Examples/Sources/02_FocusOn)）が含まれていますので、参考にしてください。\n\n### 特定のセルにスクロールやジャンプができます\n移動にかける秒数や Easing の指定もできます。詳しくは [API Documentation](https://setchi.jp/FancyScrollView/api/FancyScrollView.html) の [Class Scroller](https://setchi.jp/FancyScrollView/api/FancyScrollView.Scroller.html#FancyScrollView_Scroller_ScrollTo_System_Single_System_Single_EasingCore_Ease_System_Action_) を参照してください。\n\n### スクロールの挙動を細かく設定できます\n慣性の有無、減速率などスクロールに関する挙動の設定ができます。詳しくは [API Documentation](https://setchi.jp/FancyScrollView/api/FancyScrollView.html) の [Class Scroller](https://setchi.jp/FancyScrollView/api/FancyScrollView.Scroller.html) を参照してください。\n\n### スナップをサポートしています\nスナップを有効にすると、スクロールが止まる直前に最寄りのセルへ移動します。スナップがはじまる速度のしきい値、移動にかける秒数、 Easing を指定できます。[FancyScrollRect](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyScrollRect-2.html) および [FancyGridView](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyGridView-2.html) はスナップをサポートしていません。\n\n### 無限スクロールをサポートしています\nInspector で下記の設定をすることで無限スクロールを実装できます。\n1. `FancyScrollView` の `Loop` をオンにするとセルが循環し、先頭のセルの前に末尾のセル、末尾のセルの後に先頭のセルが並ぶようになります。\n1. サンプルで使用されている `Scroller` を使うときは、 `Movement Type` を `Unrestricted` に設定することで、スクロール範囲が無制限になります。 1. と組み合わせることで無限スクロールを実現できます。\n\n実装例（[Examples/03_InfiniteScroll](https://github.com/setchi/FancyScrollView/tree/master/Assets/FancyScrollView/Examples)）が含まれていますので、こちらも参考にしてください。[FancyScrollRect](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyScrollRect-2.html) および [FancyGridView](https://setchi.jp/FancyScrollView/api/FancyScrollView.FancyGridView-2.html) は無限スクロールをサポートしていません。\n\n## Examples\n[![WebGL Demo](https://img.shields.io/badge/demo-WebGL-orange.svg?style=flat\u0026logo=google-chrome\u0026logoColor=white\u0026cacheSeconds=2592000)](https://setchi.jp/FancyScrollView/demo)\n\n[FancyScrollView/Examples](https://github.com/setchi/FancyScrollView/tree/master/Assets/FancyScrollView/Examples) を参照してください。\n\n| Name | Description |\n|:-----------|:------------|\n|01_Basic|最もシンプルな構成の実装例です。|\n|02_FocusOn|ボタンで左右のセルにフォーカスする実装例です。|\n|03_InfiniteScroll|無限スクロールの実装例です。|\n|04_Metaball|シェーダーを使用したメタボールの実装例です。|\n|05_Voronoi|シェーダーを使用したボロノイの実装例です。|\n|06_LoopTabBar|タブで画面を切り替える実装例です。|\n|07_ScrollRect|スクロールバー付きの `ScrollRect` スタイルの実装例です。|\n|08_GridView|グリッドレイアウトの実装例です。|\n|09_LoadTexture|テクスチャをロードして表示する実装例です。|\n\n## Usage\nもっともシンプルな構成では、\n\n- セルにデータを渡すためのオブジェクト\n- セル\n- スクロールビュー\n\nの実装が必要です。\n\n### Implementation\nセルにデータを渡すためのオブジェクトを定義します。\n```csharp\nclass ItemData\n{\n    public string Message { get; }\n\n    public ItemData(string message)\n    {\n        Message = message;\n    }\n}\n```\n`FancyCell\u003cTItemData\u003e` を継承して自分のセルを実装します。\n```csharp\nusing UnityEngine;\nusing UnityEngine.UI;\nusing FancyScrollView;\n\nclass MyCell : FancyCell\u003cItemData\u003e\n{\n    [SerializeField] Text message = default;\n\n    public override void UpdateContent(ItemData itemData)\n    {\n        message.text = itemData.Message;\n    }\n\n    public override void UpdatePosition(float position)\n    {\n        // position は 0.0 ~ 1.0 の値です\n        // position に基づいてスクロールの外観を自由に制御できます\n    }\n}\n```\n`FancyScrollView\u003cTItemData\u003e` を継承して自分のスクロールビューを実装します。\n```csharp\nusing UnityEngine;\nusing System.Linq;\nusing FancyScrollView;\n\nclass MyScrollView : FancyScrollView\u003cItemData\u003e\n{\n    [SerializeField] Scroller scroller = default;\n    [SerializeField] GameObject cellPrefab = default;\n\n    protected override GameObject CellPrefab =\u003e cellPrefab;\n\n    void Start()\n    {\n        scroller.OnValueChanged(base.UpdatePosition);\n    }\n\n    public void UpdateData(IList\u003cItemData\u003e items)\n    {\n        base.UpdateContents(items);\n        scroller.SetTotalCount(items.Count);\n    }\n}\n```\nスクロールビューにデータを流し込みます。\n```csharp\nusing UnityEngine;\nusing System.Linq;\n\nclass EntryPoint : MonoBehaviour\n{\n    [SerializeField] MyScrollView myScrollView = default;\n\n    void Start()\n    {\n        var items = Enumerable.Range(0, 20)\n            .Select(i =\u003e new ItemData($\"Cell {i}\"))\n            .ToArray();\n\n        myScrollView.UpdateData(items);\n    }\n}\n```\n\nその他の詳細は [Examples](https://github.com/setchi/FancyScrollView/tree/master/Assets/FancyScrollView/Examples) および [API Documentation](https://setchi.jp/FancyScrollView/api/FancyScrollView.html) を参照してください。\n\n## Author\n[setchi](https://github.com/setchi)\n\n## License\n[MIT](https://github.com/setchi/FancyScrollView/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetchi%2Ffancyscrollview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsetchi%2Ffancyscrollview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetchi%2Ffancyscrollview/lists"}