开源LLMAnimator 60多种动画让你的应用动起来

Posted 2020-06-26 布鲁克石

github:  https://github.com/brookshi/LLMAnimator ，欢迎star/fork

之前做android的时候需要给应用加些动画效果，在github上找到这个库：

https://github.com/daimajia/AndroidViewAnimations，用起来挺方便，效果也不错。

现在做uwp，想要加些动画就想到这个库，于是开发了LLMAnimator，算是上面android库的uwp移植版本。

先看效果：

 

用起来也很简单：

1 Animator.Use(AnimationType.Bounce)  //使用哪种动画
2         .SetDelay(TimeSpan.FromSeconds(3))  //延迟执行，默认立即执行
3         .SetDuration(TimeSpan.FromMilliseconds(1000))  //动画播放时间，每个动画都有自己的默认时间，一般不需要设置
4         .SetRepeatBehavior(new RepeatBehavior(10))  //重复次数，默认1次
5         .PlayOn(target);  //动画目标
6 
7 Animator.Use(AnimationType.Bounce).PlayOn(target);  // 一般这样就好了，简单

动画类型都在AnimationType里面，有63种，算是包括各种常用的了，免去了自己创建动画一个一个写storyboard的痛苦。

 1 public enum AnimationType
 2     {
 3         Bounce,
 4         Flash,
 5         Pulse,
 6         RubberBand,
 7         Shake,
 8         StandUp,
 9         Swing,
10         Tada,
11         Wave,
12         Wobble,
13 
14         BounceIn,
15         BounceInDown,
16         BounceInUp,
17         BounceInLeft,
18         BounceInRight,
19 
20         FadeIn,
21         FadeInDown,
22         FadeInUp,
23         FadeInLeft,
24         FadeInRight,
25 
26         FadeOut,
27         FadeOutDown,
28         FadeOutUp,
29         FadeOutLeft,
30         FadeOutRight,
31 
32         FlipInX,
33         FlipInY,
34 
35         FlipOutX,
36         FlipOutY,
37 
38         RotateIn,
39         RotateInDownLeft,
40         RotateInDownRight,
41         RotateInUpLeft,
42         RotateInUpRight,
43 
44         RotateOut,
45         RotateOutDownLeft,
46         RotateOutDownRight,
47         RotateOutUpLeft,
48         RotateOutUpRight,
49 
50         SlideInDown,
51         SlideInUp,
52         SlideInLeft,
53         SlideInRight,
54 
55         SlideOutDown,
56         SlideOutUp,
57         SlideOutLeft,
58         SlideOutRight,
59 
60         ZoomIn,
61         ZoomInDown,
62         ZoomInUp,
63         ZoomInLeft,
64         ZoomInRight,
65 
66         ZoomOut,
67         ZoomOutDown,
68         ZoomOutUp,
69         ZoomOutLeft,
70         ZoomOutRight,
71 
72         Hinge,
73         RollIn,
74         RollOut,
75         DropOut,
76         Landing,
77         TakingOff,
78     }

View Code

如果有其他动画需求，也可以留言。

实现也很简单，以Bounce为例：

 1 public class BounceAnimation : AnimationBase
 2     {
 3         public BounceAnimation()
 4         {
 5             Duration = TimeSpan.FromMilliseconds(800);
 6         }
 7 
 8         public override IAnimation PlayOn(UIElement target, Action continueWith)
 9         {
10             var transform = Utils.PrepareTransform(target, typeof(CompositeTransform));
11 
12             var storyboard = PrepareStoryboard(continueWith);
13 
14             AddAnimationToStoryboard(storyboard, transform, CreateAnimation(), "TranslateY");
15 
16             storyboard.Begin();
17 
18             return this;
19         }
20 
21         Timeline CreateAnimation()
22         {
23             DoubleAnimationUsingKeyFrames frames = new DoubleAnimationUsingKeyFrames();
24             var firstTimeSpan = TimeSpan.FromMilliseconds(Duration.TotalMilliseconds / 8);
25 
26             frames.KeyFrames.Add(new EasingDoubleKeyFrame()
27             {
28                 EasingFunction = new SineEase()
29                 {
30                     EasingMode = EasingMode.EaseIn
31                 },
32                 KeyTime = KeyTime.FromTimeSpan(firstTimeSpan),
33                 Value = -8,
34             });
35             frames.KeyFrames.Add(new EasingDoubleKeyFrame()
36             {
37                 EasingFunction = new BounceEase()
38                 {
39                     Bounces = 2,
40                     Bounciness = 1.3,
41                     EasingMode = EasingMode.EaseOut
42                 },
43                 KeyTime = KeyTime.FromTimeSpan(Duration),
44                 Value = 0,
45             });
46 
47             return frames;
48         }
49     }

和大家平常创建动画的过程一样，这个库只是把常用的动画都集合在一起，这样用起来很方便，希望大家喜欢。