通过静态插值控制关键帧动画进度

Control keyframe animation progress via static interpolation

本文关键字：动画 关键帧 控制 静态 插值      更新时间：2023-09-26

假设您希望通过在animation-play-state设置为暂停时操作 animation-delay 属性来控制 CSS 关键帧动画的进度。

这应该：

  • 在所有浏览器中工作支持CSS 动画规范
  • 对于基本用例，每秒至少以 30 帧的速度运行

出于渲染性能和适当分离关注点的原因，您希望它不：

  • 要求脚本了解有关由受控关键帧动画插值的 CSS 属性的任何信息
  • 解析样式表以获取所述知识
  • 在隐藏元素上运行动画，并将读取的内插 CSS 属性值传输到目标元素

问题

animation-delay技术似乎不适用于以下浏览器(在提供的两个示例中都可以重现问题(

  • 野生动物园>= 8
  • iOS Safari>= 8
  • IE>= 10
  • Microsoft边缘

有没有办法在满足上述所有要求的同时为所有浏览器产生所需的行为？

技术

  • https://css-tricks.com/debugging-css-keyframe-animations/
  • https://www.youtube.com/watch?v=s4HdeJctq-A#t=26m53s

例子

  • http://codepen.io/team/css-tricks/pen/LVMMGZ/(拖动滑块(
  • http://codepen.io/marionebl/pen/wKjBgQ(向下滚动(

问题

  • Lea Verou概述的静态插值技术在Chrome和Firefox以外的浏览器中不起作用
  • 该规范没有涵盖animation-play-state的行为，并明确地将animation-delay称为IE和Safari的偏离实现。请参阅 http://www.w3.org/TR/css3-animations/#animation-delay 和 http://www.w3.org/TR/css3-animations/#animation-play-state

解决方案

为了部分满足上述要求，我实现了一个名为 jogwheel 的库，它允许对通过 CSS 关键帧动画声明的动画进行时间轴控制。要实现此慢轮，请执行以下操作：

  • 获取给定HTMLElement的计算animation-name
  • 搜索document.styleSheets以匹配CSSKeyFramesRule
  • 将找到的CSSKeyFrameRule转换为与即将推出的element.animate兼容的关键帧数组，这是提议的WebAnimations标准的一部分。
  • 提供一个 API，允许根据动画的时间轴长度控制动画

要使用慢轮，您必须

安装库：

npm install --save jogwheel web-animations-js

在你的 JavaScript 中： 

// WebAnimations polyfill required
require('web-animations');
var JogWheel = require('jogwheel');
var element = document.querySelector('[data-animated]');
var wheel = JogWheel.create(element);
// Jumps midway into animation
wheel.seek(0.5);
相关文章：