feat(animation): support animating width/height properties (WIP) by justindujardin · Pull Request #4917 · NativeScript/NativeScript · GitHub

Add support for animating width/height View properties.

Implements #1764

Supports animating PercentageLength properties
Works with Angular component animations
Works on Android
Works on iOS
Add example to examples app
- basic height animation
- height animation in stack layout
- animation curves tester
- details disclosure effect
Verify works as expected with "auto" height
Verify works with all built-in animation curves
Verify keyframe animation support
Add unit tests
- PercentLength.parse tests to verify input/output expectations
- View.animate resolves percentage width/height relative to parent
- View.animate works with pixel value strings
- View.animate works with number dip inputs
- View.animate works with number dip inputs
- Keyframe animation tests
- Spring curve tests (iOS has separate codepaths for spring)

Use with View.animate

view.animate({
  width:'40%', 
  height: '400px',
  duration: 300
});

Use with Angular

@Component({
  moduleId: module.id,
  selector: 'cool-component',
  template: `
      <Button (tap)="details = !details" text="Toggle"></Button>
      <Image backgroundColor="blue" height="100%"
             [@sizingImage]="details == true ? 'details' : 'summary'"></Image>
  `,
  animations: [
    trigger('sizingImage', [
      state('details', style({height: '55%'})),
      state('summary', style({height: '100%'})),
      transition('summary => details', animate('200ms ease-out')),
      transition('details => summary', animate('200ms ease-in')),
    ]),
  ]
})
export class CoolComponent {
  details = true;
}

Unfinished thoughts

There are a few limitations that could be lifted, but need input:

Layout values are not interpolated for Views on iOS. StackLayout height animations will "jump" a little. Would need to add some kind of periodic JS callback during the animation to do this.
View originX/Y values are different on iOS/Android by default. This means that height/width animations will act differently by default if the user does not specify origins explicitly on the View being animated.

Can one of the admins verify this patch?

- width/height can be specified in any valid PercentLength form that can be parsed. - make width/height properties be based on animatable CSS property. TODO: affectsLayout???? - add a few basic tests. Could probably use a few more? - fix a few null pointer exceptions in PercentLength helpers

- basic height animation - height animation in StackLayout - fix an issue where strings were not automatically converted to PercentLength when calling directly into `View.animate`

I added a few UI tests. With StackLayout there is a difference between how the animation looks on iOS and Android.

Android

A time update function is required to animate height on a view, so the layout updates smoothly as you would expect.

https://user-images.githubusercontent.com/101493/31256882-fd9e9e8e-a9e9-11e7-9b67-51c7d09bc905.gif

iOS

There is no time update callback in Javascript, so the value isn't animated as far as the {N} Layout is concerned.

https://user-images.githubusercontent.com/101493/31256879-f80ea4a0-a9e9-11e7-8021-b35ed081746b.gif

What to do?

It looks like there are some options to add a javascript callback that could update the Layout value over time on iOS, but it would almost certainly slow things down and add complexity.

It's not clear to me if it's worth slowing down all height animations to satisfy a particular layout constraint. e.g. this poor animation would have to pay for a feature it doesn't need. 😭

https://user-images.githubusercontent.com/101493/31257754-51e1a37e-a9ef-11e7-9815-8cb5fbc31a0a.gif

Thoughts?

- use height transition to cover textview content. - when clicking on the summary view, animate the summary height up to a small header and show the text view. - fake animating the height on the textview by very subtly animating its translateY value while shrinking the header height. This tricks your mind into think that the text view is also vertically growing, even thought it's just slightly moving up along the Y axis.

- verify all built-in animation curve types work as expected.

Added a few more examples to test corner cases:

Scrolling text view with animated header

https://user-images.githubusercontent.com/101493/31301337-0ac163fc-aaae-11e7-817d-4833c95a9cca.gif

Animation curves

https://user-images.githubusercontent.com/101493/31301334-040b38a8-aaae-11e7-9853-9ada0fa49a63.gif

I missed testing a few things, so I put this back in WIP, but I still welcome reviews/feedback.

Hey @justindujardin, thank you for your contribution. We are going to execute some tests and review the PR.

@justindujardin 🥇🥇🥇

…IP) (#4917)" This reverts commit 57ed0cf.

…IP) (#4917)" (#5136) This reverts commit 57ed0cf.

…rties (WIP) (#4917)" (#5136)" This reverts commit 8973a6f.

is this scheduled for release?

How can I know if this already available and on which version?

Hello All,

Great work on this pull-request! You can follow the progress on it here.

Our main concerns with this implementation are related to performance. I am afraid that we have not had the time to measure and investigate it due to higher priority tasks. However, we are aware of its importance and wide demand, that is why we would like to invest further efforts and improve this feature as well as the animations at all.

This has not been scheduled for release yet. Currently, we are working on the 4.1 roadmap, so I hope we could get it there. Please follow the issue and this pull-request for any comments and updates.

…rties (WIP) (#4917)" (#5136)" This reverts commit 8973a6f.

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.

ghost added the ♥ community PR label Oct 4, 2017

ns-bot added the cla: yes label Oct 4, 2017

justindujardin force-pushed the animate-width-height branch from 85a84ac to a259a1f Compare October 4, 2017 22:30

justindujardin force-pushed the animate-width-height branch 2 times, most recently from 4845d64 to 05e021a Compare October 5, 2017 23:13

test(ui): add animation examples to ui-tests-app

7b9ed16

- basic height animation - height animation in StackLayout - fix an issue where strings were not automatically converted to PercentLength when calling directly into `View.animate`

justindujardin force-pushed the animate-width-height branch from 05e021a to 7b9ed16 Compare October 6, 2017 00:06

justindujardin force-pushed the animate-width-height branch from 6089f26 to ef147a6 Compare October 6, 2017 19:33

justindujardin force-pushed the animate-width-height branch 2 times, most recently from d8a5d30 to b2b38e4 Compare October 6, 2017 21:51

test(ui): add animation curves test page

11e14d2

- verify all built-in animation curve types work as expected.

justindujardin force-pushed the animate-width-height branch from b2b38e4 to 11e14d2 Compare October 6, 2017 21:52

justindujardin changed the title feat(animation): support animating width/height properties feat(animation): support animating width/height properties (WIP) Oct 14, 2017

NativeScript deleted a comment from ns-bot Dec 4, 2017

PanayotCankov approved these changes Dec 5, 2017

View reviewed changes

SvetoslavTsenov merged commit 57ed0cf into NativeScript:master Dec 5, 2017

justindujardin deleted the animate-width-height branch December 5, 2017 17:28

vchimev pushed a commit that referenced this pull request Dec 6, 2017

Revert "feat(animation): support animating width/height properties (W…

f156acb

…IP) (#4917)" This reverts commit 57ed0cf.

SvetoslavTsenov mentioned this pull request Dec 6, 2017

Revert "feat(animation): support animating width/height properties (W… #5136

Merged

vchimev pushed a commit that referenced this pull request Dec 7, 2017

Revert "feat(animation): support animating width/height properties (W…

20c7621

…IP) (#4917)" This reverts commit 57ed0cf.

vchimev pushed a commit that referenced this pull request Dec 7, 2017

Revert "feat(animation): support animating width/height properties (W…

8973a6f

…IP) (#4917)" (#5136) This reverts commit 57ed0cf.

vchimev pushed a commit that referenced this pull request Dec 7, 2017

Revert "Revert "feat(animation): support animating width/height prope…

6ab01de

…rties (WIP) (#4917)" (#5136)" This reverts commit 8973a6f.

vchimev mentioned this pull request Dec 7, 2017

feat(animation): support animating width/height properties #5147

Merged

MartoYankov pushed a commit that referenced this pull request May 7, 2019

Revert "Revert "feat(animation): support animating width/height prope…

66d631e

…rties (WIP) (#4917)" (#5136)" This reverts commit 8973a6f.

VladimirAmiorkov pushed a commit that referenced this pull request Jun 6, 2019

Revert "Revert "feat(animation): support animating width/height prope…

cd96687

…rties (WIP) (#4917)" (#5136)" This reverts commit 8973a6f.

lock Bot locked and limited conversation to collaborators Aug 26, 2019

feat(animation): support animating width/height properties (WIP) by justindujardin · Pull Request #4917 · NativeScript/NativeScript · GitHub

Uh oh!

feat(animation): support animating width/height properties (WIP) - #4917

feat(animation): support animating width/height properties (WIP)#4917SvetoslavTsenov merged 11 commits intoNativeScript:masterNativeScript/NativeScript:masterfrom justindujardin:animate-width-heightjustindujardin/NativeScript:animate-width-heightCopy head branch name to clipboard

Conversation

justindujardin commented Oct 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Use with View.animate

Use with Angular

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

ns-bot commented Oct 4, 2017

Uh oh!

justindujardin commented Oct 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Android

iOS

What to do?

Uh oh!

justindujardin commented Oct 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justindujardin commented Oct 14, 2017

Uh oh!

SvetoslavTsenov commented Dec 4, 2017

Uh oh!

jogboms commented Dec 5, 2017

Uh oh!

davecoffin commented Dec 27, 2017

Uh oh!

mid787 commented Feb 23, 2018

Uh oh!

vchimev commented Mar 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lock Bot commented Aug 26, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

feat(animation): support animating width/height properties (WIP)#4917
SvetoslavTsenov merged 11 commits into
NativeScript:masterfrom
justindujardin:animate-width-height

justindujardin commented Oct 4, 2017 •
edited
Loading

justindujardin commented Oct 6, 2017 •
edited
Loading

justindujardin commented Oct 6, 2017 •
edited
Loading

vchimev commented Mar 16, 2018 •
edited
Loading