2016-03-17 6 views
0

Я пытаюсь сделать некоторые тесты с UX и анимацией. Я хочу щелкнуть кнопкой мыши, чтобы развернуть его, пока кнопка не будет иметь размер его родительского макета. Вот мой очень простой интерфейс:Android expand animation on Button click

enter image description here

мне удалось создать свою собственную анимацию, это просто простой класс, который берет начала X, конец Х, начала Y и конец Y. Здесь является класс:

import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.Transformation; 

public class ExpandAnimation extends Animation { 
    protected final View view; 
    protected float perValueH, perValueW; 
    protected final int originalHeight, originalWidth; 

    public ExpandAnimation(View view, int fromHeight, int toHeight, int fromWidth, int toWidth) { 
     this.view = view; 
     this.originalHeight = fromHeight; 
     this.originalWidth = fromWidth; 
     this.perValueH = (toHeight - fromHeight); 
     this.perValueW = (toWidth - fromWidth); 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     view.getLayoutParams().height = (int) (originalHeight + perValueH * interpolatedTime); 
     view.getLayoutParams().width = (int) (originalWidth + (perValueW * interpolatedTime)*2); 
     view.requestLayout(); 
    } 

    @Override 
    public boolean willChangeBounds() { 
     return true; 
    } 
} 

анимация довольно хорошо и работает, как ожидалось:

enter image description here

Вот мой главный цикл:

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.Button; 

public class MainActivity extends AppCompatActivity { 
    private Button left; 

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

     left = (Button) findViewById(R.id.left); 
     left.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 
     left.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       ViewGroup parent = (ViewGroup) view.getParent(); 
       ExpandAnimation animation = new ExpandAnimation(view, view.getBottom(), parent.getTop(), view.getLeft(), parent.getRight()); 
       animation.setDuration(3000); 
       animation.setFillAfter(true); 
       view.startAnimation(animation); 
      } 
     }); 
    } 
} 

Но у меня есть 3 основных вопроса:

  • Во-первых, текст ушел, и я не знаю, почему ...
  • С другой стороны, Я хочу, чтобы моя анимация переходила на другие взгляды, но когда я попробовал, она не работала, как я могу это достичь?
  • И последнее, но не менее важное: в конце моей анимации кнопка ушла, и есть только уродливый артефакт ... Как я могу избежать этого?

enter image description here

Edit: мой макет:

<?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" 
    tools:context="MainActivity"> 

    <LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="match_parent" 
     android:layout_height="150dp" 
     android:weightSum="3" 
     android:padding="15dp" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:gravity="bottom"> 

     <Button 
      android:id="@+id/left" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:text="Retenter" 
      android:textSize="15dp" 
      android:textColor="#FFF" 
      android:background="#FF33CC44" /> 

    </LinearLayout> 
</RelativeLayout> 

Edit2: Артефакт, который появляется в конце анимации происходит из-за метода setLayerType (View.LAYER_TYPE_SOFTWARE, нуль) ,

+0

Можете ли вы, пожалуйста, разделить компоновку. –

+0

Да, конечно, все сделано :) – zed13

ответ

0
@Override 
protected void applyTransformation(float interpolatedTime, Transformation t) { 
    view.getLayoutParams().height = (int) (originalHeight + perValueH * interpolatedTime); 
    view.getLayoutParams().width = (int) (originalWidth + (perValueW * interpolatedTime)); 
    view.requestLayout(); 
} 

удалить * 2 будет выглядеть ниже.

enter image description here

+0

Во-первых, спасибо за ваш ответ, но зачем вам это предлагать? Это не то, что я хочу^_ ^. Я знаю, что моя ширина в 2 раза быстрее моего роста, это преднамеренно. Я ищу способ сохранить текст и узнать, как сделать мои анимации переходящимися в другие представления. – zed13

+0

Если это так. после достижения максимальной ширины. Хорошо, дайте мне попробовать и опубликуем ans –

+0

Если ширина шкалы u в 2 раза выше высоты, она достигает максимальной ширины перед высотой. –