SwiftUI Animation's timingcurve creation

user_9480608 0
Viewed 1503

Along with predefined animation curves these is an option to set a timing curve using timingcurve(::::duration:). What is the meaning of its parameters (c0x,c0y, c1x, c1y)? How is the curve built? Documentation is lacking.

swiftui swift
1 Answers

I'm only guessing as much as I can with the information we're given.

From the docs...

static func timingCurve(_ c0x: Double, _ c0y: Double, _ c1x: Double, _ c1y: Double, duration: Double = 0.35) -> Animation

It looks like the four numbers are actually a pair of x, y coordinates.

c0 = (c0x, c0y)
c1 = (c1x, c1y)

We also know that this is going to generate an easing curve which will start at time 0, animation %age 0 and end at time 1, animation %age 100.

So... I'm guessing these parameters are control points for a cubic bezier curve.

We would have four control points.

  1. The start point (0, 0)
  2. The first parameter c0
  3. The second parameter c1
  4. The end point (1, 1)

So, you need to provide the control points to generate the cubic curve that would describe the timing curve that you would like to use.

You can use this website https://cubic-bezier.com/#.17,.67,.82,.38 to have a look at how those properties change the curve.

As a basic example a timing curve like "ease-in-out" with a duration of 1 second would use parameters like...

timingCurve(0.42, 0, 0.58, 1, duration: 1.0)

Hope that helps.

user_4210180
Related