Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI Animation's timingcurve creation

Tags:

swift

swiftui

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.

like image 556
Paul B Avatar asked Jun 23 '20 13:06

Paul B


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.

like image 91
Fogmeister Avatar answered Oct 20 '22 23:10

Fogmeister