1.概要
Apngアニメーションの再生に入る前に、Apngの構造を理解する必要があります。詳細については、Apngアニメーションの概要を参照してください。Apngの全体的な構造を理解した後、Apng分析とApngを主に含むApngアニメーションの再生について説明します。 2つのプロセスをレンダリングします。
2. Apngアニメーションの再生プロセス
Apngアニメーションの再生プロセスには、Apng解析とApngレンダリングの2つのプロセスが含まれます。Apng解析には、以下で紹介する2つの主要な方法があり、Apngレンダリングには、主に、破棄、ブレンド、描画の3つのステップが含まれます。 ）、Apng アニメーションの再生フローチャートは次のとおりです。
Apngアニメーションの再生プロセス
3. Apngの分析
Apngの分析は、主にApngファイルをApngシーケンスフレームFrame-nに変換することです。上のフローチャートからわかるように、Apngファイルの分析には2つのソリューションがリストされています。
1）Apngファイルは、最初に解凍（ApngExact）プロセスを実行してpngシーケンスフレームを生成してローカルに保存し、次に（LoadPng）処理をロードしてシーケンスフレームFrame-nを生成します。Apngアニメーションファイルの合計フレーム数が90であるとすると、ApngExact処理後、90のpngシーケンスフレームが生成され、ローカルに保存されます。各フレームは、LoadPng処理を通じてビットマップを生成し、後続のApngレンダリングに使用されます。
2）Apngは独立したファイルです。Apngファイルを読み取るために独自のコードクラスを記述します。ApngReader、フレームiをレンダリングするときに、ApngReaderを介してフレームiのビットマップを直接取得します。
比較：
1）最初の解決策は、すべてのApngファイルをpngシーケンス画像に解凍してローカルに保存することです。2番目の解決策は、Apngファイル全体を処理することです。最初の数フレームを直接読み取り、ビットマップとして保存する必要があります。記憶に。
2）スキーム1で解凍して取得したpng画像は、後続のレンダリングでBitampに変換する必要があり、スキーム2は最初の数フレームのビットマップを直接取得します。スキーム1と比較すると、スキーム2はSDカードからのpngファイルの読み取りを減らします。オペレーション。
4. Apngのレンダリング
スキーム1の特定の実装については、githubのapng-viewプロジェクトを参照してください。以下では、スキーム2の特定の実装であるApngReaderの特定の実装について説明します。
- Apngの各フレームを解析するには、ファイル全体をバッファーに入れ、RpngおよびAmapReaderのコンストラクターを介してApngの各フレームを読み取ります。
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
public ApngReader(String apngFile) throws IOException, FormatNotSupportException {
RandomAccessFile f = new RandomAccessFile(apngFile, "r");
mBuffer = f.getChannel().map(FileChannel.MapMode.READ_ONLY, 0, f.length());
f.close();
if (mBuffer.getInt() != PNG_SIG
&& mBuffer.getInt(4) != PNG_SIG_VER
&& mBuffer.getInt(8) != CODE_IHDR) {
throw new FormatNotSupportException("Not a png/apng file");
}
mChunk = new ApngMmapParserChunk(mBuffer);
reset();
}
</pre>
各フレームの読み取り方法を見てみましょう：
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
/**
* get next frame control info & bitmap
*
* @return next frame control info, or null if no next FCTL chunk || no next IDAT/FDAT
* @throws IOException
*/
public ApngFrame nextFrame() throws IOException {
// reset read pointers from previous frame's lock
mPngStream.clearDataChunks();
mPngStream.resetPos();
mChunk.unlockRead();
// locate next FCTL chunk
boolean ihdrCopied = false;
while (mChunk.typeCode != CODE_fcTL) {
switch (mChunk.typeCode) {
case CODE_IEND:
return null;
case CODE_IHDR:
mPngStream.setIHDR(mChunk.duplicateData());
break;
case CODE_acTL:
handleACTL(mChunk);
ihdrCopied = true;
break;
default:
handleOtherChunk(mChunk);
}
mChunk.parseNext();
}
// located at FCTL chunk
ApngFrame frame = new ApngFrame();
mChunk.assignTo(frame);
// locate next IDAT or fdAt chunk
mChunk.parseNext();// first move next from current FCTL
while (mChunk.typeCode != CODE_IDAT && mChunk.typeCode != CODE_fdAT) {
switch (mChunk.typeCode) {
case CODE_IEND:
return null;
case CODE_IHDR:
mPngStream.setIHDR(mChunk.duplicateData());
ihdrCopied = true;
break;
case CODE_acTL:
handleACTL(mChunk);
break;
default:
handleOtherChunk(mChunk);
}
mChunk.parseNext();
}
// located at first IDAT or fdAT chunk
// collect all consecutive dat chunks
boolean needUpdateIHDR = true;
int dataOffset = mChunk.getOffset();
while (mChunk.typeCode == CODE_fdAT || mChunk.typeCode == CODE_IDAT) {
if (needUpdateIHDR && (!ihdrCopied || mChunk.typeCode == CODE_fdAT)) {
mPngStream.updateIHDR(frame.getWidth(), frame.getHeight());
needUpdateIHDR = false;
}
if (mChunk.typeCode == CODE_fdAT) {
mPngStream.addDataChunk(new Fdat2IdatChunk(mChunk));
} else {
mPngStream.addDataChunk(new ApngMmapParserChunk(mChunk));
}
mChunk.parseNext();
}
// lock position for this frame's image as OutputStream
mChunk.lockRead(dataOffset);
frame.imageStream = mPngStream;
return frame;
}
</pre>
- Apng除去操作Apng除去操作は、ApngFrameRenderのrenderメソッドで行われます。メソッドは次のとおりです。
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
/**
* 渲染当前帧画面
*
* @param frame apng中当前帧
* @return 渲染合成后的当前帧图像
*/
public Bitmap render(ApngFrame frame, Bitmap frameBmp) {
// 执行消除操作
dispose(frame);
// 合成当前帧
blend(frame, frameBmp);
return mRenderFrame;
}
</pre>
破棄（ApngFrameフレーム）メソッドは次のとおりです。
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
/**
* 帧图像析构消除 - 提交结果
*/
private void dispose(ApngFrame frame) {
// last frame dispose op
switch (mLastDisposeOp) {
case APNG_DISPOSE_OP_NONE:
// no op
break;
case APNG_DISPOSE_OP_BACKGROUND:
// clear rect
mRenderCanvas.clipRect(mDisposeRect);
mRenderCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
mRenderCanvas.clipRect(mFullRect, Region.Op.REPLACE);
break;
case APNG_DISPOSE_OP_PREVIOUS:
// swap work and cache bitmap
Bitmap bmp = mRenderFrame;
mRenderFrame = mDisposedFrame;
mDisposedFrame = bmp;
mRenderCanvas.setBitmap(mRenderFrame);
mDisposeCanvas.setBitmap(mDisposedFrame);
break;
}
// current frame dispose op
mLastDisposeOp = frame.getDisposeOp();
switch (mLastDisposeOp) {
case APNG_DISPOSE_OP_NONE:
// no op
break;
case APNG_DISPOSE_OP_BACKGROUND:
// cache rect for next clear dispose
int x = frame.getxOff();
int y = frame.getyOff();
mDisposeRect.set(x, y, x + frame.getWidth(), y + frame.getHeight());
break;
case APNG_DISPOSE_OP_PREVIOUS:
// cache bmp for next restore dispose
mDisposeCanvas.clipRect(mFullRect, Region.Op.REPLACE);
mDisposeCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
mDisposeCanvas.drawBitmap(mRenderFrame, 0, 0, null);
break;
}
}
- Apng合成操作Apng合成操作は、破棄後の各フレームの後に行われ、特定のメソッドはブレンドです（ApngFrameフレーム、Bitmap frameBmp）。コードは次のとおりです。
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
/**
* 帧图像合成
*/
private void blend(ApngFrame frame, Bitmap frameBmp) {
int xOff = frame.getxOff();
int yOff = frame.getyOff();
mRenderCanvas.clipRect(xOff, yOff, xOff + frame.getWidth(), yOff + frame.getHeight());
if (frame.getBlendOp() == APNG_BLEND_OP_SOURCE) {
mRenderCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
}
mRenderCanvas.drawBitmap(frameBmp, xOff, yOff, null);
mRenderCanvas.clipRect(mFullRect, Region.Op.REPLACE);
}
</pre>
- Apng描画Apngの各フレームを削除して合成した後、ビューに描画できます。具体的なコードは次のとおりです。
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
/**
* draw the appointed frame
*/
private void drawFrame(AnimParams animItem, ApngFrame frame, Bitmap frameBmp) {
if (surfaceEnabled && !isInterrupted()) {
//start to draw the frame
try {
Matrix matrix = new Matrix();
matrix.setScale(mScale, mScale);
Bitmap bmp = mFrameRender.render(frame, frameBmp);
//saveBitmap(bmp, index);
index ++;
Canvas canvas = getHolder().lockCanvas();
//anti-aliasing
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
float[] tranLeftAndTop = ApngUtils.getTranLeftAndTop(canvas, bmp, animItem.align, mScale, animItem.percent);
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
matrix.postTranslate(tranLeftAndTop[0], tranLeftAndTop[1]);
canvas.drawBitmap(bmp, matrix, null);
getHolder().unlockCanvasAndPost(canvas); // unlock the canvas
} catch (Exception e) {
Log.e(TAG, "draw error msg:" + Log.getStackTraceString(e));
}
}
}
</pre>
- 例SurfaceViewにApngの各フレームを描画しています。例は次のとおりです。
活動コード：
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
public class MainActivity extends Activity{
private ApngSurfaceView mApngSurfaceView;
private static final String COLOR_BALL_IMAGE_PATH = "assets://color_ball.png";
//private static final String CAR_IMAGE_PATH = "assets://car.png";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mApngSurfaceView = (ApngSurfaceView)findViewById(R.id.apng_surface_view);
Button startPlay = (Button) findViewById(R.id.start_play);
startPlay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
playAnim();
}
});
}
private void playAnim(){
File file = FileUtils.processApngFile(COLOR_BALL_IMAGE_PATH, this);
if(file == null) return;
AnimParams animItem = new AnimParams();
animItem.align = 2;
animItem.imagePath = file.getAbsolutePath();
animItem.isHasBackground = true;
animItem.percent = 0.5f;
mApngSurfaceView.addApngForPlay(animItem);
}
}
</pre>
レイアウトコード：
<pre style="box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1em; line-height: inherit; font-family: couriernew, courier, monospace; vertical-align: baseline;">
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context=".MainActivity">
<com.apng.ApngSurfaceView
android:id="@+id/apng_surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
<Button
android:id="@+id/start_play"
android:text="@string/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
AssetディレクトリにApng画像を配置し、ApngSurfaceViewで再生します。
5.説明
デモの例：
この記事は簡単ではありません。この記事が気に入った場合や、参考になった場合は、皆が気に入って転送してくれることを願っています。記事は継続的に更新されます。絶対ドライグッズ！！！
