首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【开源】LLMAnimator 60多种动画让你的应用动起来

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

作者头像
用户1147588
发布2018-01-04 10:43:31
6040
发布2018-01-04 10:43:31
举报
文章被收录于专栏:技术/开源技术/开源

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     }

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-03-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档