Skip to content

Cross platform animation-timing-function / easing #1363

@PanayotCankov

Description

@PanayotCankov

Consider the following articles about the CSS3 animation-timing-function:

Consider exposing cross platform abstraction for as much as possible from the CSS3 easing functions. The linear, ease-in, ease-out, ease-in-out should be easily achieved since they are defined as constants in iOS and there are corresponding Accelerate/Decelerate/AccelerateDecelerate Interpolators in android.

besier-curve for iOS have a reference in CAMediaTimingFunction but it is available in CoreAnimation API instead the UIKit we are using. It will require further investigation if we can use CA instead UI animations. For android PathInterpolator with Path and the ["cubicTo"](http://developer.android.com/reference/android/graphics/Path.html#cubicTo%28float, float, float, float, float, float%29) API to draw the besier curve.

steps looks impossible for iOS, can be achieved with PathInterpolator for android. Since it does not really look like a true animation I guess we can ignore it anyway.

bounce/spring are desirable but it seems some of them can be achieved only by using multiple keyframes with adequate besier timing functions in iOS.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions