Question

我看到了这个设计模型here，我认为按钮流程非常棒。知道如何在Android上做到这一点？或者它是iOS特定的吗？还是根本不可行？我在前端android设计方面没有多少经验。

Answer 1

这当然可行。我会查看android的view属性动画师。你可以采用不同的方式。一种方法是直接为视图设置动画。所以说你底部有两个按钮，就像你发布的链接一样。创建活动或片段后，初始化按钮，然后将其可见性设置为View.INVISIBLE。这样他们就不会被用户看到，也不会被点击。

然后，您可以使用xml动画为按钮设置动画。你需要制作一个动画，使按钮看起来像是在出现。因此，在您的项目中，在资源下创建一个文件夹anim，然后创建一个名为slide_up_animation的文件。它应该看起来像这样： slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="0%"
        android:fromYDelta="100%" android:toYDelta="0%"
        android:duration="400" />
</set>

请注意，在您的布局中（使用框架布局），您的按钮应布置在底部。这包括“设置”，“详细信息”和“下一步”按钮。你只需要在开始时让它们全部隐形。然后动画将从比你的视图长度高100％的y位置开始，所以它会像它们向上滑动一样。

接下来，在按钮的on click方法中，您要初始化滑动到左侧动画，只需加载动画并在单击按钮时启动它。那个动画看起来像是：

slide_left.xml

 <translate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXDelta="0%p" android:toXDelta="-200%p"
            android:duration="500" />

总而言之，你的活动将会是这样的。

public class AnimationActivity extends Activity {

   private Button nextButton;
   private Button detailButton;
   private Button cancelButton;
   private Animation slideUp;
   private Animation slideLeft;

   public void onCreate(Bundle savedInstanceState) {

   setContentView(R.layout.yourlayout);
   nextButton = (Button) findViewById(R.id.nextButton) // ...you get the idea.

   nextButton.setVisibility(View.INVISIBLE) // do this for all buttons
   //...other code

   slideUp = AnimationUtils.loadAnimation(context,R.anim.slide_up);
   slideLeft = AnimationUtils.loadAnimation(context,R.anim.slide_left);

//slide buttons up
   slideButtonsUp();

    nextButton.setOnClickListener(new View.OnClickListener() {

        public void onClick() {
         slideLeft();
        }

     });

   } 

   private void slideButtonsUp() {

    if(nextButton != null && detailButton != null) {
       nextButton.clearAnimations();
       detailButton.clearAnimations();
       nextButton.startAnimation(slideUp);
       detailButton.startAnimation(slideUp);

       nextButton.setVisibility(View.VISIBLE);
       detailButton.setVisibility(View.VISIBLE);
     }

   } 

   private void slideLeft() {

    nextButton.clearAnimations();
       detailButton.clearAnimations();

     nextButton.startAnimation(slideLeft);
     detailButton.startAnimation(slideLeft);
     nextButton.setVisibility(View.INVISIBLE);
    detailButton.setVisibility(View.INVISIBLE);

    cancelButton.startAnimation(slideLeft);
    cancelButton.setVisibility(View.INVISIBLE);


   } 
}

它可能不是优雅或漂亮，但我在我的应用程序中使用了类似的技术，它运行良好，对用户来说看起来不错。这不应该是一个巨大的性能问题，但我可能是错的。希望有所帮助。

动画按钮可以滑动和更改

1 个答案: