当前位置：首页 > 编程日记 > 正文

如何选取合适的前端动效方案？

编程日记 2024-10-11 15:40:00

一、原因

前端动画场景需求多
对众多动画场景的技术实现方案选择上比较模糊
- 各动画方案的优劣及适用场景认识模糊
现有动画库太多，不知道选哪个
- 主流动画库的适用场景认识模糊

二、分类

动画用途

展示型的动画，类似于一张GIF图，或者一段视频
交互型的动画：用户自已参与的

绘制技术

Canvas
div
SVG

PS:为了简单也可以用视频，但除非动画的播放场景固定，不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样，容易踩不少坑。

动画类型

Tween动画
序列帧动画
骨骼动画
SVG动画
3D动画

维度

三、绘制技术的差异

不管采用什么方式来制作动画，最终呈现到前端页面的无非三种形式：canvas、div、SVG。

特点比较

canvas
- 效率高、性能好、可控性高，只能处理位图，内存占用恒定
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 处理矢量图，不失真
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
div
- 包括CSS控制的DOM动画、JS控制的DOM动画
- 比较适合简单的数量较少的复杂度较低的动画

性能差异

一般情况下：JS+Canvas > CSS + DOM > JS + DOM

示例代码（直观效果）

canvas和svg比较：
- 一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
- 随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
- 这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。

四、动画实现方式

前端动效开发，首先应该确定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。

虽然最终呈现动画的载体（绘制技术）就三种，但实现动画的方式却很多，得从动画类型出发讨论动画的实现方式：

Tween。补间动画，涉及到一些缓动函数（如：常用的缓动函数）
1. CSS实现（transition、animation等）
2. Js实现
序列帧动画
1. CSS实现（animation）
2. JS+DOM实现
3. JS+canvas实现
骨骼动画
1. 一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。
SVG动画
1. 使用 XML 格式定义图形
2. 可以用AI等SVG编辑工具生成SVG图片后，配合anime.js等现有库进行动画制作
3D动画
1. DOM操作用CSS 3D实现。（perspective属性等）
2. 场景搭建用webGL(Three.js等)
3. 3D模型动画用Blender或maya等制作完成后导出使用

上面列出的动画类型对应的实现策略，从开发角度来讲，可以：

自己实现
选择现有轮子：
- 动画库
- 游戏引擎、渲染引擎

自己实现

为了减少外部依赖，简单的不复杂的动画一般选择自己实现。可参考下面的实现方式选择思路：

动画库

这边尽可能的收集了网上的动画库，并对其信息进行了简单介绍，篇幅问题，另起一篇文章：可能是最全的前端动效库汇总

游戏引擎/渲染引擎

动画从维度上分，3D动画一般采用诸如Three.js的渲染引擎或者游戏引擎来实现。2D动画在某些场景也会采用引擎。

常见游戏引擎
1. Cocos
2. Egret
3. LayaAir
4. Phaser
常见渲染引擎
1. Pixi.js(2D动画渲染引擎)
2. Three.js(3D渲染引擎)
3. Babylon.js(3D渲染引擎)

现在都有些什么游戏框架可以看这里：游戏/渲染框架导航

五、主流动画解决方案

Tween动画
- 比较简单，一般自己实现。
- Tween.js（提供了一些常见的缓动函数）
- Animate.css(一个跨浏览器的动效基础库，是许多基础动效的解决方案。)
序列帧动画
- 自己实现（CSS、JS+canvs、JS+DOM）
- SVGA
- Lottie（AE制作完动画后通过Bodymovin导出使用）
- apng配合控制库(如：apng-js)
骨骼动画
- Spine
- DragonBones
SVG动画
- snap.svg
- GSAP
- anime.js
3D动画
- DOM操作的话自己用CSS 3D实现
- Three.js
常用动画库(适用、强大)
- Animate.css
- GSAP
- anime.js
- snap.svg
常用渲染引擎：
- Pixi.js

六、主流产品动画方案

网易哒哒工作室H5：序列帧动画->cavans实现
各种“一镜到底”类H5:序列帧动画->canvas实现

参考文档

W3school--HTML 5 Canvas vs. SVG
前端动画技术的研究和比较
阿里巴巴前端专家金擘(渚薰) - 渐进式动画解决方案
canvas和svg性能方面选择

https://www.dkcj.cn/info/22591.html

【C++】algorithm具体操作记录

find寻找特定元素位置 int main(char argc, int* argv[]) {vector<int> intVec { 0,1,1,1,1,2,3,4,5,6,7,8,9 };if (pos ! intVec.end())cout << "The value 5 exists,and its position is " <<distance(intVec.begin(), pos) 1 << endl;…

编程日记2024/10/11 15:30:00

图像 DFT 尺寸转换

const int nRows srcImage.rows; const int nCols srcImage.cols; std::cout << "srcImage row:" << nRows << std::endl; std::cout << "srcImage col:" << nCols << std::endl; // 获取DFT尺寸 int cRo…

编程日记2024/10/11 15:20:00

[python]目录及文件操作

Python OS模块和shutil模块获取路径# 获取当前路径 pwd os.getcwd()# 获取上级路径 a_pwd os.path.abspath(os.path.dirname(os.getcwd())) a_pwd os.path.abspath(os.path.join(os.getcwd(), ..))# 获取上上级路径 aa_pwd os.path.abspath(os.path.join(os.getcwd(), ../…

编程日记2024/10/11 15:10:00

【C++】关联容器学习记录

STL六大组件关系 Containe通过Allocator取得数据存储空间，Algorithm通过Iterator存取Container，Functor内容可以协助Algorithm完成不同的策略变化，Adaptor可以修饰或者套接Functor。关联容器特性 1. 关联容器定义顺序容器支持高效的关键…

编程日记2024/10/11 15:00:00

图像 DFT 变换

// 通道组建立，cv::Mat groupMats[] {cv::Mat_<float>(sizeConvMat),cv::Mat::zeros(sizeConvMat.size(), CV_32F)};cv::Mat mergeMat;// 通道合并merge(groupMats,2,mergeMat);// DFT变换dft(mergeMat, mergeMat);// 分离通道split(mergeMat, groupMats);/…

编程日记2024/10/11 14:50:00

MySQL innodb_autoinc_lock_mode 详解

innodb_autoinc_lock_mode这个参数控制着在向有auto_increment 列的表插入数据时，相关锁的行为； 通过对它的设置可以达到性能与安全(主从的数据一致性)的平衡【0】我们先对insert做一下分类首先insert大致上可以分成三类： 　　　　1、simpl…

编程日记2024/10/11 14:40:00

小程序代理加盟实现月入1800到50K

他出身寒门，没钱没资源，搬过砖利用身边的健身达人赚过钱，毕业了院长看他很努力还安排过维修多媒体的工作，拒绝院长好意的他，月收入从1800到1万，再到赚到人生首个5万。只用了一年，他到底是凭什么…

编程日记2024/10/11 14:30:00

CCF201503-4 网络延时（100分）

试题编号： 201503-4 试题名称： 网络延时时间限制： 1.0s 内存限制： 256.0MB 问题描述： 问题描述给定一个公司的网络，由n台交换机和m台终端电脑组成，交换机与交换机、交换机与电脑之间使用网络连…

编程日记2024/10/11 14:20:00

【Smart_Point】动态内存与智能指针

动态内存动态内存使用的三种原因程序不知道自己需要多少对象程序不知道所需对象的准确类型程序需要在多个对线之间共享数据文章目录动态内存动态内存使用的三种原因实例1： Exercise 12.2:Write your own version of the StrBlob class including the const ver…

编程日记2024/10/11 14:10:00

JS中的null和undefined,undefined为啥用void 0代替?

起因某天,在看某位同学的js代码,代码中发现了一个奇怪的东西 void 0,虽然第一眼看不懂这是什么东西,但是根据上下文,这里应该是想判断是否等于undefined,为什么要这样写的,有什么渊源吗?顺便就把undefined和null都拿出来复习了一下. 介绍 undefined和null是js中类型七种数据类…

编程日记2024/10/11 14:00:00

【Smart_Point】动态内存与智能指针实战：文本查询程序（设计set,map，智能指针的应用）

文章目录Cpp读入结构性数组文本查询程序文本查询程序本版1Cpp读入结构性数组 #include<sstream> #include<iostream> #include<string>std::vector<cv::Point2f> point_calibartion_position;std::string filename "C:/Users/Administrator/Des…

编程日记2024/10/11 13:50:00

我眼中的DevOps(转)

过去一年以来，一批来自欧美的、不墨守陈规的系统管理员和开发人员一直在谈论一个新概念：DevOps。DevOps 就是开发（Development）和运维（Operations）这两个领域的合并。（如果没错的话，…

编程日记2024/10/11 13:40:00

【阿圆实验】Consul HA 高可用方案

一、建立Consul Cluster环境利用Consul提供的服务实现服务的注册与发现，需要建立Consul Cluster。在Consul方案中，每个提供服务的节点上都要部署和运行Consul的agent，所有运行Consul agent节点的集合构成Consul Cluster。Consul agent有两种…

编程日记2024/10/11 13:30:00

【C++】拷贝，赋值与构造

拷贝，赋值与构造文章目录拷贝，赋值与构造1. 拷贝构造函数/合成拷贝构造函数（copy constructor）2. 拷贝赋值运算符3. 析构函数1. 拷贝构造函数/合成拷贝构造函数（copy constructor） 1.1 定义：复…

编程日记2024/10/11 13:20:00

Java 内存查看与分析

2019独角兽企业重金招聘Python工程师标准>>> 1：gc日志输出在jvm启动参数中加入 -XX:PrintGC -XX:PrintGCDetails -XX:PrintGCTimestamps -XX:PrintGCApplicationStopedTime，jvm将会按照这些参数顺序输出gc概要信息，详细信息&…

编程日记2024/10/11 13:10:00

玩转Vuejs--核心原理

一、摘要： Vuejs是一款前端MVVM框架，利用Vuejs、webpack以及周边一系列生态工具我们可以快速的构建起一个前端应用，网上对于Vue的分析大都是基于各个模块，理解起来不够顺畅，本文将从整个执行过程出发，讲一下…

编程日记2024/10/11 13:00:00

【C++】拷贝控制与资源管理

1. 拷贝控制与资源管理管理类外资源的类必须定义拷贝控制成员。如P447中所见，这种类需要通过析构函数来释放对象所分配的资源。一旦一个类需要析构函数，那么几乎可确定它也需要一个拷贝构造函数和一个拷贝赋值函数。明确拷贝语义：可以定义…

编程日记2024/10/11 12:50:00

leangoo V5.4.2版上线

本次更新增加了“卡片编辑面板内显示成员、截止日期、工作量”的功能。同时我们也进行了大量的功能优化，以下是此次更新详情： 1. 新增“卡片编辑面板内显示成员、截止日期、工作量”功能本次更新后 ，您在卡片编辑面板内添加成员，…

编程日记2024/10/11 12:40:00

差分边缘检测实现

#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/opencv.hpp> using namespace cv; // 图像差分操作 void diffOperation(const cv::Mat srcImage, cv::Mat& edgeXImage,cv::Mat& edgeYImage) {cv::Mat…

编程日记2024/10/11 12:30:00

2.1：CGPROGRAM

文章著作权归作者所有。转载请联系作者，并在文中注明出处，给出原文链接。本系列原更新于作者的github博客，这里给出链接。前言经过前面两个章节的铺垫，我们对渲染以及Unity Shaderlab相关的知识已经有了大概的认识，…

编程日记2024/10/11 12:20:00

【OpenCV】OpenCV中积分图函数与应用

OpenCV中积分图函数与应用参考资料 opencv 查找integral，目前网上大部分的资料来自于opencv https://docs.opencv.org/master/d7/d1b/group__imgproc__misc.html#gadeaf38d7701d7ad371278d663c50c77dhttps://blog.csdn.net/jia20003/article/details/52710751ht…

编程日记2024/10/11 12:10:00

django学习笔记【003】创建第一个带有model的app

【1】python应用程序要连接mysql有多个驱动程序可供选择： 1、MySQLdb 这个只支持python2.x 所以在这里就不说了； 2、mysqlclient 下载地址　　 https://pypi.python.org/pypi/mysqlclient/1.3.9 3、MySQL Connector/python 这个是mysql官方主推的mysql驱…

编程日记2024/10/11 12:00:01

图像非极大值抑制 Sobel 边缘实现

bool SobelVerEdge(cv::Mat srcImage, cv::Mat& resultImage) {CV_Assert(srcImage.channels() 1);srcImage.convertTo(srcImage, CV_32FC1);// 水平方向的 Sobel 算子cv::Mat sobelx (cv::Mat_<float>(3,3) << -0.125, 0, 0.125,-0.25, 0, 0.25,-0.125, 0, …

编程日记2024/10/11 11:50:00

第四次作业（日期和jieba库的运用）

设计题1： 设计一个本月份日历，输出格式如下： 要求： 1.初始化start_day，end_day两个日期 from datetime import datetime start_daydatetime(2019,4,1) end_daydatetime(2019,4,30) 其它时间数据生成要用datetime或date…

编程日记2024/10/11 11:40:00

【C++】LINK类型错误分析记录

LINK类型错误情况1： 根据生成路径，查找是否成功生成静态库/动态库，一般在./bin文件中。情况2： 是否在CMakeLists中target_link_libraries中添加链接静态库操作情况3： 是都存在类模板，需要实例化&a…

编程日记2024/10/11 11:30:00

eBay宣布发布全新的购买和销售APIs

eBay最近宣布发布两款全新的购买和销售APIs。这些APIs旨在促进eBay产品在第三方应用程序中的更好集成。eBay于10月19日在他们的博客上发表了几篇文章，不仅详细介绍了这些全新的购买和销售APIs提供的功能，而且还详细地总结了他们公司从SOAP（简…

编程日记2024/10/11 11:20:00

Sobel 边缘实现

#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include "opencv2/imgproc/imgproc.hpp" #include <iostream> using namespace cv; // 非极大值抑制实现sobel竖直细化边缘 bool SobelVerEdge(cv::Mat srcImage, cv::…

编程日记2024/10/11 11:10:00

vue下实现textarea类似密码框的功能之探索input输入框keyup，keydown，input事件的触发顺序...

项目中引入element的input框组件，触发事件必须要加上.native <el-input placeholder"请输入" type"textarea" v-model"valueText" keyup.native"keyUp(valueText,$event)" keydown.native"keyDown($event)" …

编程日记2024/10/11 11:00:00

【C++】动态内存管理/move/以及移动构造与移动赋值运算符

文章目录1 .对象移动与右值引用实际应用过程中遇到的问题及其解决方案c中临时变量不能作为非const的引用参数2. 动态内存管理类3. 对象移动与右值引用4. 移动构造与移动复制运算符1 .对象移动与右值引用实际应用过程中遇到的问题及其解决方案问题描述： bool Cr…

编程日记2024/10/11 10:50:00

图像直接卷积 Sobel 边缘实现

bool sobelEdge(const cv::Mat& srcImage, cv::Mat& resultImage,uchar threshold) {CV_Assert(srcImage.channels() 1);// 初始化水平核因子Mat sobelx (Mat_<double>(3, 3) << 1, 0,-1, 2, 0, -2, 1, 0, -1);// 初始化垂直核因子Mat sobely (Mat_&…

编程日记2024/10/11 10:40:00