动画以快速接连显示视图 [英] Animation to show view one after other in quick sucession

问题描述

这是GIF：

代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:subtitleTextColor="@color/colorAccent"
    app:titleTextColor="@color/colorPrimary"
    tools:context="com.sawant.pritish.venetianhonda.MainActivity">



    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:scaleType="fitXY"
        android:src="@drawable/mainimage2" />

    <LinearLayout
        android:id="@+id/linearoffloatingandtextview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginLeft="@dimen/floatingactionbuttonmargin"
            android:layout_marginTop="@dimen/floatingactionbuttonmargin"
            android:src="@mipmap/newfloating"
            app:backgroundTint="#ff0000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="-18dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/roundedcorner"
            android:text="   MENU "
            android:textColor="@android:color/white"
            android:textSize="22sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/menulist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearoffloatingandtextview"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="@dimen/floatingactionbuttonmargin"
        android:orientation="vertical"
        android:visibility="gone"

        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/salesimageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/sales" />

            <TextView
                android:id="@+id/salestextview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="Sales"
                android:textSize="15sp" />


        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/serviceimageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/service" />

            <TextView
                android:id="@+id/servicetextview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="Service"
                android:textSize="15sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/specialoffers" />

            <TextView
                android:id="@+id/specialoffers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="Special Offers"
                android:textSize="15sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/contactusimageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/contactus" />

            <TextView
                android:id="@+id/contactustextview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="Contact Us"
                android:textSize="15sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/aboutusimageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/aboutus" />

            <TextView
                android:id="@+id/aboutustextview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="About Us"
                android:textSize="15sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/directionsimageview"
                android:src="@mipmap/getdirection" />

            <TextView
                android:id="@+id/directionstextview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10sp"
                android:background="@drawable/roundedcornerwhite"
                android:text="Get Direction"
                android:textSize="15sp" />

        </LinearLayout>

    </LinearLayout>


   <include layout="@layout/samebottomlayout"/>

</RelativeLayout>

我创建了销售，服务，关于我们，与我们联系，在单独的LinearLayouts中获得方向按钮，是父级LinearLayout的子代。单击浮动按钮后，我可以隐藏和显示按钮，但无法弄清楚动画。我需要应用哪种动画。我是否需要使用单独的背景线程并应用单击浮动按钮时动画。请帮助

I have created the sales,sevice,about us,contact us ,get direction buttons in separate LinearLayouts which are child of a parent LinearLayout.On click of floating button i am able to hide and show the buttons but not able to figure out the animation.What kind of animation i need to apply.Do i need to use a separate background thread and apply animation when floating button is clicked.Please help

推荐答案

package com.litedevs.movieconic.activity;

import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.litedevs.movieconic.R;

/**
 * Created by rahul on 01/11/17.
 */

public class TestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.test_recyclerview);

        View[] menuItems = new View[]{
                findViewById(R.id.container1),
                findViewById(R.id.container2),
                findViewById(R.id.container3),
                findViewById(R.id.container4),
                findViewById(R.id.container5),
        };

        for(View menuItem : menuItems) {
            menuItem.setPivotX(0.0f);
            menuItem.setPivotY(0.0f);
            menuItem.setScaleX(0.0f);
            menuItem.setScaleY(0.0f);
            menuItem.setAlpha(0.0f);
        }

        new Handler().postDelayed(getNextAnimator(menuItems, 0), 2000);
    }

    private Runnable getNextAnimator(final View[] views, final int position) {
        if(position >= views.length)
            return null;
        return new Runnable() {
            @Override
            public void run() {
                views[position]
                        .animate()
                        .scaleX(1.0f)
                        .scaleY(1.0f)
                        .alpha(1.0f)
                        .setInterpolator(new FastOutSlowInInterpolator())
                        .setDuration(200)
                        .withEndAction(getNextAnimator(views,position+1))
                        .start();
            }
        };
    }
}

R.layout.test_recyclerview

R.layout.test_recyclerview

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

    <LinearLayout
        android:id="@+id/container1"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/bg_chip_view"
        android:orientation="horizontal">

        <com.litedevs.movieconic.utils.ClockView
            android:id="@+id/chip_clock"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_circle" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/chip_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="10dp"
            android:paddingStart="5dp"
            android:text="2:00 PM"
            android:textColor="@color/colorAccent" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container2"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/bg_chip_view"
        android:orientation="horizontal">

        <com.litedevs.movieconic.utils.ClockView
            android:id="@+id/chip_clock"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_circle" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/chip_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="10dp"
            android:paddingStart="5dp"
            android:text="2:00 PM"
            android:textColor="@color/colorAccent" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container3"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/bg_chip_view"
        android:orientation="horizontal">

        <com.litedevs.movieconic.utils.ClockView
            android:id="@+id/chip_clock"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_circle" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/chip_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="10dp"
            android:paddingStart="5dp"
            android:text="2:00 PM"
            android:textColor="@color/colorAccent" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container4"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/bg_chip_view"
        android:orientation="horizontal">

        <com.litedevs.movieconic.utils.ClockView
            android:id="@+id/chip_clock"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_circle" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/chip_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="10dp"
            android:paddingStart="5dp"
            android:text="2:00 PM"
            android:textColor="@color/colorAccent" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/container5"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/bg_chip_view"
        android:orientation="horizontal">

        <com.litedevs.movieconic.utils.ClockView
            android:id="@+id/chip_clock"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_circle" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/chip_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingEnd="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="10dp"
            android:paddingStart="5dp"
            android:text="2:00 PM"
            android:textColor="@color/colorAccent" />
    </LinearLayout>

</LinearLayout>

单击此处获取输出：

这篇关于动画以快速接连显示视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！