> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/layout/types/timelineview.md).

# TimelineView

```swift
// declaration
struct TimelineView<Schedule, Content> where 
    Schedule : TimelineSchedule
```

{% tabs %}
{% tab title="code" %}

```swift
struct TimelineBlobView: View {
    var body: some View {
        TimelineView(.animation) { context in
            
            let x = context.date.timeIntervalSinceReferenceDate
            let t = cos(x)
            
            Text("\(t)")
                .padding()
                .frame(width: 300)
                .border(.black)

            Canvas { context, size in
                context.fill(
                    path(in: size.rect, t: t),
                    with: .linearGradient(
                        Gradient(colors: [.pink, .blue]),
                        startPoint: size[0,0],
                        endPoint  : size[1,1]
                    )
                )
            }
        }
    }
    
    func path(in rect: CGRect, t: Double) -> Path {
        Path { path in
            path.move(to: rect[1.0, 0.4])
            path.addCurve(to: rect[0.6, 1.0], control1: rect[0.9, 0.8], control2: rect[0.9, 1.0])
            path.addCurve(to: rect[0.1, 0.6], control1: rect[0.4, 1.0], control2: rect[0.3, 0.8])
            path.addCurve(to: rect[0.3, 0.1*t], control1: rect[-0.1, 0.4], control2: rect[0.0, 0.2*t])
            path.addCurve(to: rect[1.0, 0.4], control1: rect[0.7, -0.1*t], control2: rect[1.0, 0.1])
            path.closeSubpath()
        }
    }
}
```

{% endtab %}

{% tab title="📗 參考" %}

* SwiftUI Lab ⟩ [Advanced SwiftUI Animations — Part 4: TimelineView](https://swiftui-lab.com/swiftui-animations-part4/) #todo
* Design+Code ⟩ [TimelineView Animation in Canvas](https://designcode.io/swiftui-ios15-timelineview-animation-in-canvas)
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui)
  * [View Layout and Presentation](https://developer.apple.com/documentation/swiftui/view-layout-and-presentation)
    * [TimelineView](https://developer.apple.com/documentation/swiftui/timelineview) ⟩
      * :parking: [TimelineSchedule](https://developer.apple.com/documentation/swiftui/timelineschedule)
      * :package:[TimelineView.Context](https://developer.apple.com/documentation/swiftui/timelineview/context)
        {% endtab %}
        {% endtabs %}