Question

我想在Android应用中显示此动画：

因此，我创建了一个<animation-list>。它使用46帧，每帧由200x200px png组成：

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@drawable/anim_loading_ripple_frame_0" android:duration="45" />
            <item android:drawable="@drawable/anim_loading_ripple_frame_1" android:duration="45" />
            <item android:drawable="@drawable/anim_loading_ripple_frame_2" android:duration="45" />
            <item android:drawable="@drawable/anim_loading_ripple_frame_3" android:duration="45" />
            <item android:drawable="@drawable/anim_loading_ripple_frame_4" android:duration="45" />
            <item android:drawable="@drawable/anim_loading_ripple_frame_5" android:duration="45" />
               ...
            <item android:drawable="@drawable/anim_loading_ripple_frame_45" android:duration="45" />
    </animation-list>

然后将其设置为background的{{1}}，然后使用

开始动画

ImageView

一切正常，除了应用有时由于AnimationDrawable loadingAnimation = (AnimationDrawable) loadingAnimationView.getBackground(); loadingAnimation.start();而崩溃的事实！这种动画的内存需求似乎很高，因为我已经阅读过其他遇到同样问题的软件。

然后我以为我可以将每个帧制作成一个XML OutOfMemoryException可绘制对象，因此我尝试进行实验，但是我不知道如何使圆改变大小-它们总是占据圆的整个宽度视图。

我试图做这样的事情

shape

并且还使用<item> <shape android:shape="oval"> <padding android:top="30dp" android:right="30dp" android:bottom="30dp" android:left="30dp" /> <size android:width="100dp" android:height="100dp" /> <stroke android:color="#0F0" android:width="4dp"/> </shape> </item>在同一XML文件中定义另一个layer-list，但大小不同，认为这会导致圆变小，但最终它们都占据了100％风景。

此外，如果我用XML定义帧而不是一系列shape图像，我不确定AnimationDrawable是否会实际使用更少的内存？也许我还会遇到相同的内存使用问题？

我有什么选择？如果时间不成问题，我会尝试制作一个自定义的View，但似乎只是为该动画做很多工作。

Answer 1

ScaleAnimation solution provided by Ves可以工作，但是我认为我不妨深入研究它，并制作一个适当的（而且我认为效率更高）自定义View。尤其是在处理多个“涟漪”时。

这是整个View类，可以在init()中对波纹进行调整，以更改颜色，波纹数量等。

RippleView.java

public class RippleView extends View implements ValueAnimator.AnimatorUpdateListener {
    public static final String TAG = "RippleView";


    private class Ripple {
        AnimatorSet mAnimatorSet;
        ValueAnimator mRadiusAnimator;
        ValueAnimator mAlphaAnimator;
        Paint mPaint;

        Ripple(float startRadiusFraction, float stopRadiusFraction, float startAlpha, float stopAlpha, int color, long delay, long duration, float strokeWidth, ValueAnimator.AnimatorUpdateListener updateListener){
            mRadiusAnimator = ValueAnimator.ofFloat(startRadiusFraction, stopRadiusFraction);
            mRadiusAnimator.setDuration(duration);
            mRadiusAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mRadiusAnimator.addUpdateListener(updateListener);
            mRadiusAnimator.setInterpolator(new DecelerateInterpolator());

            mAlphaAnimator = ValueAnimator.ofFloat(startAlpha, stopAlpha);
            mAlphaAnimator.setDuration(duration);
            mAlphaAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mAlphaAnimator.addUpdateListener(updateListener);
            mAlphaAnimator.setInterpolator(new DecelerateInterpolator());

            mAnimatorSet = new AnimatorSet();
            mAnimatorSet.playTogether(mRadiusAnimator, mAlphaAnimator);
            mAnimatorSet.setStartDelay(delay);

            mPaint = new Paint();
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setColor(color);
            mPaint.setAlpha((int)(255*startAlpha));
            mPaint.setAntiAlias(true);
            mPaint.setStrokeWidth(strokeWidth);
        }

        void draw(Canvas canvas, int centerX, int centerY, float radiusMultiplicator){
            mPaint.setAlpha( (int)(255*(float)mAlphaAnimator.getAnimatedValue()) );
            canvas.drawCircle(centerX, centerY, (float)mRadiusAnimator.getAnimatedValue()*radiusMultiplicator, mPaint);
        }

        void startAnimation(){
            mAnimatorSet.start();
        }

        void stopAnimation(){
            mAnimatorSet.cancel();
        }
    }

    private List<Ripple> mRipples = new ArrayList<>();



    public RippleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public RippleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    public RippleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        if( isInEditMode() )
            return;

        /*
        Tweak your ripples here!
        */
        mRipples = new ArrayList<>();
        mRipples.add(new Ripple(0.0f, 1.0f, 1.0f, 0.0f, Color.RED, 0, 2000, 4, this));
        mRipples.add(new Ripple(0.0f, 1.0f, 1.0f, 0.0f, Color.WHITE, 500, 2000, 4, this));
    }


    public void startAnimation() {
        setVisibility(View.VISIBLE);

        for (Ripple ripple : mRipples) {
            ripple.startAnimation();
        }
    }

    public void stopAnimation() {
        for (Ripple ripple : mRipples) {
            ripple.stopAnimation();
        }

        setVisibility(View.GONE);
    }


    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int centerX = getWidth()/2;
        int centerY = getHeight()/2;
        int radiusMultiplicator = getWidth()/2;

        for (Ripple ripple : mRipples) {
            ripple.draw(canvas, centerX, centerY, radiusMultiplicator);
        }
    }
}

只需在.startAnimation()上调用RippleView即可开始制作动画。

RippleView r = findViewById(R.id.rippleView);
r.startAnimation();

Answer 2

您可以使用ScaleAnimation更改大小。我创建了一个ImageView并使用了上面定义的形状：

<ImageView
    android:id="@+id/circle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/circle"/>

它与您想要的略有不同，因为我没有费心找到设置动画的中心点。它是从左上角缩放。（0,0）

  ImageView iv = findViewById(R.id.circle);
  float startScale = 0.5f;
  float endScale = 3.0f;
  Animation scaleAnim = new ScaleAnimation( startScale, endScale, 
                              startScale, endScale,
                              Animation.RELATIVE_TO_SELF, 0,
                              Animation.RELATIVE_TO_SELF, 0);
  scaleAnim.setRepeatCount(Animation.INFINITE);
  scaleAnim.setRepeatMode(Animation.REPEAT);
  scaleAnim.setDuration(2000);
  iv.setAnimation(scaleAnim);
  scaleAnim.start();

您可以类似地使用ValueAnimation对颜色进行动画处理。

创建“不断增长的涟漪”加载动画-OutOfMemoryException

2 个答案: