動畫矢量繪製對象上箭頭

的點擊旋轉我需要有一個expandable recycler view。我打算使用動畫矢量繪製的崩潰和展開箭頭動畫。動畫矢量繪製對象上箭頭

有此setExpandCollapseListener使用，我可以開始旋轉。如何使用動畫矢量Drawable獲得如下所示的相同效果？

矢量繪製的擴展按鈕：

<?xml version="1.0" encoding="utf-8"?> 
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
android:viewportWidth="306" 
android:viewportHeight="306" 
android:width="306dp" 
android:height="306dp"> 
<path 
    android:pathData="M153 247.35L306 94.35 270.3 58.65 153 175.95 35.7 58.65 0 94.35Z" 
    android:fillColor="#000000" /> 
</vector>

矢量繪製的摺疊按鈕：

<?xml version="1.0" encoding="utf-8"?> 
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
android:viewportWidth="306" 
android:viewportHeight="306" 
android:width="306dp" 
android:height="306dp"> 
<path 
    android:pathData="M270.3 247.35L306 211.65 153 58.65 0 211.65 35.7 247.35 153 130.05Z" 
    android:fillColor="#000000" /> 
</vector>

來源

2016-11-05 suku

1.添加矢量圖像

我們還需要包path在group因爲group是矢量資源的一部分將被動畫。您可以爲一個組設置任何名稱。

res/drawable/ic_arrow_down.xml

<?xml version="1.0" encoding="utf-8"?> 
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:viewportWidth="306" 
    android:viewportHeight="306" 
    android:width="306dp" 
    android:height="306dp"> 

    <group 
    android:name="arrow" 
    android:pivotX="153" 
    android:pivotY="153"> 
     <path 
      android:pathData="M153 247.35L306 94.35 270.3 58.65 153 175.95 35.7 58.65 0 94.35Z" 
      android:fillColor="#000000" /> 
    </group> 
</vector>

res/drawable/ic_arrow_top.xml

<?xml version="1.0" encoding="utf-8"?> 
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:viewportWidth="306" 
    android:viewportHeight="306" 
    android:width="306dp" 
    android:height="306dp"> 

    <group 
    android:name="arrow" 
    android:pivotX="153" 
    android:pivotY="153"> 
     <path 
      android:pathData="M270.3 247.35L306 211.65 153 58.65 0 211.65 35.7 247.35 153 130.05Z" 
      android:fillColor="#000000" /> 
    </group> 
</vector>

2.添加動畫

res/animator/animation_arrow_rotation.xml

<?xml version="1.0" encoding="utf-8"?> 
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="@android:integer/config_shortAnimTime" 
    android:propertyName="rotation" 
    android:valueFrom="0" 
    android:valueTo="180" />

3.添加動畫矢量繪圖資源

<target>引用到group的名字。

res/drawable/ic_animated_arrow_down.xml

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/ic_arrow_down"> 

    <target 
     android:name="arrow" 
     android:animation="@animator/animation_arrow_rotation" /> 
</animated-vector>

res/drawable/ic_animated_arrow_up.xml

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/ic_arrow_up"> 

    <target 
     android:name="arrow" 
     android:animation="@animator/animation_arrow_rotation" /> 
</animated-vector>

4.添加一些代碼適配器

初始化的ImageView在ParentViewHolder的繼承者：

void bind(UiModel uiModel) { 
    arrowImageView.setImageResource(isExpanded() ? R.drawable.ic_animated_arrow_down : 
      R.drawable.ic_animated_arrow_up); 

    // some other code 
}

，並覆蓋onExpansionToggled：

@Override 
public void onExpansionToggled(boolean expanded) { 
    super.onExpansionToggled(expanded); 

    arrowImageView.setImageResource(expanded ? R.drawable.ic_animated_arrow_down : 
      R.drawable.ic_animated_arrow_up); 
    AnimatedVectorDrawableCompat drawable = (AnimatedVectorDrawableCompat) arrowImageView.getDrawable(); 

    drawable.registerAnimationCallback(new Animatable2Compat.AnimationCallback() { 
     @Override 
     public void onAnimationEnd(Drawable ignored) { 
      drawable.clearAnimationCallbacks(); 

      arrowImageView.setImageResource(expanded ? R.drawable.ic_animated_arrow_up : 
        R.drawable.ic_animated_arrow_down); 
     } 
    }); 

    drawable.start(); 
}

順便說一句，你可以在一個XML文件中定義AnimatedVectorDrawable XML資源。細節here。

來源

2017-05-12 15:15:49

所有你需要的是代碼只需一行 -

view.animate().rotationBy(degree_of_rotation).setDuration(duration im milliseconds).start();

來源

2018-01-08 00:04:15

動畫矢量繪製對象上箭頭

回答

相關問題