Android 我如何制作像whatsapp call screen这样的动画？

我正试图在WhatsApp Call screen中编写一个动画。但我不知道实现这一目标的真正方法是什么

为了实现这个动画，我开始尝试fadein和fadeout动画。这些是我设置的淡入淡出动画的方法

private Animation setAnimFadeOut(int startOff,int duration){
    Animation animFadeOut;
    animFadeOut = new AlphaAnimation(1, 0);
    animFadeOut.setInterpolator(new AccelerateInterpolator());
    animFadeOut.setStartOffset(startOff);
    animFadeOut.setDuration(duration);
    return  animFadeOut;
}

private Animation setAnimFadeIn(int startOff,int duration){
    Animation animFadeIn;
    animFadeIn = new AlphaAnimation(0, 1);
    animFadeIn.setInterpolator(new AccelerateInterpolator());
    animFadeIn.setStartOffset(startOff);
    animFadeIn.setDuration(duration);
    return  animFadeIn;
}

对于每个动画，animationlisteners onAnimationEnd方法会触发动画以重新启动。fadeIn动画启动fadeOut动画，fadeOut启动fadeIn动画

    right1FadeOut.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationEnd(Animation animation) {
            right1.startAnimation(right1FadeIn);
            Log.i(TAG, "onAnimationEnd: 1 outEnd");
        }
    });
    right1FadeIn.setAnimationListener(new Animation.AnimationListener() {
        Override
        public void onAnimationEnd(Animation animation) {
            right1.startAnimation(right1FadeOut);
            Log.i(TAG, "onAnimationEnd: 1 inEnd");
        }
    });

初始化

int startOff = 0;
int diff = 100;
int duration = 600;

final Animation right1FadeOut = setAnimFadeOut(startOff,duration);
final Animation right1FadeIn  = setAnimFadeIn(0,duration);
final Animation right2FadeOut = setAnimFadeOut(startOff+diff,duration+diff);
final Animation right2FadeIn  = setAnimFadeIn(0,duration);
final Animation right3FadeOut = setAnimFadeOut(startOff+diff*2,duration+diff*2);
final Animation right3FadeIn  = setAnimFadeIn(0,duration);

我开始为每个按钮调用淡出动画，但它并没有像我预期的那样工作。如何实现WhatsApp那样的动画效果

right1.startAnimation(right1FadeOut);
right2.startAnimation(right2FadeOut);          
right3.startAnimation(right3FadeOut);

这就是结果

---

尝试在

AnimationListener

s

onAnimationStart

方法中以越来越大的延迟启动后续动画

arrow1FadeIn.setAnimationListener( new Animation.AnimationListener() {
        @Override
        public void onAnimationStart( Animation animation )
        {
            arrow2.startAnimation( arrow2FadeIn );
        }

        @Override
        public void onAnimationEnd( Animation animation )
        {
            arrow1.startAnimation( arrow1FadeOut );
        }

            @Override
            public void onAnimationRepeat( Animation animation )
            {

            }
        } );
arrow1FadeOut.setAnimationListener( new Animation.AnimationListener()
        {
            @Override
            public void onAnimationStart( Animation animation )
            {
            }

            @Override
            public void onAnimationEnd( Animation animation )
            {
                arrow1.startAnimation( arrow1FadeIn );
            }

            @Override
            public void onAnimationRepeat( Animation animation )
            {

            }
        } );

你的动画就像

final Animation arrow1FadeIn = setAnimFadeIn( startOff, duration );
final Animation arrow1FadeOut = setAnimFadeOut( startOff, duration );
final Animation arrow2FadeIn = setAnimFadeIn( diff, duration );
final Animation arrow2FadeOut = setAnimFadeOut( startOff, duration );
final Animation arrow3FadeIn = setAnimFadeIn( diff*2, duration );
final Animation arrow3FadeOut = setAnimFadeOut( startOff, duration );

当你重新开始的时候，你可能需要旋转一点，但是这样，它们应该是同步的。只需使用启动第一个fadeIn动画

arrow1.startAnimation( arrow1FadeIn );

---

我会首先使用Animator对象而不是动画，然后我可以使用AnimatorSet作为一个组来控制所有动画师。（又名：命令）

例如：

活动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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

        <ImageView
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0"
            android:src="@drawable/ic_launcher_foreground" />

        <ImageView
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0"
            android:src="@drawable/ic_launcher_foreground" />

        <ImageView
            android:id="@+id/img3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0"
            android:src="@drawable/ic_launcher_foreground" />

        <ImageView
            android:id="@+id/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0"
            android:src="@drawable/ic_launcher_foreground" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

活动类别：

爪哇：

public类MainActivity扩展了AppCompatActivity{
@凌驾
创建时受保护的void（@Nullable Bundle savedInstanceState）{
super.onCreate（savedInstanceState）；
setContentView（R.layout.activity_main）；
视图[]图像={findViewById（R.id.img1），findViewById（R.id.img2），findViewById（R.id.img3），findViewById（R.id.img4），}；//要设置动画的视图数组
//我们将有2名动画制作人为每个视图制作，淡入淡出
//准备动画师-创建动画师阵列并实例化对象动画师
ArrayList anims=新的ArrayList（images.length*2）；
对于（视图v：图像）anims.add（ObjectAnimator.offload（v，View.ALPHA，0f，1f）.setDuration（80））；//淡入动画
对于（视图v:images）anims.add（ObjectAnimator.offload（v，View.ALPHA，1f，0f）.setDuration（80））；//淡出动画
最终AnimatorSet=新AnimatorSet（）；//创建AnimatorSet对象
//如果我们想重复这些动画，那么我们在“onAnimationEnd”方法中将侦听器设置为再次启动
set.addListener（新的AnimatorListenerAdapter（）{
@凌驾
AnimationEnd上的公共无效（Animator动画）{
set.start（）；//无限期重复动画设置
}
});
set.setStartDelay（600）；//每次启动动画链时设置延迟
对于（int i=0；i

科特林：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val images = arrayOf(img1, img2, img3, img4) //array of views that we want to animate

        //we will have 2 animator foreach view, fade in & fade out
        //prepare animators - creating array of animators & instantiating Object animators
        val anims = ArrayList<ObjectAnimator>(images.size * 2)
        for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 0f, 1f).setDuration(80)) //fade in animator
        for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 1f, 0f).setDuration(80)) //fade out animator

        val set = AnimatorSet() //create Animator set object
        //if we want to repeat the animations then we set listener to start again in 'onAnimationEnd' method
        set.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) = set.start() //repeat animator set indefinitely
        })

        set.startDelay = 600 //set delay every time we start the chain of animations

        for (i in 0 until anims.size - 1) set.play(anims[i]).before(anims[i + 1]) //put all animations in set by order (from first to last)

        txt.setOnClickListener { set.start() } //start the animations on click
    }
}

class MainActivity:AppCompatActivity（）{
重写创建时的乐趣（savedInstanceState:Bundle？）{
super.onCreate（savedInstanceState）
setContentView（R.layout.activity_main）
val images=arrayOf（img1、img2、img3、img4）//要设置动画的视图数组
//我们将有2名动画制作人为每个视图制作，淡入淡出
//准备动画师-创建动画师阵列并实例化对象动画师
val anims=ArrayList（images.size*2）
对于（图像中的v）anims.add（ObjectAnimator.offload（v，View.ALPHA，0f，1f）.setDuration（80））//淡入动画
对于（图像中的v）anims.add（ObjectAnimator.offload（v，View.ALPHA，1f，0f）.setDuration（80））//淡出动画
val set=AnimatorSet（）//创建Animator set对象
//如果我们想重复这些动画，那么我们在“onAnimationEnd”方法中将侦听器设置为再次启动
set.addListener（对象：AnimatorListenerAdapter（）{
重写AnimationEnd（动画：Animator？）=set.start（）//无限期重复Animator设置
})
set.startDelay=600//每次启动动画链时设置延迟
对于（i在0中直到anims.size-1）set.play（anims[i]）。在（anims[i+1]）/将所有动画按顺序放置（从第一个到最后一个）
txt.setOnClickListener{set.start（）}//单击启动动画
}
}

我建议您使用

它像facebook一样支持

Spring

动画。它还有一个很酷的特性，叫做

SpringChain

，它可以使用Spring物理从头到尾自动播放一系列动画。可以自定义视图的动画方式（缩放、alpha、平移…）

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val images = arrayOf(img1, img2, img3, img4) //array of views that we want to animate

        //we will have 2 animator foreach view, fade in & fade out
        //prepare animators - creating array of animators & instantiating Object animators
        val anims = ArrayList<ObjectAnimator>(images.size * 2)
        for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 0f, 1f).setDuration(80)) //fade in animator
        for (v in images) anims.add(ObjectAnimator.ofFloat(v, View.ALPHA, 1f, 0f).setDuration(80)) //fade out animator

        val set = AnimatorSet() //create Animator set object
        //if we want to repeat the animations then we set listener to start again in 'onAnimationEnd' method
        set.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) = set.start() //repeat animator set indefinitely
        })

        set.startDelay = 600 //set delay every time we start the chain of animations

        for (i in 0 until anims.size - 1) set.play(anims[i]).before(anims[i + 1]) //put all animations in set by order (from first to last)

        txt.setOnClickListener { set.start() } //start the animations on click
    }
}