2016-08-22 194 views
2

我試圖實現類似BEMAnimationTypeStroke,它可以在iOS庫BEMCheckBox中找到。Android圓圈複選標記動畫

我試過使用動畫矢量繪製來實現這一點,但我不知道如何動畫從0開始點到最終位置的圓圈內的複選標記。 (該圓圈可以是靜態的,我正在尋找動畫複選標記)。 這是我嘗試這樣做的實現:

繪製/ vector_drawable_ic_check_circle_white_48px.xml

<path 
      android:name="check" 
      android:fillColor="#FFFFFF" 
      android:pathData="M37.1,13.6L18.4,32.3h1.7l-8.5-8.5L10,25.5l8.5,8.5l0.8,0.8l0.8-0.8l18.7-18.7L37.1,13.6L37.1,13.6z"/> 
    <path 
      android:name="circle" 
      android:fillColor="#FFFFFF" 
      android:pathData="M24,48c13.3,0,24-10.7,24-24S37.3,0,24,0S0,10.7,0,24S10.7,48,24,48L24,48z 
M24,45.6 
C12.1,45.6,2.4,35.9,2.4,24S12.1,2.4,24,2.4S45.6,12.1,45.6,24S35.9,45.6,24,45.6L24,45.6z"/> 
</vector> 

動畫/ transform.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
      android:duration="1000" 
      android:propertyName="fillColor" 
      android:valueFrom="@color/transparent" 
      android:valueTo="@color/white"/> 
</set> 

繪製/ animation.xml

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:drawable="@drawable/vector_drawable_ic_check_circle_white_48px"> 
    <target 
      android:name="check" 
      android:animation="@anim/change_color"/> 
</animated-vector> 

當佈局設置,我用啓動動畫:

ImageView mCpuImageView = (ImageView) findViewById(R.id.animated_check); 
Drawable drawable = mCpuImageView.getDrawable(); 
if (drawable instanceof Animatable) { 
    ((Animatable) drawable).start(); 
} 

誰能幫助我?有沒有更簡單的方法來實現這一點(自定義視圖或現有庫)?

這個想法是我想在圓圈中有一個複選標記,並且我想爲複選標記的路徑設置動畫。顯示時,只有圓圈可見,然後才能創建複選標記。如果其他自定義設置(例如同時勾選動畫圈可以很容易實現動畫效果)會更好,但起初我只想勾選複選標記。

LE: 最後我選擇了通過自定義視圖手動創建動畫的方法。如果任何人有一個想法,我怎樣才能通過矢量繪製實現這一點,它將是一個很好的開發實踐。謝謝。

回答

0

創建複選標記的動畫可以通過動畫選中標記路徑的trimPathEnd屬性(請參閱https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html)來實現。 trimPathEnd屬性的值表示末尾應該位於的路徑的百分比,修剪超出該百分比的所有內容。通過動畫trimPathEnd從0到1將顯示從0%到100%的複選標記路徑。在動畫/ trim_path.xml

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
     android:drawable="@drawable/vector_drawable_ic_check_circle_white_48px"> 
    <target 
      android:name="check" 
      android:animation="@anim/trim_path"/> 
</animated-vector> 

然後:

在下面AnimatedVectorDrawable定義,我們引用一個名爲trim_path動畫

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
      android:duration="1000" 
      android:propertyName="trimPathEnd" 
      android:valueFrom="0" 
      android:valueTo="1"/> 
</set> 

這應該產生具有複選標記生長AnimatedVectorDrawable從0%到100%。同樣,你也可以在圓上動畫trimPathEnd。請注意,您可能需要複製圓形路徑,因此一個圓形是灰色和靜態的,另一個圓形是藍色,頂部是動畫。

+0

它不起作用。不爲我製作動畫。 – kdas

+0

'mCpuImageView.getDrawable()'給了我一個可繪製的VectorDrawable實例,而不是'Animatable' – kdas

6

我一直在尋找相同的東西,這個post幾乎可以解釋這一切。從該職位代碼:

繪製/ check_mark.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="24dp" 
    android:height="24dp" 
    android:viewportHeight="24.0" 
    android:viewportWidth="24.0"> 
    <group android:name="background"> 
     <path 
      android:name="circle" 
      android:fillColor="@color/colorPrimary" 
      android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" /> 
    </group> 
    <group android:name="check"> 
     <path 
      android:name="tick" 
      android:pathData="M6,11 l0,0 l0,0" 
      android:strokeColor="@color/colorAccent" 
      android:strokeWidth="1" /> 
    </group> 

</vector> 

繪製-V21/animated_check.xml

<?xml version="1.0" encoding="utf-8"?> 
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/check_mark"> 
    <target 
     android:name="tick" 
     android:animation="@anim/check_animation" /> 
</animated-vector> 

動畫/ check_animation.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/accelerate_interpolator" 
    android:ordering="sequentially" 
    android:shareInterpolator="false"> 
    <!-- Step 1 --> 
    <objectAnimator 
     android:duration="@android:integer/config_shortAnimTime" 
     android:propertyName="pathData" 
     android:valueFrom="M6,11 l0,0 l0,0" 
     android:valueTo="M6,11 l3.5,4 l0,0" 
     android:valueType="pathType" /> 
    <!-- Step 2 --> 
    <objectAnimator 
     android:duration="@android:integer/config_shortAnimTime" 
     android:propertyName="pathData" 
     android:valueFrom="M6,11 l3.5,4 l0,0" 
     android:valueTo="M6,11 l3.5,4 l8,-7" 
     android:valueType="pathType" /> 
</set> 

使用

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    android:visibility="visible" 
    app:srcCompat="@drawable/animated_check" /> 
mImgCheck = (ImageView) findViewById(R.id.imageView); 
((Animatable) mImgCheck.getDrawable()).start(); 
+0

這不會做任何動畫 –

+0

不知道爲什麼它不適合你,但它對我來說 –

+0

沒有爲我工作! –

0

這對我的作品。只需按照上面的@ s-hunter的xml代碼。在你的活動中修改代碼。如下所示:

mImgCheck = (ImageView) findViewById(R.id.imageView);   
Drawable drawable = mImgCheck.getDrawable(); 
((Animatable) drawable).start(); 

您可以添加rippleBackground以獲得更好的外觀。

+0

仍然不能正常工作 –

+0

顯示您的代碼。使用您的解決方案可以很容易地建議 –

+0

與上面的@ s-hunter完全相同的代碼。 –