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

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     }

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

实现也很简单,以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     }

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

时间: 2024-10-13 03:05:22

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

【原】Github系列之二:开源 支持多种形式多种动画风格的推送小红点WZLBadge(iOS)

概述 今天我们来实现一个在iOS中让人又爱又恨的推送“小红点”WZLBadge.那什么是badge呢?当后台有数据更新需要让用户知道时,在按钮或者其他控件上显示一个“小红点”提醒用户.注意,这里的“小红点”仅仅是泛指,实际的视图可以天马行空,在这个版本中我们先实现以下几种: 小红点 红底白字“new” 红底白字数字 为了让小红点显示后更加醒目,在这个版本中我又实现了三种不同的状态动画(status animation): 心脏跳动效果(WBadgeAnimTypeScale) 呼吸灯效果(WBa

实用CSS3的transform实现多种动画效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="http://keleyi.com"> <title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" /> <s

仿映客客户端、TableView多种动画效果、边缘返回手势等源码

iOS精选源码 相册多选框架 zhPopupController 简单快捷弹出自定义视图 tableView实现多种动画效果 自定义动画的PageControl 展示tableView和collectionView的结构,框架CHD_ListView_Structure RxSwift+Moya+ObjectMapper优雅的网络请求级模型转换 多种指示器文字效果源码SGPagingView react-native低仿映客直播客户端 支持iOS/Android ScreenEdgePanGes

NiftyDialogEffects:集成了多种动画效果的Dialog控件

在这个网站上有很多用js实现的对话框效果:http://tympanus.net/Development/ModalWindowEffects/ 现在有人做出了相同效果的android版本,几乎和上面的一模一样,界面如下: 动画效果: 要查看更多的动画效果请参考上面给出的网站链接. 该项目的git地址为:https://github.com/sd6352051/NiftyDialogEffects 可能该项目是用android studio创建的吧,但是因为被墙的原因android studio

全球网上零售巨头宣布接受60多种加密货币作为支付方式

电商与数字货币相结合已经形成趋势了. 就在近期,全球网上零售巨头:overstock已经全球网上零售巨头Overstock已经与加密货币交易所ShapeShift达成合作,这家零售商的网上商店已经开始接受60多种加密货币进行支付. Overstock在公告中表示消费者现在可以在结账时使用ETH.莱特币.达世币和Bitcoin Cash等进行支付,Overstock此前已经接受过比特币作为支付方式. Overstock最初于2104年接受比特币作为支付方式,此后它一直积极发展数字货币与电商结合,甚

WPF中的动画——(四)缓动函数

缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. ????var widthAnimation = new DoubleAnimation()????{????????From = 0,????????To = 320,????????Duration = TimeSpan.FromSeconds(1),????????EasingFunction = new BackEase()????????{

WPF中的动画——(四)缓动函数(转)

WPF中的动画——(四)缓动函数 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.FromSeconds(1),        EasingFunction = new BackEa

多种动画效果的结合使用方法以及Interpolator简介

Interpolator的两种用法属性 1.在xml中设置android:interpolator="@android:anim/accelerate_decelerate_interpolator" 2.在.java文件中设置,有两种情况 若设置为true,则统一interpolator速度: AnimationSet animationSet = new AnimationSet(true); 若设置为false,则需要单独为各个动画设置interpolator Animation

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配