在浏览器播放安卓开机动画

最新推荐文章于 2024-08-21 20:15:01 发布

akeleton

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量268

点赞数

分类专栏： html 文章标签： html javascript

本文链接：https://blog.csdn.net/akeleton/article/details/78910051

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何在浏览器中实现安卓开机动画的播放。通过读取desc.txt文件并按照格式播放part文件夹中的PNG图片，实现了类似实际开机动画的效果。完整实现代码可在作者的GitHub上查看。

摘要由CSDN通过智能技术生成

在浏览器播放安卓开机动画

最近做了一个网页可以播放安卓的开机动画
安卓开机动画的文件结构通常如下

part0
- 0001.png
- 0002.png
part1
- 0003.png
- 0004.png
desc.txt

desc.txt的内容通常如下

    1080 1920 30
    c 1 0 part0 #607D8B -1
    c 0 0 part1 #8BC34A -1
    c 1 0 part2 #FFC107 -1

我们只要读取desc.txt并按照格式播放part文件夹中的图片就可以了。

实现后的实际效果如下：

实现效果

主要代码如下：

//import desc.txt文件
import text from './src/desc.txt';
//所有图片的挂载点#animImg
const animImg = document.getElementById('animImg')

const linesParam = text.split( '\n' )
    .filter( l => !l.startsWith( '#' ) )
    .map( l => l.split( ' ' ) );

const parts = linesParam.slice( 1 );
let part = 0;
let imgNumber = 0;

CO( play() );

/* 循环播放所有part */
function* play () {
    while ( true ) {
        yield CO( playAPart() );
        part++;
        if ( part >= parts.length ) {
            part = 0;
            imgNumber = 0;
        }
    }
}

/* 播放一个part文件夹中的所有图片 */
function* playAPart () {
    const f = Math.round(
        1000 / Number( linesParam[0][2] )
    );
    let path = parts[part][3];
    let delay = Number( parts[part][2] ) || f;
    let playTimes = Number( parts[part][1] ) || 2;
    const initImgNumber = imgNumber;
    let i = 0;

    let partPlaying = true;
    while ( partPlaying ) {
        partPlaying = yield playAFrame(
            '/Anim/src/' + path + '/' + fillToLength( imgNumber ) + '.png',
            delay
        );
        if ( partPlaying ) {
            imgNumber++;
        }
        else {
            i++;
            if ( playTimes > i ) {
                partPlaying = true;
                imgNumber = initImgNumber;
            }
        }
    }
}

/* 播放一帧图像 */
function playAFrame ( path, delay ) {
    return new Promise( resolve => {
        animImg.src = path;
        animImg.addEventListener( 'error', () => resolve( false ), { once: true } );
        animImg.addEventListener( 'load', () => setTimeout( () => {
            resolve( true )
        }, delay ), { once: true } )
    } )
}

/* 把一个number转换成'00...n'的形式 */
function fillToLength ( number, length = 4 ) {
    const s = '0'.repeat( length );
    const n = number.toString();
    if ( s.length > n.length ) {
        return s.slice( 0, s.length - n.length ) + n;
    }
}

/* 一个简单的CO */
function CO ( gen ) {
    return new Promise( ( resolve, reject ) => {
        f( gen );
        function f ( gen, result ) {
            let { value, done } = gen.next( result );
            if ( done ) {
                resolve();
            }
            else {
                value.then( v => {
                    f( gen, v )
                } ).catch( reject )
            }
        }
    } )
}