APNG在线制作、兼容、播放和暂停

鑫空间 2021-09-15 04:23:16
兼容 在线 制作 播放 apng


APNG占位图

CSS动画 + background-position 定位也能实现PNG图片序列帧的动画播放效果,但是,这种技术实现不太适合变成一次性的解决方案,也就是,如果设计师下次提供另外尺寸和大小的图片序列,之前的代码就不能复用了。

此时,APNG动图会是更好的选择,大小、播放时机等都是可以自如控制,图像资源本身的速率、尺寸交给设计师控制,使得一套代码应付所有的动图场景成为了可能。

关于APNG图片的基本知识可以参考多年前我写的这篇文章“APNG历史、特性简介”,这里再介绍一些在实际开发中可能需要用到的知识与实现。

一、APNG在线制作

日常开发,APNG多是偶然使用使用,下载个软件再去进行APNG制作,就显得比较麻烦了。

因此,我上周花了2个晚上时间做了个免费在线合成APNG动图的在线工具,导入图片序列就可以在线生成,支持设置每一帧的时间间隔和播放次数。

你可以狠狠地点击这里:APNG免费在线合成下载工具

支持拖拽改变图片系列顺序,使用截图画面如下所示:

apng制作工具截图示意

注意,由于目前常规的图像预览软件没有增加对APNG的支持,因此,打开后并不会动,显示的是APNG图片的第一帧,此时需要拖到浏览器中进行预览,Chrome或者Firefox浏览器都是可以的。

二、IE兼容APNG

APNG IE浏览器是不支持的,具体见下面的兼容性表:

APNG兼容性

如果浏览器不支持APNG,会以普通的PNG图片显示,因此,并不会影响功能的实现。

但是,如果遇到挑剔的产品经理,或者遇到挑剔的设计师,非要让你让IE/Edge浏览器也是动画播放,则可以试试 apng-canvas 这个项目:https://github.com/davidmz/apng-canvas

使用非常简单,假设页面中有个 <img> 元素:







<img id="chip" src="./chip.png">

是需要引入对应的 JS 文件,然后执行执行下面的代码就可以让其在IE浏览器下播放:







<script src="./apng-canvas.min.js"></script>
<script>
APNG.ifNeeded().then(function() {
APNG.animateImage(chip);
});
</script>

眼见为实,您可以狠狠地点击这里:APNG动图在IE浏览器播放demo

在IE11下的效果截图就是这样的:

IE11下的效果截图

如果浏览器本身支持APNG,则上面的代码并不会执行,因为 APNG.ifNeeded() 方法判断了是否需要使用 canvas 播放APNG。

但是,有时候,就算浏览器支持 APNG,我们也希望使用 canvas 播放,例如 Safari 浏览器下,如果APNG 制作的时候设置了播放 1 次,可能会播放 2 次,此时,要想在所有浏览器下保持一致,也需要使用canvas模拟播放效果。

此时,直接使用下面的代码即可:







APNG.animateImage(chip);

对了,apng-canvas是IE10以上浏览器才支持,IE9并不支持。

三、APNG的播放与暂停

使用 APNG 模拟某些动效的时候,可能需要手动设置暂停与播放,这个也是可以实现的,使用apng-js这个项目:https://github.com/davidmz/apng-js

和 apng-canvas 是同一个作者。

demo演示

此项目在 ReadMe 中的示例不太友好,对于新人而言,可能不知道说的什么意思,可能这个原因,所以 Star 数不是很高吧。

我研究了下,apng-js 也是支持直接在 Web 页面中直连使用的,然后我就做了个demo,您可以狠狠地点击这里:APNG动图播放与暂停控制demo

点击按钮可以播放与暂停 APNG,还可以控制播放的速率。

APNG 暂停示意

如何使用?

播放与暂停功能的实现要比兼容IE麻烦些。

下面代码是官方的示意:







import parseAPNG from 'apng-js';
const apng = parseAPNG(buffer);

这里例子演示的是在工程开发环境中的使用,如果直接在浏览器中使用,则需要这么处理:

  1. 引入对应的 JS 文件,例如:
    
    
    
    
    
    
    <script src="./apng-js/index.js"></script>

    此JS项目资源中没有,需要执行npm install apng-js找到此文件。

  2. 执行下面的代码,此时 apng 就是关键执行对象。
    
    
    
    
    
    
    var parseAPNG = window["apng-js"].default;
    const apng = parseAPNG(buffer);

apng其实是个类,包括下面这些属性和方法:







class APNG {
width: number
height: number
numPlays: number // 循环次数,0表示无限循环
playTime: number // 一次执行的总毫秒数
frames: Frame[] // 每帧的数据
// 方法
createImages(): Promise // 为所有帧创建图像元素
getPlayer(context: CanvasRenderingContext2D, autoPlay: boolean = false): Promise.<Player>
// 创建播放器
}

在控制播放与暂停这个需求上,我们需要的是 getPlayer() 方法。

我们创建一个 canvas 元素,其上下文作为参数传递给 getPlayer() 方法,此时就获得了一个播放控制器,调用控制器上的play()pause()方法,就可以控制APNG的播放与暂停了,例如,我做的这个demo页面的实现就是这样的:







var parseAPNG = window["apng-js"].default;
// 播放器
var player = null;
// 播放速率
var playbackRate = 1;
// 获取图片资源
fetch(chip.src).then(function(response) {
response.arrayBuffer().then(function(buffer) {
var apng = parseAPNG(buffer);
// img 替换成 canvas
var canvas = document.createElement('canvas');
canvas.width = apng.width;
canvas.height = apng.height;
chip.after(canvas);
chip.remove();
// 执行播放
apng.getPlayer(canvas.getContext('2d')).then(function (p) {
player = p;
player.playbackRate = playbackRate;
// 开始播放
player.play();
});
});
});

其中的 player 就可以控制播放与暂停,暴露的属性和方法如下所示。







class Player {
context: CanvasRenderingContext2D
playbackRate: number = 1.0
currFrameNumber: number
currFrame: Frame
paused: boolean
ended: boolean
// 方法
play()
pause()
stop()
renderNextFrame()
}

因此,暂停动画只需要设置 player.pause(),设置播放速率使用 player.playbackRate,更完整的代码大家可以访问demo页面

其他

apng-js还有很多其他的能力,包括执行事件的回调,例如,我们可以设置 APNG 只播放一次,apng-js只有能力知道什么时候动画播放结束的,此时,我们就可以做其他一些事情。

每一帧的播放同样有对应的事件接口,可以让我们对每一帧进行处理。

等。

本文就不展开了,大家有兴趣,可以自行研究一番。

四、结束碎碎念

上一篇文章到现在接近20天,快要破了我无更新日期记录了,在干嘛呢,忙着写小说。

小说截图

每天更新一章,4月份写到现在,已经快50万字了。

说实话,已经影响一些更重要的事情了,例如新书的宣传啊,文章的更新啊,网站的建设啊,但是,要是不做,心里难受,所以,继续坚持吧。

小说进度大约60%的样子,所以,完结大概还需要4个月,明年春节结束,没有签约,版权还在自己手上。

希望明年再回过头看,会是一段不错的路程。

扯远了,感谢大家的阅读,如果您觉得内容还不错,欢迎分享到朋友圈,或者转发到微博。

(本篇完)

版权声明
本文为[鑫空间]所创,转载请带上原文链接,感谢
https://www.zhangxinxu.com/wordpress/2021/09/apng-maker-pause-play-ie/

  1. Front and back end data interaction (V) -- what is Axios?
  2. Windows configures nginx to boot automatically
  3. Des questions d'entrevue communes à Tomcat pour discuter de votre compréhension de la technologie de verrouillage distribué,
  4. JS handscrap, Classic interview question, web front end Development Process
  5. Android 400 questions d'entrevue pour vous aider à entrer dans l'usine, un tour pour vous apprendre à comprendre netty
  6. Développement et projet d'application Web statique côté PC
  7. Recommandé pour le tutoriel Spring Framework, 2021 dernière question d'entrevue d'embauche de la société aiqiyi Java,
  8. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  9. [partage d'expérience de travail], 2021 les dernières questions d'entrevue Java de Baidu, Headlines, etc.
  10. Lisez l'analyse de 497 questions pour l'entrevue d'ingénieur principal Android et vérifiez les lacunes.
  11. Grâce à cette collection de questions d'entrevue d'automne, le salaire de saut d'emploi et l'entrevue de développement audio et vidéo ont doublé.
  12. Prenez d'un coup l'offre de Tencent meituan et jetez un coup d'oeil à cette copie de l'entrevue de printemps!
  13. L'expérience et l'expérience d'un Maverick Java en matière d'entrevue sur les MTD, l'expérience de l'entrevue d'embauche du printemps Java en 2021,
  14. Vue中自定义列表复选框和全选框-案例
  15. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  16. CSS text overflow ellipsis summary, as you wish
  17. C'est la mode la plus étrange que j'ai jamais vue.
  18. Cases à cocher et toutes les cases à cocher de la liste personnalisée en vue - CAS
  19. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  20. Vue3.0 using Gaode map to obtain longitude and latitude information
  21. Front end interview daily 3 + 1 - day 877
  22. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  23. React realizes the function of copying pictures with one click
  24. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  25. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  26. Résumé de l'entrevue Android de Dachang, carte technique Android
  27. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  28. Le résumé de l'entrevue Android de Dachang est en retard
  29. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  30. Jquery Tools Methodology collation, Sharing a little interview Experience
  31. Jquery plug - in urianchor, app front end Development
  32. $in jquery, Visualized Web Development Tool
  33. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  34. vue v-if未生效问题
  35. vue动态改变组件外部元素样式
  36. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  37. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. A Simple Css Meun
  40. Vue modifier dynamiquement le style de l'élément externe du composant
  41. Vue V - si problème non valable
  42. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  43. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  44. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  45. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  46. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  47. vue動態改變組件外部元素樣式
  48. vue v-if未生效問題
  49. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  50. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  51. What if you want to see the moon and don't want to go out
  52. Mid Autumn Festival, Chang'e looks at the moon
  53. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  54. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  55. Dart mixin full resolution
  56. Some suggestions on Vue code readability | comments are rewarded
  57. 120 lines of code to achieve pure web video editing
  58. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  59. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  60. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】