क्लिक पर एनिमेटिंग फैब (ज़ूम इन/आउट)

Question

मैं निम्नलिखित फ्लोटिंग एक्शन बटन के लिए एनीमेशन और रंग परिवर्तन की नकल करने की कोशिश कर रहा हूं।

जिस तरह से फ़्लोटिंग एक्शन बटन काम करता है वह सफेद है और नीला चालू है।

हालांकि, मैं एनीमेशन और रंग बदलने के साथ असफल रहे हैं।

ये ऐसा करने के मेरे प्रयास हैं, जैसा कि आप देख सकते हैं कि मैंने यह करने के लिए किए गए सभी अलग-अलग तरीकों से टिप्पणी की है।

@SuppressWarnings("unused") 
    @OnClick(R.id.fabMovieFavourite) 
    public void addMovieFavourite(View view) { 
/*  final Animator animator = AnimatorInflater.loadAnimator(getActivity(), R.animator.add_favourite_movie); 
     animator.setTarget(view);) 
     animator.start(); 
*/ 
/* 
     AnimatorSet animatorSet = new AnimatorSet(); 
     PropertyValuesHolder propertyValuesHolderX = PropertyValuesHolder.ofFloat(View.SCALE_X, 1.1f); 
     PropertyValuesHolder propertyValuesHolderY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1.1f); 
     ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX, propertyValuesHolderY); 
     objectAnimator.setDuration(300); 
     objectAnimator.setInterpolator(new OvershootInterpolator(10f)); 
*/ 

     /* 
     objectAnimator.setRepeatCount(1); 
     objectAnimator.setRepeatMode(ObjectAnimator.REVERSE); 
*/ 

/* 
     PropertyValuesHolder propertyValuesHolderX2 = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.9f); 
     PropertyValuesHolder propertyValuesHolderY2 = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.9f); 
     ObjectAnimator objectAnimator2 = ObjectAnimator.ofPropertyValuesHolder(view, propertyValuesHolderX2, propertyValuesHolderY2); 
     objectAnimator.setDuration(300); 
     objectAnimator2.setInterpolator(new OvershootInterpolator(10f)); 

     animatorSet.playSequentially(objectAnimator, objectAnimator2); 
     objectAnimator.start(); 
*/ 

     // view.BackgroundTintList(ContextCompat.getColorStateList(getContext(), R.color.primary)); 
     //view.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.primary)); 

     if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) { 
      Timber.d("start translationZ"); 
      ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, View.TRANSLATION_Z, 12f); 
      objectAnimator.setDuration(300); 
      objectAnimator.setInterpolator(new OvershootInterpolator(10f)); 
      objectAnimator.setTarget(view); 
      objectAnimator.start(); 
     } 
    } 

किसी भी सुझाव के लिए बहुत धन्यवाद:

यह मेरा कोड है।

Answer 1

इस एनीमेशन में दो चरण हैं। पहले एक स्केल एक्स और वाई धुरी, और दूसरा इसे डाउनस्केल करता है। इसलिए, हम उन्हें दो AnimatorSet एस में विभाजित कर सकते हैं और उन्हें अनुक्रमिक रूप से चला सकते हैं।

एनीमेशन का मुख्य बिंदु दूसरे AnimatorSet के लिए उपयुक्त इंटरपोलेटर ढूंढना है, क्योंकि यह मानक नहीं है।

देखें, हम लक्ष्य के पार चले लिए फैब चाहते हैं, तो अंडरशूट और फिर अंत में एनिमेटर में निर्दिष्ट मान अप करने के लिए व्यवस्थित।

सौभाग्य से, बहुत आसान PathInterpolator है, जो Path प्रदान किए गए हमारे लिए एक इंटरपोलेटर बनाएगा।

Path path = new Path(); 
path.moveTo(0.0f, 0.0f); 
path.lineTo(0.5f, 1.3f); 
path.lineTo(0.75f, 0.8f); 
path.lineTo(1.0f, 1.0f); 
PathInterpolator pathInterpolator = new PathInterpolator(path); 

तो, की पहली एनीमेशन बना सकते हैं:

final float from = 1.0f; 
final float to = 1.3f; 

ObjectAnimator scaleX = ObjectAnimator.ofFloat(fab, View.SCALE_X, from, to); 
ObjectAnimator scaleY = ObjectAnimator.ofFloat(fab, View.SCALE_Y, from, to); 
ObjectAnimator translationZ = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, from, to); 

AnimatorSet set1 = new AnimatorSet(); 
set1.playTogether(scaleX, scaleY, translationZ); 
set1.setDuration(100); 
set1.setInterpolator(new AccelerateInterpolator()); 

set1.addListener(new AnimatorListenerAdapter() { 
    @Override 
    public void onAnimationEnd(Animator animation) { 
     fab.setImageResource(isActive ? R.drawable.heart_active : R.drawable.heart_passive); 
     fab.setBackgroundTintList(ColorStateList.valueOf(isActive ? colorActive : colorPassive)); 
     isActive = !isActive; 
    } 
}); 

हम दोनों एक्स स्केलिंग रहे हैं, वाई। इसके अलावा, हम उचित छाया प्रभाव के लिए जेड अनुवाद बदल रहे हैं। जब एनीमेशन समाप्त होता है, हम fab स्थिति (दिल और फैब पृष्ठभूमि का रंग) बदलना चाहते हैं।

अब चलो वापस व्यवस्थित करने के लिए एनीमेशन बना सकते हैं:

ObjectAnimator scaleXBack = ObjectAnimator.ofFloat(fab, View.SCALE_X, to, from); 
ObjectAnimator scaleYBack = ObjectAnimator.ofFloat(fab, View.SCALE_Y, to, from); 
ObjectAnimator translationZBack = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Z, to, from); 

AnimatorSet set2 = new AnimatorSet(); 
set2.playTogether(scaleXBack, scaleYBack, translationZBack); 
set2.setDuration(300); 
set2.setInterpolator(pathInterpolator); 

यहाँ देखें, हम pathInterpolator है कि हम पहले बनाए इस्तेमाल किया।

हम उन दो AnimatorSet रों क्रमिक रूप से खेलना चाहते हैं:

final AnimatorSet set = new AnimatorSet(); 
set.playSequentially(set1, set2); 

set.addListener(new AnimatorListenerAdapter() { 
    @Override 
    public void onAnimationEnd(Animator animation) { 
     fab.setClickable(true); 
    } 

    @Override 
    public void onAnimationStart(Animator animation) { 
     fab.setClickable(false); 
    } 
}); 

इसके अलावा, हम यह एनिमेट जबकि फैब पर होने वाले क्लिक अक्षम करना चाहते हैं। तो हम एनीमेशन स्थिति के आधार पर इसे चालू/बंद कर रहे हैं।

अंत में, हम एनीमेशन लॉन्च करने पर एक क्लिक होता है:

fab.setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View v) { 
     set.start(); 
    } 
}); 

परिणाम:

Source code at github