NiftyDialogEffects

在这个网站上有很多用js实现的对话框效果：http://tympanus.net/Development/ModalWindowEffects/

现在有人做出了相同效果的android版本，几乎和上面的一模一样,界面如下：

动画效果：

要查看更多的动画效果请参考上面给出的网站链接。

该项目的git地址为：https://github.com/sd6352051/NiftyDialogEffects

可能该项目是用android studio创建的吧，但是因为被墙的原因android studio不是很好用。虽然不能直接导入eclipse，不过相信有点基础知识的都会转为eclipse项目的。

用法示例;

1. NiftyDialogBuilder dialogBuilder=NiftyDialogBuilder.getInstance(this);
2. dialogBuilder
3. .withTitle("Modal Dialog")
4. .withMessage("This is a modal Dialog.")
5. .show();

和alertdialog的用法类似。上面是最简单的用法，如果要运用动画等更多其他参数设置，可以参考下面的用法：

更多参数设置：

1. dialogBuilder
2. .withTitle("Modal Dialog")//.withTitle(null) no title
3. .withTitleColor("#FFFFFF")//def
4. .withDividerColor("#11000000")//def
5. .withMessage("This is a modal Dialog.")//.withMessage(null) no Msg
6. .withMessageColor("#FFFFFF")//def
7. .withIcon(getResources().getDrawable(R.drawable.icon))
8. .withDuration(700)//def
9. .withEffect(effect)//def Effectstype.Slidetop
10. .withButton1Text("OK")//def gone
11. .withButton2Text("Cancel")//def gone
12. .isCancelableOnTouchOutside(true)//def | isCancelable(true)
13. .setCustomView(R.layout.custom_view,v.getContext())//.setCustomView(View or ResId,context)
14. .setButton1Click(newView.OnClickListener(){
15. @Override
16. publicvoid onClick(View v){
17. Toast.makeText(v.getContext(),"i'm btn1",Toast.LENGTH_SHORT).show();
18. }
19. })
20. .setButton2Click(newView.OnClickListener(){
21. @Override
22. publicvoid onClick(View v){
23. Toast.makeText(v.getContext(),"i'm btn2",Toast.LENGTH_SHORT).show();
24. }
25. })
26. .show();

简要的介绍下该项目的实现方法：

dialog部分的代码很少，其实就是自定义了一个继承子Dialog的NiftyDialogBuilder，并实现了DialogInterface。

其中非常重要的是

1. this.setOnShowListener(newOnShowListener(){
2. @Override
3. publicvoid onShow(DialogInterface dialogInterface){
4. mLinearLayoutView.setVisibility(View.VISIBLE);
5. if(type==null){
6. type=Effectstype.Slidetop;
7. }
8. start(type);
9. }
10. });

监听对话框开始显示的事件，然后设置动画类型，之后调用start方法将动画效果运用到dialog的contentview中：

1. privatevoid start(Effectstype type){
2. BaseEffects animator= type.getAnimator();
3. if(mDuration!=-1){
4. animator.setDuration(Math.abs(mDuration));
5. }
6. animator.start(mRelativeLayoutView);
7. }

mRelativeLayoutView就是dialog的contentview的主要部分，Effectstype可以获得各种动画类型，每一种动画类型都是有专门的类实现的。

动画类型部分：

有如下动画类型：

所有动画类型都继承子抽象类BaseEffects

1. publicabstractclassBaseEffects{
2. privatestaticfinalint DURATION=1*700;
3. protectedlong mDuration=DURATION;
4. privateAnimatorSet mAnimatorSet;
5. {
6. mAnimatorSet =newAnimatorSet();
7. }
8. protectedabstractvoid setupAnimation(View view);
9. publicvoid start(View view){
10. reset(view);
11. setupAnimation(view);
12. mAnimatorSet.start();
13. }
14. publicvoid reset(View view){
15. ViewHelper.setPivotX(view, view.getMeasuredWidth()/2.0f);
16. ViewHelper.setPivotY(view, view.getMeasuredHeight()/2.0f);
17. }
18. publicAnimatorSet getAnimatorSet(){
19. return mAnimatorSet;
20. }
22. publicvoid setDuration(long duration){
23. this.mDuration= duration;
24. }
25. }

以SlideTop为例介绍是如何实现该抽象类的：

1. publicclassSlideTopextendsBaseEffects{
2. @Override
3. protectedvoid setupAnimation(View view){
4. getAnimatorSet().playTogether(
5. ObjectAnimator.ofFloat(view,"translationY",-300,0).setDuration(mDuration),
6. ObjectAnimator.ofFloat(view,"alpha",0,1).setDuration(mDuration*3/2)
7. );
8. }
9. }

这些动画放到一个叫Effectstype的枚举类中，然后需要的时候直接调用type.getAnimator()方法就能得到动画的实例，就像start方法中做的那样。