Android實現(xiàn)同頻共幀動畫效果

更新時間：2024年01月22日 09:42:30 作者：時光少年

我們聽過“同頻共振”,其原理是多個物體物體以同樣的頻率振動,但是本篇實現(xiàn)的效果是“同頻共幀”,含義是：動畫以同樣的頻率和同樣的幀展示在多個不同View上,文中通過代碼示例介紹的非常詳細,感興趣的同學(xué)可以自己動手嘗試一下

同頻共幀

我們聽過“同頻共振”，其原理是多個物體物體以同樣的頻率振動，但是本篇實現(xiàn)的效果是“同頻共幀”，含義是：動畫以同樣的頻率和同樣的幀展示在多個不同View上。

特點：

動畫效果
同樣的頻率
同樣的幀（嚴格意義上是小于1個vsync信號的幀）
多個不同View同時展示

之前的文章中我們實現(xiàn)了很多動效，但幾乎都是基于View本身實現(xiàn)的，但是在Android中，Drawable最容易擴展的動效工具，通過Drawable提供的接口，我們可以接入libpag、lottie、SVG、APNG、gif，LazyAnimationDrawable、AnimationDrawable等動效，更加方便移植，同時Drawable支持setHotspot和setState接口，可以實現(xiàn)復(fù)雜度較低的交互效果。

這種動效其實在手機版QQ上就有，如果你給自己的頭像設(shè)置為一個動態(tài)圖，那么在群聊連發(fā)多條消息，那么你就會發(fā)現(xiàn)，在同一個頁面上你的頭像動畫是同步展示的。

現(xiàn)狀 & 痛點

現(xiàn)狀

我們以幀動畫問題展開，要知道幀動畫有難以容忍的內(nèi)存占用問題、以及主線程解碼問題，同時包體積問題也相當(dāng)嚴重，為此市面上出現(xiàn)了很多方案。libpag、lottie、VapPlayer、AlphaPlayer、APNG、GIF、SVGA、AnimationDrawable等。但你在開發(fā)時就會發(fā)現(xiàn)，每一種引擎都有自己獨特的優(yōu)勢，也有自己獨特的劣勢，你往往想著用一種引擎統(tǒng)一所有動效實現(xiàn)，但往往現(xiàn)實不允許。

我們來說說幾大引擎的優(yōu)缺點：

libPag：目前支持功能最多的動效引擎，普通動畫性能也非常不錯，相比其他引擎快很多。該引擎使用自研渲染引擎和解碼器實現(xiàn)，但是對于預(yù)合成動效（超長動效和復(fù)雜動效可能會用到），由于其使用的是軟解，在低配設(shè)備上比VapPlayer和AlphaPlayer卡的多，另外lib so相比其他引擎也是大很多。

VapPlayer/AlphaPlayer : 這兩種其都是通過alpha 遮罩實現(xiàn)，大部分情況下使用的是設(shè)備硬解碼器，不過，VapPlayer缺乏硬解碼器篩選機制，偶爾有時會拿到軟解碼器，另外其本身存在音畫同步問題，至于AlphaPlayer把播放交給系統(tǒng)和三方播放器，避免了此類問題。但是，如果是音視頻類app，他們都有共同的問題，終端設(shè)備上硬解碼器的實例數(shù)量是受限制的，甚至有的設(shè)備解碼器同一時刻只能使用一個，使用這兩種解碼器就會造成業(yè)務(wù)播放器綠屏、起播失敗、解碼器卡住等問題。不過解決辦法是將特效和業(yè)務(wù)播放器資源類型隔離，如果業(yè)務(wù)播放器是使用h264，那么你可以動效使用h264\mpeg2等其他編碼類型。

lottie： lottie目前是比較廣為人知的動效引擎，使用也相當(dāng)廣泛。但其存在跨平臺兼容性，缺少很多特效，其性能是不如libpag的，不過總體能覆蓋到大部分場景。另一個開發(fā)中常常會遇到的問題是，UI設(shè)計人員對于lottie的compose layer理解存在問題，往往會出現(xiàn)將lottie動畫做成和幀動畫一樣的動畫，顯然，compose layer的思想是多張圖片合成，那就意味著圖片本身應(yīng)該有大有小，按一定軌跡運動和漸變，而不是一幀一幀簡單播放。

APNG、GIF ：這類動畫屬于資源型動畫，其本身存在很多缺點，比如占內(nèi)存和耗cpu，不過簡單的場景還是可以使用的。

SVGA：很多平臺對這種動畫抱有期待，特別是其矢量性質(zhì)和低內(nèi)存的特點，然而，其本身面臨標(biāo)準(zhǔn)不統(tǒng)一的問題，造成跨平臺的能力不足。

LazyAnimationDrawable：幾乎所有的動畫對低配設(shè)備都不友好，幀動畫比上不足比下有余，低配設(shè)備上，為了解決libpag、VapPlayer、lottie對低配設(shè)備上音視頻類app不友好的問題，使用AnimationDrawble顯然是不行的，因此我們往往會實現(xiàn)了自己的AnimationDrawable，使其具備兜底的能力：異步解碼 + 展示一幀預(yù)加載下一幀的能力，其實也就是LazyAnimationDrawable。

痛點

以上我們羅列了很多問題，看似和我們的主要目的毫無關(guān)系，其實我們可以想想，如果使用上述引擎，哪種方式可以實現(xiàn)兼容性更好的“同頻共幀”動效呢？

實際上，幾乎沒有引擎能承擔(dān)此任務(wù)，那有沒有辦法實現(xiàn)呢？

原理

我們很難讓每個View同時執(zhí)行和繪制同樣的畫面，另一個問題是，如果設(shè)計多個View繪制Bitmap，那么還可能造成資源加載的內(nèi)存OOM的問題。另外一方面如果使用LazyAnimationDrawable、VapX、AlphaPlayer等，如果同時執(zhí)行，那么解碼線程需要創(chuàng)建多個，顯然性能問題也是重中之重。

有沒有更加簡單方法呢？

實際上是有的，那就是投影。

我們無論使用CompositeDrawable、LazyAnimationDrawable、AnimationDrawable還是VectorDrawable，我們可以保證在使用個實例的情況下，將畫面繪制到不同View上即可。

不過：本篇以AnimationDrawable 為例子實現(xiàn)，其實其他Drawable動畫類似。

實現(xiàn)

但是這種難度也是很高的，如果我們使用一個View 管理器，然后構(gòu)建一個播放器，顯然還要處理View各種狀態(tài)，顯然避免不了耦合問題。這里我們回到開頭說過的drawable方案，當(dāng)然，一個drawable顯然無法設(shè)置給多個View，這點顯然是我們需要處理的難點，此外，每個View的大小也不一致，如何處理這種問題呢。

Drawable加殼

我們參考Glide中com.bumptech.glide.request.target.FixedSizeDrawable 實現(xiàn)，其原理是通過FixedSizeDrawable代理真實的drawble繪制，然后利用Matrix實現(xiàn)Canvas縮放，即可適配不同大小的View。

FixedSizeDrawable(State state, Drawable wrapped) {
  this.state = Preconditions.checkNotNull(state);
  this.wrapped = Preconditions.checkNotNull(wrapped);

  // We will do our own scaling.
  wrapped.setBounds(0, 0, wrapped.getIntrinsicWidth(), wrapped.getIntrinsicHeight());

  matrix = new Matrix();
  wrappedRect = new RectF(0, 0, wrapped.getIntrinsicWidth(), wrapped.getIntrinsicHeight());
  bounds = new RectF();
}

Matrix 的作用

matrix.setRectToRect(wrappedRect, drawableBounds, Matrix.ScaleToFit.CENTER);
canvas.concat(matrix);  //Canvas Matrix 轉(zhuǎn)換

當(dāng)然，必要時支持下alpha和colorFilter，下面是完整實現(xiàn)。

public static class AnimationDrawableWrapper extends Drawable {

    private final AnimationDrawable animationDrawable; //動畫drawable
    private final Matrix matrix = new Matrix();
    private final RectF wrappedRect;
    private final RectF drawableBounds;
    private int alpha = 255;
    private ColorFilter colorFilter;

    public AnimationDrawableWrapper(AnimationDrawable drawable) {
        this.animationDrawable = drawable;
        this.wrappedRect = new RectF(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        this.drawableBounds = new RectF();
    }

    @Override
    public void draw(Canvas canvas) {
        Drawable current = animationDrawable.getCurrent();
        if (current == null) {
            return;
        }
        current.setAlpha(this.alpha);
        current.setColorFilter(colorFilter);
        Rect drawableRect = current.getBounds();
        wrappedRect.set(drawableRect);
        drawableBounds.set(getBounds());
       
       // 變化坐標(biāo)
        matrix.setRectToRect(wrappedRect, drawableBounds, Matrix.ScaleToFit.CENTER);
        
        int save = canvas.save();
        
        canvas.concat(matrix);
        current.draw(canvas);
        
        canvas.restoreToCount(save);
        
        current.setAlpha(255);//還原
        current.setColorFilter(null); //還原
     

    }

    @Override
    public void setAlpha(int alpha) {
        this.alpha = alpha;
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        this.colorFilter = colorFilter;
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

}

View更新

我們知道AnimationDrawable每一幀都是不一樣的，那怎么將每一幀都能繪制在View上呢，了解過Drawable更新機制的開發(fā)者都知道，每一個View都實現(xiàn)了Drawable.Callback，當(dāng)給View設(shè)置drawable時，Drawable.Callback也會設(shè)置給drawable。

Drawable刷新View時需要調(diào)用invalidate，顯然是通過Drawable.Callback實現(xiàn)，當(dāng)然，Drawable自身就實現(xiàn)了更新方法Drawable#invalidateSelf，我們只需要調(diào)用改方法刷新View即可觸發(fā)View#onDraw，從而觸發(fā)drawable#draw方法。

public void invalidateSelf() {
    final Callback callback = getCallback();
    if (callback != null) {
        callback.invalidateDrawable(this);
    }
}

更新AnimationDrawable

顯然，任何動畫都具備時間屬性，因此更新Drawable是必要的，View本身是可以通過Drawable.Callback機制更新Drawable的。通過scheduleDrawable和unscheduleDrawable 定時處理Runnable和取消Runnable。

public interface Callback {

    void invalidateDrawable(@NonNull Drawable who);
  
    void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when);

    void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what);
}

而AnimationDrawable實現(xiàn)了Runnable接口

@Override
public void run() {
    nextFrame(false);
}

然而，如果使用的RecyclerView，那么還可能會出現(xiàn)View 從頁面移除的問題，因此依靠View顯然是不行的，這里我們引入Handler或者Choreograper。

this.choreographer = Choreographer.getInstance();

但是，我們什么時候調(diào)用呢？顯然還得利用Drawable.Callback機制

給animationDrawable設(shè)置Drawable.Callback

this.drawable.setCallback(callback);

更新邏輯實現(xiàn)

@Override
public void invalidateDrawable(@NonNull Drawable who) {
//更新所有wrapper
    for (int i = 0; i < drawableList.size(); i++) {
        WeakReference<AnimationDrawableWrapper> reference = drawableList.get(i);
        AnimationDrawableWrapper wrapper = reference.get();
        if (wrapper == null) {
            return;
        }
        wrapper.invalidateSelf();
    }
}

@Override
public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {
    this.scheduleTask = what;
    this.choreographer.postFrameCallbackDelayed(this, when - SystemClock.uptimeMillis());
}

@Override
public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {
    this.scheduleTask = null;
    this.choreographer.removeFrameCallback(this);
}

既然使用Choreographer，那doFrame需要實現(xiàn)的

@Override
public void doFrame(long frameTimeNanos) {
    if(this.scheduleTask != null) {
        this.scheduleTask.run();
    }
}

好了，以上就是核心邏輯，到此我們就實現(xiàn)了核心邏輯

完整代碼

public class MirrorFrameAnimation implements Drawable.Callback, Choreographer.FrameCallback {
    private final Drawable drawable;
    private final int drawableWidth;
    private final int drawableHeight;
    private List<WeakReference<AnimationDrawableWrapper>> drawableList = new ArrayList<>();
    private Choreographer choreographer;
    private Runnable scheduleTask;

    public MirrorFrameAnimation(Resources resources, int resId, int drawableWidth, int drawableHeight) {
      
        //設(shè)置寬高，防止AnimationDrawable大小不穩(wěn)定問題
        this.drawableWidth = drawableWidth;
        this.drawableHeight = drawableHeight;
        this.drawable = resources.getDrawable(resId);
        this.drawable.setBounds(0, 0, drawableHeight, drawableHeight);
        this.drawable.setCallback(this);
        this.choreographer = Choreographer.getInstance();
    }

    public void start() {
        choreographer.removeFrameCallback(this);
        if (drawable instanceof AnimationDrawable) {
            ((AnimationDrawable) drawable).start();
        }
    }

    public void stop() {
        choreographer.removeFrameCallback(this);
        if (drawable instanceof AnimationDrawable) {
            ((AnimationDrawable) drawable).stop();
        }
    }

    /**
     * @return The number of frames in the animation
     */
    public int getNumberOfFrames() {
        if (drawable instanceof AnimationDrawable) {
           return  ((AnimationDrawable) drawable).getNumberOfFrames();
        }
        return 1;
    }

    /**
     * @return The Drawable at the specified frame index
     */
    public Drawable getFrame(int index) {
        if (drawable instanceof AnimationDrawable) {
            return  ((AnimationDrawable) drawable).getFrame(index);
        }
        return drawable;
    }

    /**
     * @return The duration in milliseconds of the frame at the
     *         specified index
     */
    public int getDuration(int index) {
        if (drawable instanceof AnimationDrawable) {
            return  ((AnimationDrawable) drawable).getDuration(index);
        }
        return -1;
    }

    /**
     * @return True of the animation will play once, false otherwise
     */
    public boolean isOneShot() {
        if (drawable instanceof AnimationDrawable) {
            return  ((AnimationDrawable) drawable).isOneShot();
        }
        return true;
    }

    /**
     * Sets whether the animation should play once or repeat.
     *
     * @param oneShot Pass true if the animation should only play once
     */
    public void setOneShot(boolean oneShot) {
        if (drawable instanceof AnimationDrawable) {
              ((AnimationDrawable) drawable).setOneShot(oneShot);
        }
    }

    public void syncDrawable(View view) {
        if (!(drawable instanceof AnimationDrawable)) {
            if(view instanceof ImageView) {
                ((ImageView) view).setImageDrawable(drawable);
            }else{
                view.setBackground(drawable);
            }
            return;
        }

        AnimationDrawableWrapper wrapper = new AnimationDrawableWrapper((AnimationDrawable) drawable);
        drawableList.add(new WeakReference<>(wrapper));

        if(view instanceof ImageView) {
            ((ImageView) view).setImageDrawable(wrapper);
        }else{
            view.setBackground(wrapper);
        }
    }

    @Override
    public void invalidateDrawable(@NonNull Drawable who) {
        for (int i = 0; i < drawableList.size(); i++) {
            WeakReference<AnimationDrawableWrapper> reference = drawableList.get(i);
            AnimationDrawableWrapper wrapper = reference.get();
            if (wrapper == null) {
                return;
            }
            wrapper.invalidateSelf();
        }
    }

    @Override
    public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {
        this.scheduleTask = what;
        this.choreographer.postFrameCallbackDelayed(this, when - SystemClock.uptimeMillis());
    }

    @Override
    public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {
        this.scheduleTask = null;
        this.choreographer.removeFrameCallback(this);
    }


    @Override
    public void doFrame(long frameTimeNanos) {
        if(this.scheduleTask != null) {
            this.scheduleTask.run();
        }
    }

}

使用方法

int dp2px = (int) dp2px(100);
MirrorFrameAnimation mirrorFrameAnimation = new MirrorFrameAnimation(getResources(),R.drawable.loading_animation,dp2px,dp2px);

mirrorFrameAnimation.syncDrawable(imageView1);
mirrorFrameAnimation.syncDrawable(imageView2);
mirrorFrameAnimation.syncDrawable(imageView3);
mirrorFrameAnimation.syncDrawable(imageView4);
mirrorFrameAnimation.syncDrawable(imageView5);
mirrorFrameAnimation.syncDrawable(imageView6);

mStart.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mirrorFrameAnimation.start();
    }
});
mStop.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mirrorFrameAnimation.stop();
    }
});