如何动画采用了android活动过渡浮动操作按钮？

问题描述 投票：41回答：2

我计划落实在我的项目之一是这样的，但是，有如下概念我不清楚，有没有可用的这样的教程或者，而且你不要过于频繁地看到这一点。这里是如何看起来像Click here to go to source

从所有引用我所理解的是，他们使用了两种类型的过渡这里一个移动的按钮高达一些现存和其他爆炸按钮。所以我做了一些挖掘，并与这两个库github我认为这两个我们可以在这里实现以下的动画碰到是链接

qazxsw POI（点动按钮）和qazxsw POI（使按钮看起来像是被爆炸）

如果您发现任何更好的回答下面请张贴在这里请

android android-animation android-transitions
2个回答
5
投票

我认为你在寻找什么是有意义的过渡。

在棒棒糖预设备这可以用Material Animations帮手来实现。

一些有用的链接，可以帮助你：

  • 它使用用于ActivityOptionsCompat转变的Circular reveal（源代码）。
  • 转变在ActivityOptionsCompat（稍微向下滚动）的例子。
  • 在Android开发者培训定义自定义动画 指南
5
投票

问题是老了，但它仍然是有趣的。这就是我如何实现这一点：

simple material design tutorial

首先，你需要创建两个Android Developrs blog这在过渡API被称为“场景”。第一个场景中包含转换之前的观点，第二个包含视图转换之后。然后，你应该替换第一现场有第二个，并提供enter image description here它描述的第一个场景的意见如何进入第二个场景，意见，第一场戏还怎么消失以及如何视图第二个场景出现。

ViewGroups

在这个例子中有困难晶圆厂按钮，因为它是被动画去“场景根”屏幕的白色区域的唯一视图。这就是为什么场景都是全屏保证金最高相等于蓝色“星期一”报头的高度。

这里所有的转变是除了黄色背景转换的默认值。黄色背景视图出现在与圆形的第二场景显示动画。并与圆形显示合拢动画dissapear。有这样的没有默认的动画，这就是为什么我写了自定义的：

Transition

完整的代码是在这里：

enter image description here

import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.support.transition.TransitionValues; import android.support.transition.Visibility; import android.view.View; import android.view.ViewAnimationUtils; import android.view.ViewGroup; public class CircularRevealTransition extends Visibility { @Override public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) { int startRadius = 0; int endRadius = (int) Math.hypot(view.getWidth(), view.getHeight()); Animator reveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startRadius, endRadius); //make view invisible until animation actually starts view.setAlpha(0); reveal.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { view.setAlpha(1); } }); return reveal; } @Override public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) { int endRadius = 0; int startRadius = (int) Math.hypot(view.getWidth(), view.getHeight()); Animator reveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startRadius, endRadius); return reveal; } } ：

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.transition.ArcMotion;
import android.support.transition.ChangeBounds;
import android.support.transition.Fade;
import android.support.transition.Scene;
import android.support.transition.Slide;
import android.support.transition.Transition;
import android.support.transition.TransitionListenerAdapter;
import android.support.transition.TransitionManager;
import android.support.transition.TransitionSet;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends AppCompatActivity {

    private ViewGroup mSceneRoot;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setSupportActionBar(findViewById(R.id.toolbar));
        mSceneRoot = findViewById(R.id.sceneRoot);
        //show scene1 without animation
        showScene1(false);
    }

    private void showScene1(boolean animated) {
        ViewGroup root = (ViewGroup) getLayoutInflater().inflate(R.layout.scene1, null);
        FloatingActionButton fab = root.findViewById(R.id.fab);
        fab.setOnClickListener(v -> {
            showScene2();
        });
        Scene scene = new Scene(mSceneRoot, root);
        Transition transition = animated ? getScene1Transition() : null;
        TransitionManager.go(scene, transition);
    }

    private void showScene2() {
        ViewGroup root = (ViewGroup) getLayoutInflater().inflate(R.layout.scene2, null);
        View btnBack = root.findViewById(R.id.btnCancel);
        btnBack.setOnClickListener(v -> {
            showScene1(true);
        });

        Scene scene = new Scene(mSceneRoot, root);
        Transition transition = getScene2Transition();
        TransitionManager.go(scene, transition);
    }

    private Transition getScene2Transition() {
        TransitionSet set = new TransitionSet();

        //fab changes position
        ChangeBounds changeTransform = new ChangeBounds();
        changeTransform.addListener(new TransitionListenerAdapter() {
            @Override
            public void onTransitionEnd(@NonNull Transition transition) {
                //hide fab button on the end of animation
                mSceneRoot.findViewById(R.id.fab).setVisibility(View.INVISIBLE);
            }
        });
        changeTransform.addTarget(R.id.fab);
        changeTransform.setDuration(300);
        //fab arc path
        ArcMotion arcMotion = new ArcMotion();
        arcMotion.setMaximumAngle(45);
        arcMotion.setMinimumHorizontalAngle(90);
        arcMotion.setMinimumVerticalAngle(0);
        changeTransform.setPathMotion(arcMotion);
        set.addTransition(changeTransform);

        //bg circular reveal animation starts
        CircularRevealTransition crt = new CircularRevealTransition();
        crt.addTarget(R.id.yellowBG);
        crt.setStartDelay(200);
        crt.setDuration(600);
        set.addTransition(crt);

        //buttons appear
        Fade fade = new Fade();
        fade.addTarget(R.id.btnBegin);
        fade.addTarget(R.id.btnCancel);
        fade.addTarget(R.id.text);
        fade.setStartDelay(600);
        set.addTransition(fade);

        //left buttons column slide to left
        Slide slide = new Slide(Gravity.LEFT);
        slide.addTarget(R.id.slideLeftContainer);
        set.addTransition(slide);
        //right buttons column slide to right
        Slide slide2 = new Slide(Gravity.RIGHT);
        slide2.addTarget(R.id.slideRightContainer);
        set.addTransition(slide2);
        return set;
    }

    private Transition getScene1Transition() {
        TransitionSet set = new TransitionSet();

        //buttons from scene2 fade out
        Fade fade = new Fade();
        fade.addTarget(R.id.btnBegin);
        fade.addTarget(R.id.btnCancel);
        fade.addTarget(R.id.text);
        set.addTransition(fade);

        //Circular Reveal collapse animation starts
        CircularRevealTransition crt = new CircularRevealTransition();
        crt.addTarget(R.id.yellowBG);
        crt.setDuration(600);
        set.addTransition(crt);

        //then fab button changes position
        ChangeBounds changeTransform = new ChangeBounds();
        changeTransform.addTarget(R.id.fab);
        changeTransform.setDuration(300);
        changeTransform.setStartDelay(500);
        //arc path
        ArcMotion arcMotion = new ArcMotion();
        arcMotion.setMaximumAngle(45);
        arcMotion.setMinimumHorizontalAngle(90);
        arcMotion.setMinimumVerticalAngle(0);
        changeTransform.setPathMotion(arcMotion);
        set.addTransition(changeTransform);

        //left buttons column slide in from left
        Slide slide = new Slide(Gravity.LEFT);
        slide.addTarget(R.id.slideLeftContainer);
        slide.setStartDelay(500);
        set.addTransition(slide);

        //right buttons column slide in from right
        Slide slide2 = new Slide(Gravity.RIGHT);
        slide2.addTarget(R.id.slideRightContainer);
        slide2.setStartDelay(500);
        set.addTransition(slide2);
        return set;
    }

}

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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"
tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:titleTextColor="#fff" />

    <FrameLayout
    android:id="@+id/topContainer"
    android:layout_width="match_parent"
    android:layout_height="@dimen/header_height"
    android:background="#00BCD4"
    android:orientation="vertical"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <TextView
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:layout_gravity="bottom"
        android:background="#9000"
        android:gravity="center_vertical"
        android:paddingLeft="8dp"
        android:text="MONDAY"
        android:textColor="#fff" />
    </FrameLayout>

    <FrameLayout
    android:id="@+id/sceneRoot"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar" />

</android.support.constraint.ConstraintLayout>

scene1.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false">

<LinearLayout
    android:id="@+id/slideLeftContainer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/header_height"
    android:orientation="vertical">

    <include layout="@layout/button" />
    <include layout="@layout/button" />
    <include layout="@layout/button" />
</LinearLayout>

<LinearLayout
    android:id="@+id/slideRightContainer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:layout_marginTop="@dimen/header_height"
    android:orientation="vertical">

    <include layout="@layout/button" />
    <include layout="@layout/button" />
    <include layout="@layout/button" />
</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_marginTop="@dimen/fab_margin_top"
    android:layout_marginRight="@dimen/fab_margin"
    android:clickable="true"
    android:focusable="true"
    app:backgroundTint="#FFEE4D"
    app:srcCompat="@drawable/ic_add_black_24dp" />
</FrameLayout>

scene2.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingTop="@dimen/header_height">

<View
    android:id="@+id/yellowBG"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFEE4D" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="#FFEE4D"
    app:srcCompat="@drawable/ic_add_black_24dp" />

<Button
    android:id="@+id/btnBegin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|left"
    android:layout_margin="@dimen/fab_margin"
    android:padding="16dp"
    android:text="BEGIN"
    android:textSize="22sp" />

<TextView
    android:id="@+id/text"
    android:layout_width="@dimen/header_height"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
    android:textSize="22sp" />

<Button
    android:id="@+id/btnCancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="@dimen/fab_margin"
    android:backgroundTint="#FF5151"
    android:padding="16dp"
    android:text="CANCEL"
    android:textSize="22sp" />

</FrameLayout>

button.xml：

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:padding="24dp"
    android:text="6:30"
    android:textSize="24sp" />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.