Issues regarding `Storyboard` and `DoubleAnimation`

poepoe12002 commented 6 years ago

I'm submitting a...

Bug report (I searched for similar issues and did not find one) Feature request

Current behavior

The code snippets below don't work as expected on Android and Wasm

Expected behavior

In Case 02 - The code should animate a rectangle to grow in size and stop then repeat the behavior.
In Case 03 - The code should animate a rectangle to grow in size then shrink in size then repeat the behavior.

Minimal reproduction of the problem with instructions

    Case 01 - Grow then stop
-------------------------------------------------   
Expected result of running the code as presented below - 
with DoubleAnimation.RepeatBehavior and DoubleAnimation.AutoReverse commented out:
    Rectangle grows in size from H(0), W(0) to H(50), W(50).
    This occurs over a period of five seconds.

Actual result on Android: Correct and inline with UWP       
Actual result on Wasm: Correct and inline with UWP      
Actual result on iOS: NA

Case 02 - Grow then stop then repeat
-------------------------------------------------
Expected result of running the code after Un-Commenting out -
<DoubleAnimation.RepeatBehavior>Forever</DoubleAnimation.RepeatBehavior>:   
    The rectangle should grow in size from H(0), W(0) to H(50), W(50).
    This should occur over a period of five seconds.
    The rectangle Should disapear and the behavior should repeat.  
    This should continue until the application terminates.

Actual result on Android: PROBLEM   
    The rectangle does grow from H(0), W(0) to H(50), W(50). 
    It then instantly expands to fill the screen and will continue to fill the screen. (PROBLEM)
    Every 5 seconds the screen will flicker.  Storyboard must still be acting.
    This continues until the application terminates.

Actual result on Wasm: Correct and inline with UWP      
Actual result on iOS: NA

Case 03 - Grow then shrink then repeat
-------------------------------------------------
Expected result of the code after Un-Commenting out -
<DoubleAnimation.RepeatBehavior>Forever</DoubleAnimation.RepeatBehavior> and -
<DoubleAnimation.AutoReverse>True</DoubleAnimation.AutoReverse>:    
    The rectangle should grow in size from H(0), W(0) to H(50), W(50).
    This should occur over a period of five seconds. 
    The animation will then reverse itself.
    The rectangle should then shrink in size from H(50), W(50) to H(0), W(0).
    The two step behavior should repeat.   
    This should continues until the application terminates.

Actual result on Android: PROBLEM
    The rectangle does grow from H(0), W(0) to H(50), W(50).
    Then it instantly expands to fill the screenand will continue to fill the screen. (PROBLEM)
    Every 5 seconds the screen will flicker.  Storyboard must still be acting.
    This continues until the application terminates.

Actual result on Wasm: PROBLEM
    The rectangle does grow in size from 0,0 to 50,50.
    This occurs over a period of five seconds.  
    The rectangle then disapears completly and the behavior repeats. (PROBLEM)  
    This continues until the application terminates.

Actual result on iOS: NA

 Xaml -----
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="GrowStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="TheRectangle"
                Storyboard.TargetProperty="Width"
                EnableDependentAnimation="True"
                From="0.0"
                To="50.0"
                Duration="0:0:5">
                <!--<DoubleAnimation.RepeatBehavior>Forever</DoubleAnimation.RepeatBehavior>
                <DoubleAnimation.AutoReverse>True</DoubleAnimation.AutoReverse>-->
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetName="TheRectangle"
                Storyboard.TargetProperty="Height"
                EnableDependentAnimation="True"
                From="0.0"
                To="50.0"
                Duration="0:0:5">
                <!--<DoubleAnimation.RepeatBehavior>Forever</DoubleAnimation.RepeatBehavior>
                <DoubleAnimation.AutoReverse>True</DoubleAnimation.AutoReverse>-->
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <Rectangle
        Name="TheRectangle"
        Stretch="Fill"
        Fill="Blue">
    </Rectangle>
</Grid>

 Code behind-----
 GrowStoryboard.Begin();

Environment

Nuget Package: 

Package Version(s): 

Affected platform(s):
- [ ] iOS
- [x ] Android
- [x ] WebAssembly
- [ ] Windows
- [ ] Build tasks

Visual Studio
- [x ] 2017 (version: )
- [x ] 2017 Preview (version: )
- [ ] for Mac (version: )

jeromelaban commented 6 years ago

Thanks for the detailed report ! We still have work to do to bring animations to the next level, such as supporting AutoReverse.

YGuerin commented 4 years ago

Encouter a simular issue using a DoubleAnimation to perform a TranslateTransform on a Grid. Working well on UWP. Doesn't work on iOS and Android. WASM is not in our scope so I can't confirm that point.

<DoubleAnimation Storyboard.TargetName="PreviewBanner"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                 Duration="0:0:0.35"
                 To="80">
    <DoubleAnimation.EasingFunction>
        <QuadraticEase EasingMode="EaseIn" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="ZoomedOutBanner"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                 Duration="0:0:0.35"
                 To="0">
    <DoubleAnimation.EasingFunction>
        <QuadraticEase EasingMode="EaseIn" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>

dr1rrb commented 4 years ago

Quick status of the DoubleAnimation:

		iOS	Android	Wasm
Repeat	Forever	yes	no	yes
	Duration	no	no	no
	Count	no	no	no
AutoReverse		no	no	no
BeginTime		yes	yes	yes
SpeedRatio		no	no	no

Notes:

This was built using the sample above, which is using dependant animations, the result might be slightly different for GPU animations.
Running 2 separated animations on a same element is known to cause some issues. For instance when testing the BeginTime on WASM, the 2 animations was not synchronized and the result was a bit strange.
Some easing functions are not supported yet

There are too much changes to get it fixed in the bug bash, this work has to be planned.

Xiaoy312 commented 1 year ago

case2: [droid-only] dependent animation stops working after 1loop

debug note

``` AnimationImplementation::OnFrame() if (_endValue == null || _startingValue == null) ^ on first loop, both values are provided from context (0, 50) ^ after that, the _startingValue is null which cause the animation to appear not working { SetValue(null); return; } SetValue( /* INSERT_MATH */ ); looping call stack 5 Windows.UI.Xaml.Media.Animation.Timeline.AnimationImplementation.InitializeAnimator at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Timeline.animation.cs:221,5 4 Windows.UI.Xaml.Media.Animation.Timeline.AnimationImplementation.Play at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Timeline.animation.cs:280,5 3 Windows.UI.Xaml.Media.Animation.Timeline.AnimationImplementation.Replay at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Timeline.animation.cs:213,5 2 Windows.UI.Xaml.Media.Animation.Timeline.AnimationImplementation.OnEnd at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Timeline.animation.cs:340,6 1 Windows.UI.Xaml.Media.Animation.Timeline.AnimationImplementation.OnAnimatorAnimationEnd at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Timeline.animation.cs:264,5 0 Windows.UI.Xaml.Media.Animation.NativeValueAnimatorAdapter. at D:\code\uno\framework\uno\src\Uno.UI\UI\Xaml\Media\Animation\Animators\NativeValueAnimatorAdapter.Android.cs:120,7 at frame[5], the _startingValue is set to a new value then at frame[1], we clear it... private void OnAnimatorAnimationEnd(object sender, EventArgs e) // frame[1] OnEnd(); // frame[2..] _startingValue = null; ^ just move the clear into OnEnd, in the else-part of `if (NeedsRepeat(_activeDuration, _replayCount))` fix the bug additional note: the reason why this only fail for android, is because only android relies on \_endValue & \_startingValue as they are used to compute the animated value: f(start,end,time) =... while the rest grab it from the animator implementation ```

case3: [uno-any] AutoReverse is just not implemented...

unoplatform / uno