【问题标题】:Animation From top to Button从顶部到按钮的动画
【发布时间】:2017-09-19 13:44:07
【问题描述】:

我正在尝试制作从顶部到按钮的动画。

如果我点击一个按钮,他应该从顶部显示一个视图。如果我再次单击,他应该将其动画化回到顶部。这就是我所拥有的:

主活动:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    Button btFilterDown = (Button) findViewById(R.id.btFilterDown);
    Button btFilterUp = (Button) findViewById(R.id.btFilterUp);
    final View layout = findViewById(R.id.slide);
    layout.setVisibility(View.GONE);

    btFilterUp.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
        hideView(layout);
        }
    });

    btFilterDown.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
        showView(layout);
        }
    });
}

private void hideView(final View view){
    Animation animation = AnimationUtils.loadAnimation(this, R.layout.slide_out_up);
    animation.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            view.setVisibility(View.GONE);
        }
    });

    view.startAnimation(animation);
}

private void showView(final View view){
    Animation animation = AnimationUtils.loadAnimation(this, R.layout.slide_in_down);
    animation.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            view.setVisibility(View.VISIBLE);
        }
    });

    view.startAnimation(animation);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
}

Slide_in_down.xml:

<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:fromYDelta="-1000"
android:duration="@android:integer/config_longAnimTime" />

Slide_out_up.xml:

<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:toXDelta="0"
android:toYDelta="-1000"
android:duration="@android:integer/config_longAnimTime" />

还有我的 main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@android:color/darker_gray" >
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@android:color/white" >

    <Button 
        android:id="@+id/btFilterDown"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="FILTER!!!"/>

</LinearLayout>

<LinearLayout
    android:id="@+id/slide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#99009900" 
    android:orientation="vertical">

    <Button 
        android:id="@+id/btFilterUp"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text=" NO FILTER!!!"/>

</LinearLayout>

</LinearLayout>

所以现在我有两个问题:

首先: 如果第二个布局在它上面,我的第一个布局的按钮不再可见。我想使动画中的视图具有透明度。但它看起来很糟糕,如果从第一眼看到的物体就远了。 如何将动画布局放在第一个布局上,以便第一个布局上的所有对象都可见?

第二: 动画应该从操作栏的底部开始。我的意思是,如果布局进入,他从底部边缘开始,而不是从屏幕顶部开始。 如何设置动画的起点?

非常感谢:)

【问题讨论】:

    标签: android android-layout view android-animation


    【解决方案1】:

    您的动画必须有 4 个 xml,如 slide_down_in、slide_down_out、slide_up_in、slide_up_out,并使用百分比类似

    slide_down_in

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromYDelta="-100%"
            android:toYDelta="0%"
            android:duration="500" />
    </set>
    

    slide_down_out

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromYDelta="0%"
            android:toYDelta="100%"
            android:duration="500" />
    </set>
    

    slide_up_in

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromYDelta="100%"
            android:toYDelta="0%"
            android:duration="500" />
    </set>
    

    slide_up_out

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:fromYDelta="0%"
            android:toYDelta="-100%"
            android:duration="500" />
    </set>
    

    【讨论】:

      【解决方案2】:

      它的工作原理

      Intent i = new Intent(getActivity(), FeedbackSuccessActivity.class);
          i.putExtra("title", "Success!");
          i.putExtra("message", "\n Profile Update Successfully \n ");
          startActivity(i);
          overridePendingTransition(R.anim.slide_down_in, R.anim.slide_down_out);
      

      slide_down_in

      <?xml version="1.0" encoding="utf-8"?>
      <set xmlns:android="http://schemas.android.com/apk/res/android">
          <translate
              android:fromYDelta="-100%"
              android:toYDelta="0%"
              android:duration="500" />
      </set>
      

      slide_down_out

      <?xml version="1.0" encoding="utf-8"?>
      <set xmlns:android="http://schemas.android.com/apk/res/android">
          <translate
              android:fromYDelta="0%"
              android:toYDelta="100%"
              android:duration="500" />
      </set>
      

      【讨论】:

        猜你喜欢
        • 2020-08-10
        • 2017-10-12
        • 2017-12-26
        • 2020-06-19
        • 1970-01-01
        • 2014-09-27
        • 2012-01-21
        • 2021-11-11
        • 2020-08-02
        相关资源
        最近更新 更多