如何使用js捕获css3动画

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用js捕获css3动画相关的知识,希望对你有一定的参考价值。

参考技术A CSS Animation Store
这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.js和CSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照Chris所建议的接口风格写下来

从GitHub下载CSS Animation Store

下面是CSS Animation Store的基本接口(关于代码如何工作的信息),将代码放在标签之前,会创建一个全局的对象 CSSAnimations,这个对象包含所有当前可以使用的CSS动画

比如,获取名称为”spin”的动画,你可以按下面的代码:

var spin = CSSAnimations.spin;
参数spin是一个KeyframeAnimation实例,有下面的属性和函数:

keyframes – KeyframeRule 集合
original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, background: ‘red’, ‘font-size': ‘2em’)
可以看出,KeyframeRule提供了一些方法和函数,是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule (注意是frame不是frames)的封装,具有下面的属性和方法

css – 该keyframe的css内容, e.g. background: ‘red’, ‘font-size': ‘2em’
keyText – 该帧的名称, e.g. 10%
original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule
示例
获取动画中的所有帧

var spin = CSSAnimations.spin;

for(var i=0; i<spin.keyframes.length; i++)
console.log(spin.keyframes[i].css);
修改动画中的某一帧

var spin = CSSAnimations.spin;
spin.setKeyframe('10%', background: 'red', 'font-size': '2em');
反馈
给我博客或者GitHub留言,让我知道你的想法,我还开放了修改和增加的权限

使用原生javascript访问和创建CSS动画
如果你不想使用CSS Animation Store,或者只是想知道它的实现原理,可以参看下面的介绍

访问CSS动画

可以通过CSSOM访问keyframe动画,下面是我CSSA中的代码,用于访问指定的CSS动画

Fabric.js - 保存动画快照

【中文标题】Fabric.js - 保存动画快照【英文标题】:Fabric.js - Saving snapshots of animation 【发布时间】:2020-04-23 02:22:22 【问题描述】:

我正在使用 fabric.js 来创建一些动画。

现在我想创建一个动画的 gif,所以想要一个 20 fps 的“画布捕获”。即每秒20个png。然后我可以使用 convert 将 png 转换为 gif。

我正在使用 node.js 在服务器上运行动画。

问题:如何在动画运行时保存 png?它不必实时写入或处理,因为它只在服务器端运行。

【问题讨论】:

【参考方案1】:

你可以拥有这样的。

var blob_array = new FormData(), png_index = 0;

function canv2blob(canv) 
  return new Promise(function(resolve, reject) 
    canv.getElement().toBlob(function(blob) 
      resolve(blob);
    ,'image/png',0.8); //0.8 is quality. keep it as you like
  );


function process_blob(canv)
 canv2blob(canv).then(function(blob)
     blob_array.append(png_index,blob);
 );

然后在每个织物动画的onChange 事件中,调用该函数来创建一个包含可以发布到服务器的png blob 的FormData 对象。

onChange: function() 
          canvas.renderAll.bind(canvas);
          process_blob(canvas);
          png_index++;
      ,    

【讨论】:

以上是关于如何使用js捕获css3动画的主要内容,如果未能解决你的问题,请参考以下文章

如何使用CSS3来创建一个3D的动画效果?

如何停止CSS3的动画

如何使用JS停止CSS3里面的animation

如何用JavaScript捕获CSS3的动画事件

CSS如何实现动画?

JS如何监听动画结束