CSS或JS实现逐帧动画方案

news2024/11/18 15:43:09

什么是逐帧动画

        逐帧动画是一种在连续的关键帧中分解动画动作，即在时间轴的每一帧上绘制不同内容并使之连续播放成动画的一种常见的动画形式。与CSS关键帧动画不同的是，逐帧动画每一帧需要自行定义；关键帧动画只需定义部分关键帧，由计算机插值计算出这些关键帧之间的中间帧。

        逐帧动画的源文件要求：每一帧画面的宽高最好相等，使用精灵图时，尽量做到每一帧画面中间无空隙，否则难以定义动画绘制方式。

逐帧动画的源文件如下：

跑动的熊
单行逐帧动画
 多行逐帧动画

使用CSS绘制逐帧动画

         CSS timing-function的steps函数会在关键帧中等分插入指定数目的离散的中间帧，使动画跳跃式播放。当存在多个关键帧时，如steps(5) 0% 50% 100%，则css会在每两个关键帧中间都插入5个中间帧。

使用方法如下：

.animation-example{
  background-position: 0 0;
  animation: stepsAnimation 1s steps(23);
}
@keyframes stepsAnimation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.transition-example{
  background-position: 0 0;
  transition: background-position 1s steps(23);
}
.transition-example:hover{
  background-position: 0 100%;
}

        所有可以移动图片的属性（如：background-position、left、transform）都可以用于绘制帧动画。主要原理是 元素每次将只展示一帧，其余帧被遮挡，通过steps函数间断地移动图片，跳跃到剩余的帧。 

单行帧动画绘制方法：

        以background-position属性为例，元素宽高定义为一帧画面的宽高（或等比例伸缩），并定义背景图片为帧动画图片，定义background-size将一帧画面显示在元素中并隐藏住其余帧。定义动画属性，steps(帧数 - 1) ——减一是因为最后一帧100%已被定义，仅需插入其余帧定义即可。

.animation{
  width: 103px;
  height: 103px;
  background: url("./statics/management-icon.png") no-repeat;
  background-position: 0 0;
  background-size: 100%;
  /** 该帧动画有24帧画面，在2s內播放完成 */
  animation: stepsAnimation 2s steps(23);
}
@keyframes stepsAnimation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

多行逐帧动画绘制方法：

        仅animaiton的定义与单行的不同：在定义@keyframes时需要自行定义每一帧的位置、状态，并且timing-function为steps(1)。

        建议使用less或scss计算每一帧的定义。或使用工具（之后会在github上写一个静态网站）。

.unlock{
    width: 50px;
    height: 66px;
    background-repeat: no-repeat;
    background-image: url(/v/iphone-se/j/images/overview/privacy/privacy_animated__dbfct2heugsy_medium.png);
    background-size: 450px 264px;
    background-position: 0px 0px;
    animation: unlock_animation-medium 3s steps(1);
}
@keyframes unlock_animation-large {
  0% {
    background-position: 0px 0px
  }

  2.7777777778% {
    background-position: -66px 0px
  }

  5.5555555556% {
    background-position: -132px 0px
  }

  8.3333333333% {
    background-position: -198px 0px
  }

  11.1111111111% {
    background-position: -264px 0px
  }

  13.8888888889% {
    background-position: -330px 0px
  }

  16.6666666667% {
    background-position: 0px -88px
  }

  19.4444444444% {
    background-position: -66px -88px
  }

  22.2222222222% {
    background-position: -132px -88px
  }

  25% {
    background-position: -198px -88px
  }

  27.7777777778% {
    background-position: -264px -88px
  }

  30.5555555556% {
    background-position: -330px -88px
  }

  33.3333333333% {
    background-position: 0px -176px
  }

  36.1111111111% {
    background-position: -66px -176px
  }

  38.8888888889% {
    background-position: -132px -176px
  }

  41.6666666667% {
    background-position: -198px -176px
  }

  44.4444444444% {
    background-position: -264px -176px
  }

  47.2222222222% {
    background-position: -330px -176px
  }

  50% {
    background-position: 0px -264px
  }

  52.7777777778% {
    background-position: -66px -264px
  }

  55.5555555556% {
    background-position: -132px -264px
  }

  58.3333333333% {
    background-position: -198px -264px
  }

  61.1111111111% {
    background-position: -264px -264px
  }

  63.8888888889% {
    background-position: -330px -264px
  }

  66.6666666667% {
    background-position: 0px -352px
  }

  69.4444444444% {
    background-position: -66px -352px
  }

  72.2222222222% {
    background-position: -132px -352px
  }

  75% {
    background-position: -198px -352px
  }

  77.7777777778% {
    background-position: -264px -352px
  }

  80.5555555556% {
    background-position: -330px -352px
  }

  83.3333333333% {
    background-position: 0px -440px
  }

  86.1111111111% {
    background-position: -66px -440px
  }

  88.8888888889% {
    background-position: -132px -440px
  }

  91.6666666667% {
    background-position: -198px -440px
  }

  94.4444444444% {
    background-position: -264px -440px
  }

  97.2222222222% {
    background-position: -330px -440px
  }

  to {
    background-position: -330px -440px
  }
}

缺点（已解决） 

        使用CSS绘制逐帧动画的自定义能力不高，比较适合动画连续播放；transition与animation难以做到中断并回退，不适用于有每一帧由自己控制播放、中断、回退、跳帧这一类需求的效果。

缺点解决方案，如何控制每一帧的播放

        参考Apple官网 iPhone SE产品界面介绍的动画。

        将动画直接暂停，并将播放时长与帧数等长，使用js更改animation-delay控制每一帧的播放。animation-delay定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为 -1s，动画会从它的动画序列的第 1 秒位置处立即开始。

.animation{
    background-repeat: no-repeat;
    background-image: url(/v/iphone-se/j/images/overview/privacy/privacy_animated__dbfct2heugsy_medium.png);
    background-size: 450px 264px;
    width: 50px;
    height: 66px;
    animation: unlock_animation-medium 36s steps(1) forwards;
    /** 暂停动画，由自己控制动画播放 */
    animation-play-state: paused;
    animation-iteration-count: 1;
    /** 动画总共36帧，则duration为36s */
    animation-duration: 36s;
    background-position: 0px 0px;
}

/** 使用js更改animation-delay，控制动画播放 */
<div class='animation' style='animation-delay: -6s;'></div>

        此时CSS便仅用于动画帧的定义，动画帧的播放则通过js自定义。

使用js绘制逐帧动画 （不推荐）

        在使用CSS绘制逐帧动画前我遇到一个困难，CSS逐帧动画完全自动播放，难以控制中断或中断后回退等功能（已解决），所以我封装了一个js库用于绘制逐帧动画。
https://github.com/YThinker/frame-animationhttps://github.com/YThinker/frame-animation/tree/master        包含：SinglelineFrameAnimation 用于绘制单行逐帧动画；MultilineFrameAnimation 多行逐帧动画绘制。可选择使用transform，background，image src等属性绘制，包括了无限循环、往复播放、延迟播放等功能。

        example页面开发中。。

使用img src配合js绘制逐帧动画（不推荐）

        原理非常简单，将每一帧图片导出为单独的图片，通过替换img src的方式播放每一帧画面，该方法非常简单，但是用户体验差，会导致请求次数过多，可以通过预加载的方式优化。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/183949.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《机会成本》的阅读札记

《机会成本》的阅读札记

【引子】第一次接触机会成本&#xff0c;大约还是十几年前自己在读MBA的时候&#xff0c;在徐华老师《管理经济学》的课上听到过一耳朵&#xff0c;但没有太多的认知。这个春节&#xff0c;阅读了《机会成本——做出高效决策的策略思维》才有了些许进一步的认识&#xff0c;那么…
阅读更多...
从0到1介绍一下开源大数据服务平台dataService

从0到1介绍一下开源大数据服务平台dataService

1.背景&现状 在大数据领域也已经工作了多年&#xff0c;无论所待过的大公司还是小公司&#xff0c;统计出来的数据经常需要查询展示&#xff0c;比如说&#xff1a;用做大屏或者报表或者给一些线上服务提供数据源&#xff0c;经常会要用代码写一套接口服务&#xff0c;需要…
阅读更多...
Python中的os模块

Python中的os模块

整理文件和目录最最最常用的os模块os模块是Python标准库中整理文件和目录最为常用的模块&#xff0c;该模块提供了非常丰富的方法用来处理文件和目录。os.getcwd()作用&#xff1a;获取当前的工作路径&#xff1b;>>> os.getcwd() D:\\ResearchWay\\Code\\PythonCode\…
阅读更多...
2023年浏览器哪个好，如何选择浏览器？

2023年浏览器哪个好，如何选择浏览器？

浏览器作为电脑必备的软件之一&#xff0c;相信绝大多数人都用过。选择一款好用的浏览器&#xff0c;可以帮助我们提升工作效率。那么&#xff0c;浏览器哪个比较好&#xff0c;我们如何选择合适的浏览器&#xff1f;为了找到集速度、易用性、安全于一身的浏览器&#xff0c;我…
阅读更多...
第四十七章 动态规划——状态压缩模型

第四十七章 动态规划——状态压缩模型

第四十七章 动态规划——状态压缩模型一、什么是状态压缩二、例题讲解1、AcWing 1064. 小国王&#xff08;1&#xff09;问题&#xff08;2&#xff09;思路&#xff08;3&#xff09;代码2、AcWing 327. 玉米田&#xff08;1&#xff09;问题&#xff08;2&#xff09;思路&am…
阅读更多...
晴天科技冲刺上市：实控人丁一波系本科肄业，粤民投为其股东

晴天科技冲刺上市：实控人丁一波系本科肄业，粤民投为其股东

近日&#xff0c;浙江晴天太阳能科技股份有限公司&#xff08;下称“晴天科技”&#xff09;预披露更新招股书&#xff0c;准备在深圳证券交易所主板上市。据贝多财经了解&#xff0c;晴天科技曾于2022年7月1日递交招股书&#xff0c;此次更新了截至2022年6月30日的财务数据等信…
阅读更多...
AcWing 1072. 树的最长路径（DFS）

AcWing 1072. 树的最长路径（DFS）

[TOC](AcWing 1072. 树的最长路径&#xff08;树形DP)) 一、题目&#xff1a; 二、思路&#xff1a; 为了方便&#xff0c;我们利用下面这个图做讲解&#xff1a; 这颗树的最长路径必定经过的是图中的点&#xff0c;因此&#xff0c;**我们可以去枚举经过图中每个点的最长路…
阅读更多...
微星武士gf66电脑系统中途安装失败怎么办？

微星武士gf66电脑系统中途安装失败怎么办？

微星武士gf66电脑系统中途安装失败怎么办&#xff1f;有用户购买的微星武士gf66电脑想要进行电脑系统的重新安装&#xff0c;但是在新系统的安装过程中出现了错误&#xff0c;导致系统无法启动了。这个情况可以使用U盘来重装一个系统&#xff0c;恢复电脑的正常使用&#xff0c…
阅读更多...
将springboot项目部署到linux上运行的步骤

将springboot项目部署到linux上运行的步骤

前言&#xff1a; 博主看了许多的博客&#xff0c;总结出了最有用的部分&#xff0c;将springboot项目完整的运行在了linux虚拟机上。而不是仅仅只在网页打印一句话&#xff0c;就当做运行成功。运行成功页面如下&#xff1a; 运行成果展示&#xff1a; 接下来废话不多说&…
阅读更多...
Python 读取大文件

Python 读取大文件

读取大文件 python读取文件一般情况是利用open()函数以及read()函数来完成&#xff1a; f open(filename,r) f.read() 这种方法读取小文件&#xff0c;即读取大小远远小于内存的文件显然没有什么问题。但是如果是将一个10G大小的日志文件读取&#xff0c;即文件大小大于内存…
阅读更多...
“深度学习”学习日记。与学习有关的技巧--正则化

“深度学习”学习日记。与学习有关的技巧--正则化

2023.1.29 在机器学习的过程中&#xff0c;过拟合是一个常见的问题。过拟合指的是只能够拟合训练数据&#xff0c;但不能很好的拟合测试数据&#xff1b;机器学习的目的就是提高泛化能力&#xff0c;即便是没有包括在训练数据里的测试数据&#xff0c;也希望神经网络模型可以正…
阅读更多...
javafx中gif 内存优化

javafx中gif 内存优化

1.背景 桌面程序对内存消耗要求很高&#xff0c;基本的要求是整个程序控制在500M以内。 这就要求每个功能点的内存消耗尽可能地少&#xff0c;大于50M的内存消耗就要想办法优化。 2.现状 gif的显示会导致程序的内存激增。以数字大脑用的雷达图动画为例进行说明&#xff0c;下…
阅读更多...
TypeScript 学习笔记总结(一)

TypeScript 学习笔记总结(一)

ts学习笔记总结。 文章目录一、什么是TypeScript&#xff1f;二、TypeScript 环境搭建三、TS 类型声明四、TS 类型详解五、TS 类型总结六、TS 编译选项1. tsconfig.json的 作用2. tsconfig.json的 配置选项013. tsconfig.json的 配置选项02七、Webpack 打包ts代码一、什么是Typ…
阅读更多...
Bayanay：一款基于Python开发的无线网络安全研究工具

Bayanay：一款基于Python开发的无线网络安全研究工具

关于Bayanay Bayanay是一款基于纯Python开发的无线网络安全研究工具&#xff0c;在该工具的帮助下&#xff0c;无论你身处何地&#xff0c;都可以轻松地对周围地区的无线网络安全状况进行研究与分析。 该工具可以通过使用HTML5的地理位置定位功能并结合Scapy获取到的SSID信息…
阅读更多...
LeetCode刷题系列 -- 25. K 个一组翻转链表

LeetCode刷题系列 -- 25. K 个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的改变节点内部的值&…
阅读更多...
zabbix6,0创建监控项与触发器

zabbix6,0创建监控项与触发器

zabbix_server IP : 172.31.0.5:10051 zabbix_client IP : 172.31.0.9:10050 zabbix_client已经运行了zabbix-agent,这里我用的是版本2 一、 创建监控项 1、 在客户端创建监控脚本 /etc/zabbix/zabbix_agent2.d #默认配置文件路径 2、 创建配置文件&#xff0c;编写监控脚本…
阅读更多...
绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备

绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备

绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备今天小编分享制备GOQDs改性SA复合杂化膜&#xff0c;一起看看吧&#xff1a;GOQDs改性SA复合杂化膜的制备过程&#xff1a;将一系列不同分子量的CS及接枝壳聚糖用少量乙酸-乙酸钠溶液溶解后,加水稀释到一定浓度,用…
阅读更多...
经典文献阅读之--FlowFormer(Transformer结构光流估计)

经典文献阅读之--FlowFormer(Transformer结构光流估计)

0. 简介 对于视觉SLAM而言&#xff0c;除了使用特征点法来完成VIO以外&#xff0c;还可以使用光流法来完成VIO的估计。而传统的光流法受环境&#xff0c;光照变化严重&#xff0c;所以有时候会出现光流偏差等问题。所以现在有越来越多的工作朝着深度学习的方向扩展&#xff0c…
阅读更多...
卷积神经网络中的Conv层和BN层融合细节

卷积神经网络中的Conv层和BN层融合细节

BN层 批归一化层&#xff08;Batch Normallization&#xff09;是一种在卷积神经网络模型中大量使用&#xff0c;为了加速模型收敛的技术。为什么CNN 中引入 BN 层可以加速网络的收敛呢&#xff1f;因为将输入的样本数据或特征图&#xff0c;归一化后&#xff0c;改善了输入数…
阅读更多...
智云通CRM：如何在初次见面识别客户机会？

智云通CRM：如何在初次见面识别客户机会？

有一次&#xff0c;我给一家公司做CRM系统培训之后&#xff0c;他们公司的老总请我吃饭。那是我们第一次见面&#xff0c;在饭桌上&#xff0c;我和他聊天&#xff0c;说&#xff1a;“洛老师&#xff0c;你们的CRM系统功能真的很不错&#xff0c;帮我我解决了很多销售管理上的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023