2014-12-30 2 views
0

Я разрабатываю приложение для Android с красивым, но трудно реализуемым дизайном с множеством настраиваемых анимаций. Теперь мне нужно реализовать анимацию для кнопки, это должна быть динамическая анимация взгляда, которая влияет как на границу кнопки, так и на ее текст, и должна перемещаться слева направо. Вот пример такой анимации в приложении iOS.Усовершенствованная анимация просмотров в Android

from left

to right

Так что я надеюсь, что вы пойманной главную идею. Я попытался использовать Property Animation, но это не то, что мне действительно нужно. Также я нашел множество пользовательских библиотек и попробовал много примеров из SDK, но ничего подобного не было.

Итак, если вы знаете, как это можно сделать, ответьте мне.

+0

Похоже, движущегося градиента. Воздействие на закругленную угловую границу и текст. –

+0

Похоже, но это не так. Из-за того, что мне нужен градиент с маской границы и текста. –

+0

Да, правильно, если вы хотите сделать это с помощью ресурса или с помощью Java-кода. Но я предпочитаю решение FrameAnimation, предложенное @GregEnnis. –

ответ

1

попробовать этот класс-обертку:

class FL extends FrameLayout implements ValueAnimator.AnimatorUpdateListener { 
    private static final int W = 200; 
    private final LinearGradient gradient; 
    private final Paint paint; 
    private float x; 

    public FL(View child) { 
     super(child.getContext()); 
     addView(child); 
     int[] colors = {0, 0xaaffffff, 0}; 
     gradient = new LinearGradient(0, 0, W, 0, colors, null, Shader.TileMode.CLAMP); 
     paint = new Paint(); 
     paint.setShader(gradient); 
     paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)); 
     x = -W; 
    } 

    @Override 
    protected void dispatchDraw(Canvas canvas) { 
     canvas.saveLayer(null, null, 0); 
     super.dispatchDraw(canvas); 
     canvas.translate(x, 0); 
     float h = getHeight(); 
     canvas.rotate(20, W/2, h/2); 
     canvas.drawRect(0, -h, W, 2 * h, paint); 
     canvas.restore(); 
    } 

    @Override 
    public void onAnimationUpdate(ValueAnimator animation) { 
     x = (int) animation.getAnimatedValue(); 
     invalidate(); 
    } 

    public void startMagic() { 
     ValueAnimator a = ValueAnimator.ofInt(-W, getWidth()); 
     a.addUpdateListener(this); 
     a.setDuration(1000).setInterpolator(new AccelerateDecelerateInterpolator()); 
     a.start(); 
    } 
} 

round_frame.xml является:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <corners android:radius="20dp" /> 
    <stroke android:color="#a00" android:width="4dp" /> 
</shape> 

и протестировать его со следующим в OnCreate:

Button b = new Button(this); 
    final FL fl = new FL(b); 
    b.setTextSize(28); 
    b.setTextColor(0xffaa0000); 
    b.setText("click me to see the magic"); 
    b.setBackgroundResource(R.drawable.round_frame); 
    View.OnClickListener listener = new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fl.startMagic(); 
     } 
    }; 
    b.setOnClickListener(listener); 
    addContentView(fl, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); 

ПРИМЕЧАНИЕ: если вы хотите, чтобы он использовал его только в Button, у вас нет FL-обертки: вы можете расширить класс Button и переопределить методы рисования, как это было в FL-оболочке класса

+0

спасибо большое! очень хорошее решение. –

+0

приветствуется ... – pskink

3

Я получаю анимацию с предварительным рендерингом с чередой файлов PNG, а затем используйте AnimationDrawable для ее отображения.

+0

Если ему нужна эта анимация на нескольких кнопках разного размера/текста, это сделает много PNG и тяжелого APK! – pdegand59

+0

Это не вариант, потому что мне нужно много таких кнопок. –

+0

Вы можете повторно использовать одну и ту же анимацию для всех кнопок –

1

Я закончил свою собственную реализацию.

В результате до сих пор:

enter image description here

Это достигается путем переноса анимированного градиента Shader на статическом TextView Вы можете получить исходный код на следующей Gist: ShinnyTextView

Ток версия не поддерживает настройку XML, но вы можете адаптировать значения в коде.

Если вы используете это, вы можете иметь более точный контроль, когда приостановить/возобновить анимацию, чтобы избежать АНИ

+0

большой минус заключается в том, что вы создаете новый LinearGradient для каждого кадра анимации. – pskink

+0

Да, перевод одного градиента, как вы, вероятно, является лучшей идеей. Я должен изменить свой код следующим образом. – pdegand59