Cross platform animation-timing-function / easing

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.

I think we need bounce/spring animation in ios/android, in ios can we use :

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

And I see @ the source code, ios animation keyframe option is not using the right option, maybe its not used like it intended to do ? The options should be :

Linear: makes the animation go from one point to the next, through each point in between.
Discrete: makes the animation leap directly from one point to the next. This option is presumably useful when you are specifying each frame in an animation
Paced: makes the animation "evenly paced", whatever that means. It seems to make it ignore either the start time or duration of the key frames, but not in a predictable way, so I'm not sure why you'd want to do that.
Cubic: uses the default Catmull-Rom spline (me neither) to interpolate between the keyframe values. Basically this smooths out any rough edges created by your key frame points.
Cubic paced: a cross between Cubic and Paced.

and not UIViewKeyframeAnimationOptionBeginFromCurrentState like in animation.ios.ts

But then again it still using setAnimationCurve and not from the above options

You are right.
I will check if the easing is applied at the moment.

We wouldn't use keyframe animations here, but we have problems with a particular case where an animation is applied and a view was moved from one point to another, but half way the animation, it is interrupted by a second animation that wants to move it to a third point. The animateWithDuration:delay:options:animations:completion: has the EaseInOut, EaseIn, EaseOut, Linear easing but when its UIViewAnimationOptionBeginFromCurrentState was set it couldn't handle well when 2 out of the three translation, rotation and scale were set. It looked like the transformation matrix was not properly decomposed when the second animation starts and the view jumps before the second animation. We may be forced to provide a continue from current state like option and switch between the 3 APIs based on this and the animation easing:

animateWithDuration:delay:options:animations:completion:
animateKeyframesWithDuration:delay:options:animations:completion:
animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

Or switch to CoreAnimation completely and animate the UIView's layer.

I see, is it related to using JavaScript instead of objective c? Or is it the bug in animation api?

The problems we had that made us use the keyframes API are reproducible in pure Objective-C app.

Oh wow, thats quite a bug for iOS

@tzraikov

@tzraikov did splendid job on this one. We now have support of besier and spring curves as well the animations can begin-from-current-state.

spring for both?

@x4080

@x4080 I think in android he uses BounceInterpolator. You can check the PR, referred above. Feedback is welcomed. If you find problems please open a new issue. :) In iOS he used the spring animations overall moved to the CoreAnimation framework.

Nice, since we in the topic, I found that if we move or animate view in ios then a rotation occurs, the view position is back to before move or animation. Which didn't happened in Android, will this fix this problem too?

I guess not, tried it in 1.6

@x4080

@x4080 @tzraikov Is working on the animations. This may be fixed, but please open new issues when you find new problems. This issue is now closed.

Ok

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

Cross platform animation-timing-function / easing #1363

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cross platform animation-timing-function / easing #1363

Description

Activity

x4080 commented on Jan 13, 2016

PanayotCankov commented on Jan 13, 2016

x4080 commented on Jan 13, 2016

PanayotCankov commented on Jan 13, 2016

x4080 commented on Jan 13, 2016

PanayotCankov commented on Feb 15, 2016

x4080 commented on Feb 16, 2016

PanayotCankov commented on Feb 16, 2016

x4080 commented on Feb 16, 2016

x4080 commented on Mar 11, 2016

PanayotCankov commented on Mar 11, 2016

x4080 commented on Mar 11, 2016

lock commented on Aug 30, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions