JS动画实现方法
实现动画的方案主要有6种：Javascript直接实现动画，可伸缩矢量图形(SVG)动画，CSS transition，CSS3 animation、Canvas动画、requestAnimationFrame。
javascript实现
<!DOCTYPE html><html><head>
<style>
.content{width: 100px;height: 100px;background-color: red;}
</style></head><body><p class="content"></p><script>
var ele=document.getElementsByClassName("content")[0];
var left=0;
let timer=setInterval(function () {
if(left<window.innerWidth-100){
ele.style.marginLeft=left+'px';
left++;
} else {
clearInterval(timer);
}
},16);</script></body></html>缺点：通过Javascript实现动画通常会导致页面频繁重排重绘，很消耗性能。
按照常理来说，改变元素位置会产生重排，为什么上面图中显示的全是重绘呢？原因是绝对定位会建立一个新的图层，而此图层上只有当前一个元素，所以只会重绘，而不会重排。这也告诉我们，在同一层中，元素数量少的情况下，重排性能对更好，速度会更快。
CSS3 transition
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
margin-left: 0;
}
.right{
width: 100px;
height: 100px;
margin-left: 400px;
background-color: blue;
}
</style></head><body><p class="content"></p><script>var timer=setTimeout(function () {
var content=document.getElementsByClassName("content")[0];
content.setAttribute('class','right');
},500);</script></body></html>为什么 transform 没有触发 repaint 呢？简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染。
硬件加速原理
浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中transform 是不会触发 repaint 的，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。
CSS3 animation
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
animation: move 4s infinite;
margin-left: 0;
}
@keyframes move {
from{
margin-left: 0;
}
50%{
margin-left: 400px;
}
to{
margin-left: 0;
}
}
</style></head><body><p class="content"></p></body></html>并不是所有的CSS属性都能触发GPU的硬件加速（图层在GPU中属性改变不会触发 repaint ），实际上只有少数属性可以，比如下面的这些：
transform
opacity
filter
Canvas动画
<!DOCTYPE html><html><head></head><body><canvas id="canvas" width="700" height="500"></canvas><script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var left=0;
var timer=setInterval(function () {
ctx.clearRect(0,0,700,550);
ctx.beginPath();
ctx.fillStyle="#f00";
ctx.fillRect(left,0,100,100);
ctx.stroke();
if(left>700){
clearInterval(timer);
}
left+=1;
},16);</script></body></html>requestAnimationFrame
<!DOCTYPE html><html><head>
<style>
p{width: 100px;height: 100px;background-color: red;}
</style></head><body><p id="box" width="700" height="500"></p><script>
window.requestAnimationFrame=window.requestAnimationFrame||
window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
let element=document.getElementById("box");
let left=0;
requestAnimationFrame(step);
function step() {
if(left<window.innerWidth-200){
left+=1;
element.style.marginLeft=left+"px";
requestAnimationFrame(step);
}
}</script></body></html>以上是JS动画实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
怎么在番茄免费小说app中写小说 分享番茄小说写小说方法教程
Mar 28, 2024 pm 12:50 PM
番茄小说是一款非常热门的小说阅读软件，我们在番茄小说中经常会有新的小说和漫画可以去阅读，每一本小说和漫画都很有意思，很多小伙伴也想着要去写小说来赚取赚取零花钱，在把自己想要写的小说内容编辑成文字，那么我们要怎么样在这里面去写小说呢?小伙伴们都不知道，那就让我们一起到本站本站中花点时间来看写小说的方法介绍吧。分享番茄小说写小说方法教程 1、首先在手机上打开番茄免费小说app，点击个人中心——作家中心 2、跳转到番茄作家助手页面——点击创建新书在小说的结
微信删除的人如何找回（简单教程告诉你如何恢复被删除的联系人）
May 01, 2024 pm 12:01 PM
而后悔莫及、人们常常会因为一些原因不小心将某些联系人删除、微信作为一款广泛使用的社交软件。帮助用户解决这一问题，本文将介绍如何通过简单的方法找回被删除的联系人。1.了解微信联系人删除机制这为我们找回被删除的联系人提供了可能性、微信中的联系人删除机制是将其从通讯录中移除，但并未完全删除。2.使用微信内置“通讯录恢复”功能微信提供了“通讯录恢复”节省时间和精力，用户可以通过该功能快速找回之前被删除的联系人，功能。3.进入微信设置页面点击右下角，打开微信应用“我”再点击右上角设置图标、进入设置页面，，
华为手机如何实现双微信登录？
Mar 24, 2024 am 11:27 AM
华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同
手机版龙蛋孵化方法大揭秘（一步一步教你如何成功孵化手机版龙蛋）
May 04, 2024 pm 06:01 PM
手机游戏成为了人们生活中不可或缺的一部分，随着科技的发展。它以其可爱的龙蛋形象和有趣的孵化过程吸引了众多玩家的关注，而其中一款备受瞩目的游戏就是手机版龙蛋。帮助玩家们在游戏中更好地培养和成长自己的小龙，本文将向大家介绍手机版龙蛋的孵化方法。1.选择合适的龙蛋种类玩家需要仔细选择自己喜欢并且适合自己的龙蛋种类，根据游戏中提供的不同种类的龙蛋属性和能力。2.提升孵化机的等级玩家需要通过完成任务和收集道具来提升孵化机的等级，孵化机的等级决定了孵化速度和孵化成功率。3.收集孵化所需的资源玩家需要在游戏中
手机字体大小设置方法（轻松调整手机字体大小）
May 07, 2024 pm 03:34 PM
字体大小的设置成为了一项重要的个性化需求，随着手机成为人们日常生活的重要工具。以满足不同用户的需求、本文将介绍如何通过简单的操作，提升手机使用体验，调整手机字体大小。为什么需要调整手机字体大小-调整字体大小可以使文字更清晰易读-适合不同年龄段用户的阅读需求-方便视力不佳的用户使用手机系统自带字体大小设置功能-如何进入系统设置界面-在设置界面中找到并进入"显示"选项-找到"字体大小"选项并进行调整第三方应用调整字体大小-下载并安装支持字体大小调整的应用程序-打开应用程序并进入相关设置界面-根据个人
快速掌握：华为手机开启两个微信账号方法大揭秘！
Mar 23, 2024 am 10:42 AM
在当今社会，手机已经成为我们生活中不可或缺的一部分。而微信作为我们日常沟通、工作、生活的重要工具，更是经常被使用。然而，在处理不同事务时可能需要分开两个微信账号，这就要求手机能够支持同时登录两个微信账号。华为手机作为国内知名品牌，很多人使用，那么华为手机开启两个微信账号的方法是怎样的呢？下面就来揭秘一下这个方法。首先，要在华为手机上同时使用两个微信账号，最简
PHP编程指南：实现斐波那契数列的方法
Mar 20, 2024 pm 04:54 PM
编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元
如何在华为手机上实现微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App
