Android素材Play/Pauseベクター描画可能アニメーション

Question

Androidアプリでは多くの音楽プレーヤーのように再生/一時停止アニメーションを実装するにはどうすればよいですか？私は多くのソリューションを試しましたが、どれも成功しませんでした。

これは私がこれまでにやっていることです： MainActivity.java：

@Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     imageButton = (ImageButton) findViewById(R.id.imageView); 
     imageButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Animatable animatable = (Animatable) imageButton.getDrawable(); 
       animatable.start(); 
      } 
     }); 
    } 

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="widefide.com.vectoranimation01.MainActivity"> 


    <ImageButton 
     android:layout_width="wrap_content" 
     style="@style/Widget.AppCompat.Button.Borderless" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:id="@+id/imageView" 
     android:src="@drawable/play_pause" 
     android:layout_centerVertical="true" 
     android:layout_centerHorizontal="true" /> 
</RelativeLayout> 

がplay_pause.xml：

<?xml version="1.0" encoding="utf-8"?> 
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android" 
android:constantSize="true"> 
<item 
    android:drawable="@drawable/pause_ic" 
    android:state_checked="true" 
    android:id="@+id/pause_state" /> 
<item 
    android:drawable="@drawable/play_ic" 
    android:id="@+id/play_state" /> 
<transition android:fromId="@id/play_state" android:toId="@id/pause_state" android:reversible="true"> 
    <animated-vector android:drawable="@drawable/play_ic"> 
     <target android:name="d" android:animation="@anim/path_morph" /> 
    </animated-vector> 
</transition> 
</animated-selector> 

path_morphを.xml

012代わりに描画可能に変更する

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:duration="4000" 
     android:propertyName="pathData" 
     android:valueFrom="@string/ic_play_string" 
     android:valueTo="@string/ic_pause_string" 
     android:valueType="pathType" /> 
</set> 

Answer 1

再生と一時停止のアイコンをpngの代わりにベクトルイメージとして定義し、次にAnimatedVectorDrawableを使用して2つの間のトランジションを行う必要があります。

以上の情報のためudacityコースのtickCrossの例を参照してください： 説明のためhttps://www.udacity.com/course/viewer#!/c-ud862/l-4969789009/m-4908328939とあなただけの（48dp）でダニやクロスパスを交換する必要がコード

ためhttps://github.com/udacity/ud862-samples/tree/master/TickCross/app/src/main：

<string name="path_play">M16,24L38,24L27.3,30.8L16,38ZM16,10L27.3,17.2L38,24L16,24Z</string> 
<string name="path_pause">M12,10L20,10L20,38L12,38ZM28,10L36,10L36,38L28,38Z</string> 

を

Answer 2

1つのオプションは、一度に2と同じ位置にあるボタンとだけ表示を置くことです。

再生ボタンをクリックすると、再生ボタンが非表示になり、一時停止ボタンが表示されます。 一時停止ボタンをクリックすると、一時停止ボタンが非表示になり、再生ボタンが表示されます。

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator"> 
    <alpha 
     android:fromAlpha="0.2" 
     android:toAlpha="1.0" 
     android:duration="500"/> 
</set> 

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator"> 
    <alpha 
     android:fromAlpha="1.0" 
     android:toAlpha="0.2" 
     android:duration="500"/> 
</set> 

と各ボタンの

はあなたがフェードを開始したり、クリックしてください：

あなたは、そう、彼らはあなたがこれらのような2つのXMLファイルを必要とするフェードアニメーションのために互いに

にフェードアルファアニメーションを追加することができますそれに応じて可視性を設定します。