android– 如何制作像whatsapp调用屏幕的动画？

概述我正在尝试在WhatsAppCall屏幕中编写动画.但我不知道实现这一目标的真正方法是什么.为了实现这个动画,我开始尝试使用fadein和fadeout动画.这些是我设置淡入淡出动画的方法.privateAnimationsetAnimFadeOut(intstartOff,intduration){AnimationanimFadeOut;ani

我正在尝试在WhatsApp Call屏幕中编写动画.但我不知道实现这一目标的真正方法是什么.

为了实现这个动画,我开始尝试使用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);

我正在为每个按钮开始调用fadeout的动画,它没有像我预期的那样工作.我怎样才能实现像WhatsApp这样的动画？

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

结果就是这样.

解决方法:

我首先使用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>

活动类：

Java的：

public class MainActivity extends AppCompatActivity {    @OverrIDe    protected voID onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentVIEw(R.layout.activity_main);        VIEw[] images = {findVIEwByID(R.ID.img1), findVIEwByID(R.ID.img2), findVIEwByID(R.ID.img3), findVIEwByID(R.ID.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        ArrayList<ObjectAnimator> anims = new ArrayList<>(images.length * 2);        for (VIEw v : images) anims.add(ObjectAnimator.offloat(v, VIEw.Alpha, 0f, 1f).setDuration(80)); //fade in animator        for (VIEw v : images) anims.add(ObjectAnimator.offloat(v, VIEw.Alpha, 1f, 0f).setDuration(80)); //fade out animator        final AnimatorSet set = new AnimatorSet(); //create Animator set object        //if we want to repeat the animations then we set Listener to start again in 'onAnimationEnd' method        set.addListener(new AnimatorListenerAdapter() {            @OverrIDe            public voID onAnimationEnd(Animator animation) {                set.start(); //repeat animator set indefinitely            }        });        set.setStartDelay(600); //set delay every time we start the chain of animations        for (int i = 0; i < anims.size() - 1; i++) set.play(anims.get(i)).before(anims.get(i + 1)); //put all animations in set by order (from first to last)        findVIEwByID(R.ID.txt).setonClickListener(new VIEw.OnClickListener() {            @OverrIDe            public voID onClick(VIEw v) { //start the animations on click                set.start();            }        });    }}

科特林：

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    }}

总结

以上是内存溢出为你收集整理的android – 如何制作像whatsapp调用屏幕的动画？全部内容，希望文章能够帮你解决android – 如何制作像whatsapp调用屏幕的动画？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。